Top Menu

[Lady Night Owl]

Hi, a friend of mine helped me out with a new theme for an SMF 2 Beta 4...I was wondering why the default menu is displaying instead of what she made.

The themes my friend makes uses most of the default templates except for the index template.

I know there were many changes to the files (I'm used to the 1.1.x versions), so is there something else that needs to be changed or included with the new theme?

My site is here.

[Lo0kBeHiNdU]

Yes.

The menu for the default theme is declared at the CSS file in these lines:

Code Select Expand

/* definitions for the main tab, active means the tab reflects which page is displayed */
.maintab_first, .maintab_back, .maintab_last, .maintab_active_first, .maintab_active_back, .maintab_active_last
{
color: white;
text-transform: uppercase;
vertical-align: top;
}
.maintab_back, .maintab_active_back
{
color: white;
text-decoration: none;
font-size:  9px;
vertical-align: top;
padding: 2px 6px 6px 6px;
font-family: tahoma, sans-serif;
}

.maintab_first
{
background: url(images/maintab_first.gif) left bottom no-repeat;
width: 10px;
}
.maintab_back
{
background: url(images/maintab_back.gif) left bottom repeat-x;
}
.maintab_last
{
background: url(images/maintab_last.gif) left bottom no-repeat;
width: 8px;
}
.maintab_active_first
{
background: url(images/maintab_active_first.gif) left bottom no-repeat;
width: 6px;
}
.maintab_active_back
{
background: url(images/maintab_active_back.gif) left bottom repeat-x;
}
.maintab_active_last
{
background: url(images/maintab_active_last.gif) left bottom no-repeat;
width: 8px;
}

/* how links behave in main tab. */
.maintab_back a:link , .maintab_back a:visited, .maintab_active_back a:link , .maintab_active_back a:visited
{
color: white;
text-decoration: none;
}

.maintab_back a:hover, .maintab_active_back a:hover
{
color: #e0e0ff;
text-decoration: none;
}
/* definitions for the mirror tab */
.mirrortab_first, .mirrortab_back, .mirrortab_last, .mirrortab_active_first, .mirrortab_active_back, .mirrortab_active_last
{
color: white;
text-transform: uppercase;
vertical-align: top;
}
.mirrortab_back, .mirrortab_active_back
{
color: white;
text-decoration: none;
font-size: 9px;
vertical-align: bottom;
padding: 6px 6px 2px 6px;
font-family: tahoma, sans-serif;
}

.mirrortab_first
{
background: url(images/mirrortab_first.gif) no-repeat;
width: 10px;
}
.mirrortab_back
{
background: url(images/mirrortab_back.gif) repeat-x;
}
.mirrortab_last
{
background: url(images/mirrortab_last.gif) no-repeat;
width: 6px;
}
.mirrortab_active_first
{
background: url(images/mirrortab_active_first.gif) no-repeat;
width: 6px;
}
.mirrortab_active_back
{
background: url(images/mirrortab_active_back.gif) repeat-x;
}
.mirrortab_active_last
{
background: url(images/mirrortab_active_last.gif) no-repeat;
width: 8px;
}

And these variables are called in BoardIndex.template.php and Index.template.php files

[matera]

That doesn't come near the question, which is, why are the default theme menu tab images showing instead of the new theme's images. All that was changed was the color scheme, really, and a page background image was added. We haven't altered any of the templates, only colors and a few padding and border details in the CSS, and the images were only re-colored.

I'm the, um, friend

ETA: for the time being we have adopted the silly workaround of copying all maintab_* images from the new theme to default (which nobody uses anyway lol), to stop the headaches

[Gary]

Actually, in 2.0 Beta 4 the CSS for the menu changed from tables to lists much like almost everything did. It can now be altered by making use of the #main_menu classes in the index.css file inside the css directory of the default theme. (Remember to transfer it into your current theme of course)

[matera]

I wish someone would give a coherent answer to the question, which is why are the maintab images coming from the default theme when as far as I can see they should not. I am in no way mystified by the style sheet. 

This * illustration * is from my test server. I started working on another theme so I can bang my head against the wall some more. 

[Bulakbol]

why are the maintab images coming from the default theme when as far as I can see they should not.

What did you do to change the maintab images?

[Lady Night Owl]

Well, we didn't make any changes to the other style sheets. Only the theme one.

So, I went ahead and copied the index.css to a css directory into the theme folder I want to use, changed the paths for the tabs, did some more file maneuvering/uploading and whatnot and behold! The default tabs are back to their drab selves and my board's theme has it's properly colored buttons.

Problem solved. Lesson learned. Next time we put a theme together, we need to create a css directory (which should at least include the index.css file) so that the buttons display properly. Thanks guys!

Is this information any where in the theme manuals? If not, it should be

[matera]

It isn't necessary to change anything in the index.css, just copy it to a css directory in the new theme. That is a very simple thing to do -- why couldn't someone have said that instead of pasting miles of code? *shrug*

[Lady Night Owl]

It is necessary to change the paths to the images (I tested it), because they lead to the default theme images, like so:

Code Select Expand

#main_menu ul
{
list-style: none;
padding: 0;
margin: 0;
background: url(/Themes/default/images/maintab_first.gif) no-repeat bottom left;
padding-left: 10px;
}

If I pasted that as is into the theme you made (and having replaced the default theme's maintab images with the originals) the buttons would have been the default buttons on the Sylphs theme.

And yes, it was very simple once I got around to it after setting up other things