Welcome Guest [Log In] [Register]
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:
Multiquote (on) Multiquote (off)
Add Reply
Board Template Setup
Topic Started: Jun 27 2014, 11:42 PM (1,188 Views)
Cameron RedGem
Member Avatar
Member
[ * ]
Hello everyone,

I do need some help with the basic board template when you firstly setup most of the stuff on it.
Posted Image

1. I like the background to be an image if you can point that out to me (left side very far where that blue is to be placing a image at)

2. Where the "Welcome Cameron RedGem", the orange that is above from it, is there a way to change it to a different color?

3. The while for that board, is there a way to change it to be an image for the board?

4. How can you get right the Zetaboards logo and the line where the "Search and Members" are at? Also is there a way to center the "Search, Member, Calendar, etc"?

If you can help me thanks.
Offline Profile Quote Post Goto Top
 
-The-
Member Avatar
#the { display: none; }
[ *  *  *  *  * ]
All of your fixes can be found in the Theme Appearance of your theme. Go to Themes > Themes > Press Theme Appearance of your selected theme. The CSS is long, use Ctrl+F to search for the specific tags that I have showed you.

1) The background blue can be controlled via this snippet of the CSS:
Code:
 
html,body {
background:#5a70b3;
color:#000;
font-family:"Helvetica", "Arial", "Bitstream Vera Sans", "Verdana", sans-serif;
font-size:93.3%;
margin:0;
padding:0;
}
Change the background:#5a70b3 to another HTML hex code for a single colour, or use the following tag: background-image: url( url of your image will go here ) ;. Have the image handy before editing the CSS.

2) The orange can be controlled via this snippet of the CSS:
Code:
 
#top_bar {
background:url(http://z5.ifrm.com/static/1/css/topbar.png) repeat-x top #FB9D3A;
height:19px;
}
Edit the background url if you want to use another image (it doesn't have to be long, as the repeat-x part of the CSS automatically places many along the top to give the impression of a long bar, making the #top_bar fluid.)

3) Fine #wrap in the CSS.
Code:
 
#wrap {
background:#fff;
border:1px solid #3A5197;
margin:0 2% 30px;
}
Then using the background-image: url( url of your image will go here ) ;, you may use an image instead.

4) If I understand correctly, you want to align the logo to the right? If so, head out of the theme appearance (after editing of course! You don't want to lose it!), and into the Theme Settings page of your theme. Now you want to edit the logo setting: change it to this:
Code:
 
<div align="right">
<img src="http://z3.ifrm.com/static/1/logo.png" alt="ZetaBoards" />
</div>
For your own specific banner, you can upload your own file.

In order to center the submenu (search, members etc etc), find #submenu in your CSS and add align:center; before the last }

Hope it helps, be sure to ask for help if you need it!

-The-
Offline Profile Quote Post Goto Top
 
Cameron RedGem
Member Avatar
Member
[ * ]
Okay, So I did them but for 4, that wasn't the answer the was looking for ... now that I looked at the question I said, I screw up on it.

I was wondering how to get the logo above "Welcome Cameron RedGem".
How do center the Search, Members, Calendar, etc.? How do you also change it just be one line with a transparency?
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Place the <!-- HEADER --> tag before the <!-- TOPMENU --> tag in your Edit Theme Layout to move the logo above the top menu.

To center the submenu links, change right to center:
Code:
 
#submenu {
background:url(http://z5.ifrm.com/static/1/css/dropli.png) repeat-x top #586eb1;
border-left:1px solid #3a5197;
border-right:1px solid #3a5197;
color:#586eb1;
font-size:85%;
margin:0 2%;
padding:3px 1% 4px;
text-align:right;
}
That is located in your CSS (Edit Theme Appearance).

If you don't want the background to appear for the submenu or submenu bar, you can remove the background line on the strip above and this strip as well:
Code:
 
#submenu_bar {
background:url(http://z5.ifrm.com/static/1/css/submenubar.png) repeat-x top #FB9D3A;
border-left:1px solid #3a5197;
border-right:1px solid #3a5197;
height:14px;
margin:0 2%;
}
You'll probably want to remove the border lines as well.
Offline Profile Quote Post Goto Top
 
Cameron RedGem
Member Avatar
Member
[ * ]
Thanks for the help. Though I do have more to ask.
Posted Image

1. How can I make that blue background go away
2. How can I make that top bar and the Welcome thing ... I can I get it to don't go all the way?

For the forums and stuff,
1. How can I add a picture to where the "News & Discussion" is at?
2. How can I change the background from that white?
Edited by Cameron RedGem, Jul 4 2014, 01:22 AM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
If you're using Google Chrome, you should have a default right click Inspect Element option. I think the same can be said for newer versions of Firefox, but I always used Firebug. These tools will allow you to right click on an element and it will tell you exactly what CSS command controls what.

You may want to see the guide to theme creation if you're looking to create a new theme from ground up.

The blue backgrounds I see in your screenshot are controlled by these strips:
Code:
 
#logo {
background:url(http://z1.ifrm.com/static/1/css/logobg.png) repeat-x top #566cb0;
border:1px solid #3a5197;
border-bottom:0;
clear:both;
margin:0 2%;
}
Code:
 
#top {
background:url(http://z1.ifrm.com/static/1/css/dropli.png) repeat-x top #586eb1;
border-bottom:1px solid #3a5197;
height:20px;
padding:0 2% 4px;
margin-bottom:12px;
}
Code:
 
.category h2,.topic h2,#portal h2,#portal_foot h2,thead th {
background:url(http://z1.ifrm.com/static/1/css/h2.png) repeat-x top #6a7db6;
color:#fff;
font-size:110%;
font-weight:700;
}
In the middle strip, change this:
Code:
 
margin-bottom:12px;
To this:
Code:
 
margin: 0 2% 12px;
That will make the margins even with the logo.

The last strip above controls the headers you're referring to and it has a interchangable background image by default.

The white background is the table cells, which is controlled by this line:
Code:
 
td {
background:#fafafa;
color:#333;
padding:5px 10px;
}
Offline Profile Quote Post Goto Top
 
Cameron RedGem
Member Avatar
Member
[ * ]
The background only changed part of the forums.
Posted ImagePosted Image
You a know anything else to get the rest black? Also to move the "W101 Trivia" to center?
Edited by Cameron RedGem, Jul 4 2014, 11:50 PM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Yes, there are some table cells that have a different background overridden with CSS. Here's the ones in your images:
Code:
 
.c_mark {
background:#f6f6f6;
text-align:center;
width:1%;
}
Code:
 
td.c_last {
background:#f6f6f6;
font-size:85%;
}
You can simply remove the background line to get the background to black like you want.
Code:
 
div.category h2 {
text-align: center;
}
You can add that to your CSS to center the category header text.
Offline Profile Quote Post Goto Top
 
Cameron RedGem
Member Avatar
Member
[ * ]
What about the calendar, and portal posts to go black as well?
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Controlled by these strips:
Code:
 
div.portal_content {
background:#fafafa;
border:1px solid #e7e7e7;
font-size:88.3%;
margin:0;
padding:5px 7px;
}
Code:
 
.calendar td.cal_inactive {
background:#f6f6f6;
color:#e7e7e7!important;
}
Code:
 
.calendar td#cal_current {
background:#fff;
border:2px solid #5a70b3;
}
Offline Profile Quote Post Goto Top
 
