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; For ZetaBoards!
Topic Started: Mar 26 2008, 04:17 PM (1,198 Views)
Locke
Member Avatar
That one guy
In our collaborative efforts to encourage more people to experiment with ZetaBoards Themes, Nicola has given me permission to post this script here at the SZ. ^_^ Once you've begun to feel more comfortable with the basics of ZetaBoards, try this out.

Everything below is a direct quote to Nicola. :)

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[
$(".category td.c_foot").append('<div class="foot_left"></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.
Offline Profile Quote Post Goto Top
 
Shav
Member
[ *  *  *  * ]
mite come in handy ^_^ thanks!
Offline Profile Quote Post Goto Top
 
Sith
Member
[ *  *  *  *  *  *  * ]
It's a nice script, it's just a shame the 3-part h2 it goes with is buggy (if that's even a word :P).
Offline Profile Quote Post Goto Top
 
Futile
Member Avatar
Member
[ *  * ]
LOL exalent coding Locke i made sumink like dat but not as good kiida lol
Offline Profile Quote Post Goto Top
 
Nivexonix
Member Avatar
Love
[ *  *  *  *  *  *  * ]
Glad it is released. Hopefully it will be made useful, and hopefully an entire 3-piece set of coding will be made. :)
Offline Profile Quote Post Goto Top
 
PoloKid
Member Avatar
Member
[ *  *  * ]
Thanks for releasing it Locke.
Offline Profile Quote Post Goto Top
 
Locke
Member Avatar
That one guy
I didn't write it (I wouldn't know where to start :P) but I'm sure Nicola appreciates your thanks. It's all about doing what we can to facilitate and encourage more people to try new things.
Offline Profile Quote Post Goto Top
 
Arianna
Member Avatar
Never settle for a half measure.
[ *  *  *  *  *  *  * ]
I'll be using it, thank you for posting it.
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Creative Discussion · Next Topic »
Add Reply