gpEasy Hacks

Note: these hacks are for pre 2.0. I haven't had time to really hack away at gpEasy 2.x. 

gpEasy 1.7 has been released. At this point there isn't much I need to really hack in gpEasy but then again, I'm not really wanting to do anything out of the ordinary.

One thing you should realize is that most of these hacks are aimed at core gpEasy files, thus you will have to apply them before each and every upgrade or give them up.

Anyways. . . lets get to a few hacks.

Configure CKEditor

The first set of hacks that I do before every upgrade are my CKEditor configuration hacks. I go through all my CKEditor tweaks on the CKEditor tips for gpEasy page. I change the ckeditor_config.js file found in the /include/js/ folder for these hacks. I setup the toolbar buttons, which every day becomes less and less because I also apply keyboard shortcuts and as I get used to using the shortcuts I remove the buttons. I also add the protection for line breaks in the config file as well. I no longer use the hacks to protect any type of code such as PHP in CKEditor because I just don't need to do that any longer but it's there if you want it.

The other hack that I apply to CKEditor is adding my theme's style sheet to CKEditor's. This makes working in CKEditor a little more like actually working on my site. Again, this hack is found on the CKEditor tips for gpEasy page. . . and that's about it for CKEditor tweaking.

Change the Galleries Styles

Update for gpEasy 1.7 final: you can now change your gallery styles by adding a plugin. There should be more plugins available soon. However, the following information still applies if you wish to change your gallery styles via your theme's css.

As you can see on the galleries page my galleries don't look like a typical gpEasy installation. Well, that's because I've written my gallery styles to overwrite the default styles to make it look the way I like it. The next revision of gpEasy 1.7 will define the galleries page (Special_Galleries) with class="gp_gallery gp_galleries" and a gallery page with class="gp_gallery" to help with styling between the Galleries page and Gallery pages however, the code I'm presenting works. You just have more options.

The CSS for styling the galleries is in /include/css/additional.css. In it you will find .gp_gallery. That's the stuff you want to change. The original, at least at gpEasy 1.7a4, looks like:

.gp_gallery{
	clear:both;
	}
.gp_gallery li{
	float:left;
	width:20em;
	overflow:hidden;
	list-style:none;
	display:inline-block;
	margin:0 1em 1em 0;
	padding:.5em .5em 0 .5em;
	border:1px solid #ccc;
	height:110px;
	-moz-border-radius: 9px;
	-webkit-border-radius: 9px;
	-o-border-radius: 9px;
	border-radius:9px;
	background-color:#F1F1F1;
	background:#fafafa url(../imgs/list_back.png) bottom repeat-x;
	color:#333;
	position:relative;
	}
.gp_gallery div{
	margin-left:110px;
	}
.gp_gallery img{
	left:10px;
	top:10px;
	position:absolute;
	margin:0 1em 1em 0;
	}

Except all shoved together.

In order to override this styling you need to recode for each styling above. This way your css will override the default because your style sheet for your theme is loaded after the one above.

What I do is simply add the following code to my theme's style sheet:

.gp_gallery {
	margin: 0;
	padding-left: 30px;
	clear: both;
}
.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;
}
.gp_gallery div {
	margin: 0;
	display: block;
	font-size: 12px;
}
.gp_gallery div p {
	margin: 5px;
}
.gp_gallery img {
	left: 0px;
	top: 0px;
	position: relative;
	margin: 10px;
}
/* .GPAREA shows in gallery pages not special_galleries = Gallery Pages ONLY */
.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;
}

Notice in my CSS that I'm telling you that the .GPAREA is used on gallery pages but not on the Special_Galleries page. This is currently the only way to differentiate Galleries from Gallery pages. That will change soon as I noted above.

I used to use a @import to import my gallery styles into my themes but this caused excessive calls to the server so I've compiled all css for my themes into the themes style sheet and try to make as few additional calls as possible. It helps with the overall loading speed of pages.

The main point of this gallery hack is where the styling is located, in the 'additional.css' file located in the /include/css/ folder within your gpEasy installation, and that you MUST recode all the gp_gallery code to format yours correctly.

Currently there is a second part to this hack. . . yeah, it couldn't be that easy however, in the next revision of gpEasy, thanks to the developers, this will be corrected so the hack will no longer be needed.

You will need to open the file /include/special/special_galleries.php and find a line of code that looks like: echo '<li style="clear:both">';

Currently the code is on line 167 but that could will change and maybe even in future versions there won't be a clear:both style on the list item, though it may be done in the styles for the gallery so you will need to make sure your gallery styling is working properly and doesn't need to be updated. Currently, if you leave this in then you will get a vertical list for galleries as opposed to galleries that float left one after the other. Just change it to echo '<li>'; and your are good to go.

If you apply both parts of this hack your Special_Galleries & all Gallery pages should look like mine, but where's the fun in that? Have a go at changing things and see what you can come up with and show it off on the gpEasy forum.

That's it!

Believe it or not but that's all the hacks I apply to gpEasy at this time. Why hack core files when you don't need to? Also, if there is a hack you need to do that seems like it should be part of gpEasy CMS to begin with then submit it as a feature request. For me gpEasy does what I need it to do for the most part so I leave it alone. Hopefully in the future I won't even have to apply these hacks.

As it looks the only hack I'll need to apply in the next revision of gpEasy (1.7 Beta) will be the CKEditor configurations, not bad at all.

 

gpEasy B2sq Theme by CS @True Acupuncture