Welcome Guest [Log In] [Register]
This board has been archived and is no longer accepting new questions. If you have a support question for your ZetaBoard, please visit us at the new support board. Registration is free and easy.


Visit the NEW ZetaBoards Support forum!

Username:   Password:
Locked Topic
[Solved]Applying theme elsewhere
Topic Started: May 24 2008, 04:45 AM (540 Views)
Lama195
Member Avatar
Sergeant Watling
[ *  * ]
Hi,
I would like to know how I can make a website on the website maker have the same theme as my board. This is possible with an IF skin (as shown in my screenshots). Below are the pages, ignore the lack of linebreaks, you will notice the left hand menu has maintitle bars (well kind of) and the ZB forum does not.

Here's it on IF forums... (Using Boardrules page)
Posted Image

And now on ZB forums... (Using Website Maker)
NOTE: Using random board I was playing with
Posted Image

How can I recode my IF code to match any ZB theme?
Offline Profile Goto Top
 
Nicola
Darth Vader's Sewing Instructor
[ *  *  *  *  *  *  * ]
So you want to code the HTML so that it matches any theme you have on your board?
Offline Profile Goto Top
 
Lama195
Member Avatar
Sergeant Watling
[ *  * ]
In simple terms, yes... is that possible?
Offline Profile Goto Top
 
Nicola
Darth Vader's Sewing Instructor
[ *  *  *  *  *  *  * ]
Yep, you just need to know the class names/types.

For instance, look here: http://s1.zetaboards.com/Testing/pages/announcements/
(you should probably change the Theme to Zeta Original)
On that page, I have several boxes which are styled the same way the categories on the main index are. This is because I gave the elements class names etc:

HTML
 
<div class="category">
<table class="cat_head"><tr><td>
<h2>Title</h2>
</td></tr></table>
<table cellpadding="0" cellspacing="0" valign="top">
<tr>
<td style="width: 25%; background: #f6f6f6;" valign="top"><a href="http://google.com">Google</a><br/><a href="http://zetaboards.com">Zetaboards</a><br/><a href="http://invisionfree.com">InvisionFree</a></td>
<td style="width: 50%;" valign="top">Lots and lots of text.<br/>
Perhaps even a list of stuff:
<ul>
<li>Cow</li>

<li>Duck</li>
<li>Chicken</li>
</ul></td>
<td style="width: 25%; background: #f6f6f6;" valign="top">An image.<img src="http://z3.ifrm.com/static/acp/no_preview.png" alt=""/></td>
</tr>
<tr>
<td class="c_foot" colspan="3" valign="top"></td>
</tr>
</table>
</div>

The items in bold are parts of the normal board CSS.

It might be fairly difficult for you to do, depends on your CSS/HTML knowledge.
Offline Profile Goto Top
 
Lama195
Member Avatar
Sergeant Watling
[ *  * ]
Ok so does this replace the part of the code which says:
Quote:
 

<table width="100%">
<tr>
<td width="18%" valign="top">
<div class='tableborder'>
<div class='maintitle'>Control Panel</div>
<div class='row4'>


And my CSS/HTML knowledge kinda sucks but if its a case of replacing parts of the current code I can probably get it.
Offline Profile Goto Top
 
Nicola
Darth Vader's Sewing Instructor
[ *  *  *  *  *  *  * ]
Those are InvisionFree class names.

You want this instead, for a decent equivalent:
Code:
 
<table width="100%">
<tr>
<td width="18%" valign="top">
<div class="category">
<table class="cat_head"><tr><td>
<h2>Control Panel</h2>
</td></tr></table>
<div class='row4'>


Not quite sure what you could use in place of row4, though. That's the main type of cell on IF...
I'd just use a new table row and then a simple cell for content:

Code:
 

<table width="100%">
<tr>
<td width="18%" valign="top">
<table class="cat_head"><tr><td>
<h2>Control Panel</h2>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
stuff


Then don't forget to close the tags :P

There is a sidebar code here if that's what you're after. You'd have to style it with the CSS provided, though.
Offline Profile Goto Top
 
Lama195
Member Avatar
Sergeant Watling
[ *  * ]
Ok thanks alot Nicola!
I could probably do this but it'd take a while and theres a chance I'd mess it up completely, so before I start tampering could you do something for me. I feel kinda cheeky asking this so feel free to refuse.

Can you code a basic table as seen in the webpage, with 3 down the side and 2 in the middle... just the skin and bones of it. I'll add the content.

This won't just be for me... This code is an IF code which got alot of good reviews and I can repost it. You and the original author will get credit of course.

If you can do this I will be eternally greatful.
Offline Profile Goto Top
 
Nicola
Darth Vader's Sewing Instructor
[ *  *  *  *  *  *  * ]
You're in luck. I am incredibly bored ;)

Nicola opens her HTML editor

Edit:

http://s1.zetaboards.com/Testing/pages/support_thing/

Code: HTML
 
<table cellspacing="0" cellpadding="3" align="center">
<tr>
<!-- left side -->
<td width="250px">
<!-- block 1 -->
<div width="230px" class="category" style="width: 230px!important">
<table class="cat_head" style="padding:0">
<tr>
<td style="padding:0">
<h2>Block 3</h2>
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="3">
<tr>
<td>
contents of block 3
</td>
</tr>
</table>
</div>
<br />
<div width="230px" class="category" style="width: 230px!important">
<table class="cat_head" style="padding:0">
<tr>
<td style="padding:0">
<h2>Block 3</h2>
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="3">
<tr>
<td>
contents of block 3
</td>
</tr>
</table>
</div>
<br />
<div width="230px" class="category" style="width: 230px!important">
<table class="cat_head" style="padding:0">
<tr>
<td style="padding:0">
<h2>Block 3</h2>
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="3">
<tr>
<td>
contents of block 3
</td>
</tr>
</table>
</div>
</td>

<td width="98%">
<div class="category">
content of larger block 1
</div>
<div class="category">
content of larger block 2
</div>
</td>
</tr>
</table>


Note the end part:


Note
 
<div style="padding: 5px; border: 1px solid #ddd; margin: 10px 0 auto;">
content of larger block 1
</div>
<div style="padding: 5px; border: 1px solid #ddd; margin: 10px 0 auto;">
content of larger block 2
</div>
</td>


Use standard CSS there to style the two larger boxes.

If you want them to 'float' there, i.e without the borders going around both columns, find the <td> lines with a width, and add the following to the end:

HTML
 

<td width="250px" style="border:0; background: none">
<td width="98%"style="border:0; background: none">



Edited by Nicola, May 24 2008, 05:20 PM.
Offline Profile Goto Top
 
Lama195
Member Avatar
Sergeant Watling
[ *  * ]
Thanks alot Nicola!
You've been extremely helpful! :D :D
My coding question is solved and ZB gets a new code. Look here if you're interested
Offline Profile Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Theme & CSS Help · Next Topic »
Locked Topic