Page 1 of 1

Formatting of Gallery thumbnail titles

Posted: Thu Jan 12, 2012 7:30 pm
by Anthony
I've only just started using WebYep. I am using it with Freeway. I was wondering how it is possible to do some basic formatting of the titles below the thumbnails in the gallery at all?
Is this something which can be done within WebYep or not?

Any help is welcome.

Ta

Re: Formatting of Gallery thumbnail titles

Posted: Fri Jan 13, 2012 11:46 am
by marcus
WebYep assigns special CSS style classes to the Image Gallery Element's items. By defining styles for these CSS classes in your page's stylesheet, you have detailed control of the look of your WebYep elements.

To style the caption of gallery images you'd use the CSS class WebYepGalleryText.

For a complete list of available classes please consult the WebYep documentation.

Re: Formatting of Gallery thumbnail titles

Posted: Thu Mar 08, 2012 7:17 pm
by testing1
First things first, I would recommend downloading Google Chrome and start using it for testing/development.
Right-button click on the thumbnail (and other elements on the page), will show you a menu. Select the "inspect element" option. Chrome will display the html and css information for the selected element.

After you figure out what WebYep calls that element, edit the CSS to target that element and change the rules to your liking. Example below.

What WebYep calls the element for gallery (the thumbnail):

Code: Select all

<div class="WebYepGalleryImage">
       <img src="/webyep-system/data/53-gl-Gallery_Pics-3549-tn.jpg" width="170" height="127" alt="Photo">
</div>


Lets target the div called "WebYebGalleryImage" with the CSS we want to change:

Code: Select all

div.WebYepGalleryImage img {
   border:0;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
   margin:10px;
   float:left;
   background:#000;
   padding:5px;
}


Let me know if this helps or if you need additional info.

8)

Re: Formatting of Gallery thumbnail titles

Posted: Wed Mar 14, 2012 11:08 pm
by Max
Hi Anthony
in the last version of the Freeway WebYep Manual I accidentally omitted the instructions on how to style the Gallery, but this will be re-introduced in the next release.
In the mean time here is a freeway example which you can download:
http://www.max-izzat.co.uk/examples/gallery-example.zip
and this is the link for the missing section of the manual
http://www.max-izzat.co.uk/gallery/webyep_gallery.zip
all the best max