Cameron RedGem
Member Avatar
Member
[ * ]
Okay, thanks for the help
Another thing though in Admin CP is that when you say something in the announcement, is there any way to edit it or not?
Edited by Cameron RedGem, Jul 10 2014, 10:53 PM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
What announcement are you specifically referring to?
Offline Profile Quote Post Goto Top
 
Cameron RedGem
Member Avatar
Member
[ * ]
I did found the thing that I need. Its what the Admin CP announcement and I did find where to edit it at.
More questions in a few seconds ...
Okay phew more pictures to help out on finishing.
Posted Image

Posted Image

Posted Image

Posted Image

On these pictures, you see ... the color white, How can I change it to a different color?

Edited by Cameron RedGem, Jul 15 2014, 05:04 PM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
All controlled by these strips:

Code:
 
td.c_subforum {
background:#f6f6f6;
color:#425384;
font-size:80%;
font-style:italic;
}
Code:
 
td.c_user dl {
background:#f6f6f6;
border:1px solid #e7e7e7;
margin:10px 0;
padding:5px 7px;
width:160px;
}
Code:
 
td.c_username {
background:#f6f6f6;
padding:2px 0;
text-align:center;
}
Code:
 
td.c_postinfo {
background:#f6f6f6;
color:#999;
font-size:80%;
vertical-align:middle;
}
Code:
 
td.c_head,td.c_foot,td.c_sort {
background:url(http://z1.ifrm.com/static/1/sub.png) repeat-x top #f6f6f6;
color:#666;
font-size:80%;
}
Code:
 
.meta_menu {
background:#F6F6F6;
border:1px solid #e7e7e7;
padding:0;
width:49%;
}
Code:
 
#pm_folders {
border-left:1px solid #e7e7e7;
border-right:1px solid #e7e7e7;
padding-top:30px;
vertical-align:top;
width:150px;
}
Offline Profile Quote Post Goto Top
 
Cameron RedGem
Member Avatar
Member
[ * ]
Okay thanks for those.

What about the Member List code(s)?
also more pictures that I need codes for to change with to a different color.
Posted Image
Posted Image
Edited by Cameron RedGem, Jul 15 2014, 10:26 PM.
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
Go to Next Page
« Previous Topic · ZetaBoards - Theme & Code Support · Next Topic »
Add Reply