Formatting of Gallery thumbnail titles

General discussions about WebYep
Post Reply
Anthony
Posts: 2
Joined: Thu Dec 01, 2011 1:15 pm

Formatting of Gallery thumbnail titles

Post by Anthony » Thu Jan 12, 2012 7:30 pm

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

marcus
Objective Development
Objective Development
Posts: 170
Joined: Tue Nov 30, 2010 1:25 pm

Re: Formatting of Gallery thumbnail titles

Post by marcus » Fri Jan 13, 2012 11:46 am

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.

testing1
Rank 1
Rank 1
Posts: 23
Joined: Tue Oct 13, 2009 5:25 pm

Re: Formatting of Gallery thumbnail titles

Post by testing1 » Thu Mar 08, 2012 7:17 pm

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)

Max
Rank 4
Rank 4
Posts: 176
Joined: Wed Nov 08, 2006 10:39 pm
Location: UK
Contact:

Re: Formatting of Gallery thumbnail titles

Post by Max » Wed Mar 14, 2012 11:08 pm

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

Post Reply