Styling gpEasy Gallery Pages

Update: Gallery pages can now be styled by using plugins However, this information is still valid.

There are two main sets of "gallery" pages in gpEasy CMS. The first is the "Special_Galleries" page and the second is "a gallery page." The former is a "special" page created by gpEasy to hold all your gallery pages in one area. It has the relative link or page slug of /Special_Galleries. While the latter are the gallery pages you yourself create and add images to. Along with this tutorial you should check out the custom galleries tutorial, the gpEasy Hacks page, and the additional.css file tutorial. Those three pages contain additional information and examples about the styling of gpEasy gallery pages.

The Galleries Classes

As of gpEasy 1.7 Beta 1 the Special_Galleries page now has two classes to the unordered list items (<ul>). The UL looks like this: <ul class="gp_gallery gp_galleries">. Therefore it has two classes: .gp_gallery .gp_galleries

The Gallery Class

The Gallery pages however only have one class assigned to their unordered list: <ul class="gp_gallery"> = .gp_gallery

Styling Galleries & Gallery Pages

As you can see form the above code you can style the Special_Galleries page different than a gallery page. You can look at this site's Special_Galleries page and see that I have indeed styled it differently than the actual gallery pages though, not by much.

Style Only The Special Galleries
To style only the Special_Galleries page you can use both classes assigned to the UL: .gp_gallery .gp_galleries

This signifies that the styling is applied to the class .gp_galleries only if it follows the class .gp_gallery.

Or you can just use the .gp_galleries class by itself.

Style Only A Gallery
In order to style the gallery pages differently than the Special_Galleries page you must style the Special_Galleries page as indicated above. Then you would use the class .gp_gallery by itself to style the gallery pages or use the GPAREA class with the .gp_gallery class as discussed below.

Styling both together
As you can see the class .gp_gallery can be used to style both the Special_Galleries page and all gallery pages. This is an easy way to style both types of pages for common elements. In fact this is how they are styled in the additional.css file. Just use the .gp_gallery class to style common elements that you want to look similar then just use the separate styling classes as indicated for the styles you wish to be different between the two types of pages.

GPAREA
If you look at the source code of the Special_Galleries page Vs a gallery page you will see that the class GPAREA is defined on the gallery pages but not the Special_Galleries page. The GPAREA class comes before the .gp_gallery class therefore, you can use the GPAREA to specify a gallery page vs the Special_Galleries page as well. The styling code for that would be: .GPAREA .gp_gallery

Now you have a couple of ways to clearly separate your styling for gallery pages vs the galleries page.

The Caption DIV
The caption div doesn't have a class or id applied to it. Therefore you simply style it with ".gp_gallery div" with or without the other classes depending on your needs.

Unordered List Items
All images in both the galleries page & gallery pages are in an unordered list thus you will use the appropriate "ul" and/or "li" in your styling of these elements.

Colorbox Caption

Finally, when an image opens in Colorbox the caption is displayed with styling. This is one styling component of Colorbox you may wish to change. The styling component id is: #cboxTitle

Summary

Galleries: .gp_gallery .gp_galleries OR .gp_galleries
Gallery: .gp_gallery OR .GPAREA .gp_gallery
Colorbox Caption: #cboxTitle

That's the basis for styling your gallery & galleries the way you want.

Since the .gp_gallery is styled in the additional.css file you will want to make certain that you over-ride all styling used for the .gp_gallery class in the additional.css file or remove the styling from that file.

That's really all there is to styling the galleries in gpEasy CMS.

My site as an example

The following css is what I use to style the galleries page, gallery pages, and Colorbox caption. You will notice that I'm combining styling of the two and using the GPAREA to define the gallery page differently. I chose to do it this way for a number of reasons. First, when I did it the .gp_galleries class wasn't available. Secondly, my galleries and gallery pages are styled very similarly with only a couple differences thus it would be overkill to code both completely separate. I'm sure I'll do things a bit different in the future and with other themes. Anyway, here the code I'm using with this theme currently:

.mygalleries, .gp_gallery {
	margin: 0;
	padding-left: 30px;
	clear: both;
}

.mygalleries li, .gp_gallery li {
	float: left;
	width: 170px;
	overflow: hidden;
	list-style: none;
	display: block;
	margin: 0 10px 10px 0;
	padding: 0;
	border: 1px solid #eee;
	height: 170px;
	-moz-border-radius: 9px;
	-webkit-border-radius: 9px;
	-o-border-radius: 9px;
	border-radius: 9px;
	background-color: #ffffff;
	background: none rgb(255,255,255) !important;
	position: relative;
	text-align: center;
}

.mygalleries div, .gp_gallery div {
	margin: 0;
	display: block;
	font-size: 12px;
}

.mygalleries div p, .gp_gallery div p {
	margin: 5px;
}

.mygalleries img, .gp_gallery img {
	left: 0px;
	top: 0px;
	position: relative;
	margin: 10px;
}

.GPAREA .gp_gallery li {
	width: 120px;
	height: 120px;
}

.GPAREA .gp_gallery div {
	display: none;
}

.GPAREA .gp_gallery img {
	left: 0px;
	top: 0px;
	position: relative;
	margin: 10px 0 0 0;
}

#cboxTitle {
	text-align: left;
	color: #000000;
}

Did you notice the .mygalleries class? Check out the custom galleries tutorial to find out why that's there. . . that's it for this styling tip.

 

gpEasy B2sq Theme by CS @True Acupuncture