My First Theme

[Mc Cabe]

So, I thought I might make my first theme after the trouble I had before, and I came up with this concept:



And here is what it looks like:

http://www.psparody.com/forum/index.php

(Its not my default theme because its not finished, so just change the theme to NITEO)

So my main problems are getting the nav bar to look correctly. I am unsure why there are gaps. I also want the image to change to a blue glow when the mouse is hovered over it.

I also would like to have the welcome panel like it is on your site, in the top right.

Any help is most appreciated.

Mc Cabe

[ivgeo]

1. toplinks problem
In Additional css add/change this if you don't have already

Code:

.menu li {
    display: inline;
    padding-left: 5px; /*CHANGE TO 0px*/
}

.menu img {
    padding-right: 5px; /*CHANGE TO 0px*/
    vertical-align: top;
}

2. For that you need "hover" pseudo-class
You could rewrite your toplinks to something like this Simple Navigation with CSS Image Replacement

3. from what I can see you have done it, welcome block is in the top right of your header.
You can edit, so that current time goes above hello there

Code:

<!-- start: header_welcomeblock_guest -->
    <span style="float:right;"><strong>Current time:</strong> 03-02-2008, 06:22 PM</span>
        Hello There, Guest! (<a href="http://www.psparody.com/forum/member.php?action=login">Login</a> &mdash; <a href="http://www.psparody.com/forum/member.php?action=register">Register</a>)
<!-- end: header_welcomeblock_guest -->

to this

Code:

<!-- start: header_welcomeblock_guest -->
    <strong>Current time:</strong> 03-02-2008, 06:22 PM<br />
        Hello There, Guest! (<a href="http://www.psparody.com/forum/member.php?action=login">Login</a> &mdash; <a href="http://www.psparody.com/forum/member.php?action=register">Register</a>)
<!-- end: header_welcomeblock_guest -->

[Mc Cabe]

Sweet! thanks for all that IV Geo

I will try some of that stuff now

thanks

[kerrang!]

Very nice.

I like the layout of the preview, sadly I couldn't see your live board because it has a MySQL error: 1040. (too many connections)

Although keep it up!
~Joey

[Mc Cabe]

Ahhh!! I need help IV Geo. I managed to put all the text in the top right but the CSS menu is too tricky . I tried the first tut you posted and it didnt work . Could you give me any more clues as to what i put in the CSS box at the bottom. I have made the one big image.

Any help is much appreciated!

Mc Cabe

p.s Im going mental over the menu arrghh!!

[ivgeo]

Can you post your code for the navigation menu. And images you want to use...

[Mc Cabe]

the nav bar im using is attached:

as for the code I will show you later the two attempts that I tried, but for now I have to go to school . However, if you could show me the CSS I would put for just one item in a list that would be great.

thanks

Mc Cabe

[ivgeo]

something like this could work
HTML

Code:

<div id="main-nav">
    <ul>
        <li><a href="#" class="home"><span>Home</span></a></li>
        <li><a href="#" class="forum"><span>Forum</span></a></li>
        <li><a href="#" class="search"><span>Search</span></a></li>
        <li><a href="#" class="memberlist"><span>Memberlist</span></a></li>
        <li><a href="#" class="calendar"><span>Calendar</span></a></li>
        <li><a href="#" class="help"><span>Help</span></a></li>
        <li><a href="#" class="myplaza"><span>Myplaza</span></a></li>
        <li><a href="#" class="downloads"><span>Downloads</span></a></li>
    </ul>
</div>

CSS

Code:

#main-nav {
    height: 31px;
    margin: 0 auto;
    background: #ffffff url(navbar.png) no-repeat;                 
}


#main-nav ul {
    border: 0;
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
    clear: left;
}

#main-nav ul li {
    display: block;
    float: left;
    text-align: center;
    padding: 0;
    margin: 0;
}

#main-nav ul li a span {
    display: none;
}


#main-nav ul li a {
    height: 31px;
    margin: 0;
    padding: 0;
    display: block;
        
}

/* -- Links -- */

#main-nav ul li a.home {
    width: 54px;
}
#main-nav ul li a.forum {
    width: 69px;
}
#main-nav ul li a.search {
    width: 74px;
}
#main-nav ul li a.memberlist {
    width: 96px;
}
#main-nav ul li a.calendar {
    width: 86px;
}
#main-nav ul li a.help {
    width: 57px;
}
#main-nav ul li a.myplaza {
    width: 82px;
}
#main-nav ul li a.downloads {
    width: 146px;
}

/* -- Hovers -- */

#main-nav ul li a:hover {
    background-image: url(navbar.png);
}

#main-nav ul li a.home:hover {
    background-position: 0px -31px;
}
#main-nav ul li a.forum:hover {
    background-position: -54px -31px;
}
#main-nav ul li a.search:hover {
    background-position: -123px -31px;
}
#main-nav ul li a.memberlist:hover {
    background-position: -197px -31px;
}
#main-nav ul li a.calendar:hover {
    background-position: -293px -31px;
}
#main-nav ul li a.help:hover {
    background-position: -379px -31px;
}
#main-nav ul li a.myplaza:hover {
    background-position: -437px -31px;
}
#main-nav ul li a.downloads:hover {
    background-position: -518px -31px;
}

[Mc Cabe]

woah WOW! you did it for me THANKS!

seems to have a few bugs though. The hover links work though. I will try to fix myself....

http://www.psparody.com/forum/index.php

[ivgeo]

What bugs?
I tested it and it worked fine.

working example attached at the bottom of this post
put those 3 files in the same folder, and run menu.html