We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Add Reply
3-Piece Category Footer; By Nicola
Topic Started: Feb 3 2010, 11:40 PM (1,357 Views)
Reid
Member Avatar
È una trappola!

This topic has been moved from our official support board.

Originally posted by: Will
3-Piece Category Footer
 
This code has been moved here from our old support forum (as it will soon no longer exist at it's current location).
Please use the report button on this post to notify our staff of any problem with this modification.


Originally posted by: Nicola
3-Piece Category Footer
 
Preview Here. Select the '3-piece c_foot' theme. You'll see a visual difference on the index.

This is kinda to go with Choco's 3-Piece h2.
Except, this only works for the td.c_foot appearances on the index/category view. The simple reason being, to have it in other places would require lots more CSS and lots of JS, and to be frank...you want something plain for areas where you have text and drop-boxes etc. This is just an aesthetic thing. I want things to be usable, so I'm personally not allowing this for places such as the topic view :P

Please note: You cannot use transparent images for the left/right images.
Also: I would not recommend this if you're new to CSS.

The jQuery required:

Add to very end of Theme Layout
Code:
 
<script type="text/javascript">
//<![CDATA[
ff=(navigator.userAgent.indexOf("Firefox")!=-1)?" style='position:relative;left:-1px'":"";
$(".category td.c_foot").append('<div class="foot_left"'+ff+'></div><div class="foot_right"></div>');
$("#stats td.c_foot .right").prependTo("#stats .foot_right");
//]]>
</script>


The last line puts the Administrator/Moderator etc links into the right div, so you need to style that div specifically, which you'll soon see:

The CSS:

Quote:
 
.category td.c_foot {
background: url( repeating background );
padding:0;
}

.foot_left {
float: left;
background: url( URL TO LEFT IMAGE ) no-repeat left;
height: height of image ;
width: width of image;
}

.foot_right {
float: right;
background: url( URL TO RIGHT IMAGE ) no-repeat right;
height: height of image ;
width: width of image;
}

#stats .foot_right {
width: 480px;
padding-right: padding to move the links to the right;
padding-top: padding used to position the links ;
height: height of right image minus the top padding;
}


For the final part, you'd need to adjust the width to accommodate for the links. You will also have to adjust the padding and height accordingly.
For example, in my test the image is 30px in height. To center it, I used 8px top padding, which means I had to then only set the height to 22px overall.

If you want to style the statistics category foot differently, then add the classes again, but change them to #stats .foot_left for example.

Please PM me with questions because I'm more likely to read my PM's than this thread. I am also not going to care much if anyone wants to mutilate this 'code' since it's only 2 lines :P
Edited by Reid, Feb 7 2010, 01:53 AM.
Offline Profile Quote Post Goto Top
 
Canimia
Member Avatar
Parachute? This is obviously a Hot Air Balloon!
[ *  *  * ]
Doesn't seem to work for me. Is it just because it's old?
Offline Profile Quote Post Goto Top
 
Pando
Member Avatar
Member
[ *  *  *  *  *  * ]
Canimia
May 25 2012, 11:44 PM
Doesn't seem to work for me. Is it just because it's old?
Try this, it's newer :)
Offline Profile Quote Post Goto Top
 
Canimia
Member Avatar
Parachute? This is obviously a Hot Air Balloon!
[ *  *  * ]
Yay, that worked! 8D
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · ZetaBoards Codes & Modifications · Next Topic »
Add Reply