[Tip] Drop Down Menu Tutorial (..for all themes)

[ascaland]

Look's a little different from what the thread creator put..
But has'nt someone have that problem earlier?

[[unplugged]]

Like I said, the look is different because I don't have the CSS stuff for it added to my style.css.

I have now added this so you can see what I mean. DEMO I noticed that the drop-downs themselves don't have links, but that is simple to adjust.....but more importantly, I have no errors.

EDIT: The links are there, they are just the same color as the background. I'll fix this too right now.

[Sabre™]

Hey sabre! I wouldn't mind at all. I may not have it done in 10 minutes due to being a little busy, but I could get it to you eventually.....lol

PM me details such as site URL and detailed description of what you want. 

Awesome mate!
Thank You very much!
Pm sent

[Neons]

How do I make this work with DzinerStudio's Outline?

Thanks

[Jakki]

Here's a good question for you....
How would one add an image to the main parent button...
Let's use the forum button? Say one would like to have a pic of a notebook beside the word forum, how would you code that?

[Asshandler]

I'd like to install this, but my problem lies in the fact that my style.css looks nothing like the one shown in the OP here.

Code Select Expand

/* Normal, standard links. */
a:link
{
color: #476C8E;
text-decoration: none;
}
a:visited
{
color: #476C8E;
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}

/* Navigation links - for the link tree. */
.nav, .nav:link, .nav:visited
{
color: #000000;
text-decoration: none;
}
a.nav:hover
{
color: #cc3333;
text-decoration: underline;
}

/* Tables should show empty cells. */
table
{
empty-cells: show;
}

/* By default (td, body..) use verdana in black. */
body, td, th , tr
{
color: #000000;
font-size: small;
font-family: verdana, sans-serif;
}

/* The main body of the entire forum. */
body
{
background: url("images/background2.jpg") #CFD4DA;
background-repeat: repeat-x;
margin: 0px;
padding: 12px 30px 4px 30px;
}

/* Input boxes - just a bit smaller than normal so they align well. */
input, textarea, button
{
color: #000000;
font-family: verdana, sans-serif;
}
input, button
{
font-size: 90%;
}

textarea
{
font-size: 100%;
color: #000000;
font-family: verdana, sans-serif;
}

/* All input elements that are checkboxes or radio buttons. */
input.check
{
}

/* Selects are a bit smaller, because it makes them look even better 8). */
select
{
font-size: 90%;
font-weight: normal;
color: #000000;
font-family: verdana, sans-serif;
}

/* Standard horizontal rule.. ([hr], etc.) */
hr, .hrcolor
{
height: 1px;
border: 0;
color: #666666;
background-color: #666666;
}

/* No image should have a border when linked */
a img
{
border: 0;
}
/* A quote, perhaps from another post. */
.quote
{
background: url(images/quote_bg.png) 5px 5px no-repeat #F0F3FC; border: 1px solid #AAA; margin: 1px; padding: 5px 5px 5px 28px; font-size: x-small; line-height: 1.4em;
}

/* A code block - maybe even PHP ;). */
.code
{
color: #000000;
background-color: #dddddd;
font-family: "courier new", "times new roman", monospace;
font-size: x-small;
line-height: 1.3em;
/* Put a nice border around it. */
border: 1px solid #000000;
margin: 1px auto 1px auto;
padding: 1px;
width: 99%;
/* Don't wrap its contents, and show scrollbars. */
white-space: nowrap;
overflow: auto;
/* Stop after about 24 lines, and just show a scrollbar. */
max-height: 24em;
}

/* The "Quote:" and "Code:" header parts... */
.quoteheader, .codeheader
{
color: #000000;
text-decoration: none;
font-style: normal;
font-weight: bold;
font-size: x-small;
line-height: 1.2em;
}

/* Generally, those [?] icons.  This makes your cursor a help icon. */
.help
{
cursor: help;
}

/* /me uses this a lot. (emote, try typing /me in a post.) */
.meaction
{
color: red;
}

/* The main post box - this makes it as wide as possible. */
.editor
{
width: 96%;
}

/* Highlighted text - such as search results. */
.highlight
{
background-color: yellow;
font-weight: bold;
color: black;
}

/* Alternating backgrounds for posts, and several other sections of the forum. */
.windowbg, #preview_body
{
color: #000000;
background-color: #ECEDF3;
}

.windowbg_hover:hover,.windowbg_hoverHover
{
background: #A5B2BC;
}
.windowbg2
{
color: #000000;
background-color: #F6F6F6;
}

.windowbg2_hover:hover,.windowbg2_hoverHover
{
background: #E0E6E6;
}
.windowbg3
{
color: #000000;
background-color: #E0E1E8;
}
.windowbg_hover3:hover,.windowbg_hover3Hover
{
background: #829AA6;
}
.mail_hover:hover,.mail_hoverHover
{
background: #A5B2BC;
}

/* the today container in calendar */
.calendar_today
{
background-color: #FFFFFF;
}

/* These are used primarily for titles, but also for headers (the row that says what everything in the table is.) */
.titlebg, tr.titlebg th, tr.titlebg td, .titlebg2, tr.titlebg2 th, tr.titlebg2 td
{
color: black;
font-style: normal;
background: url(images/titlebg.jpg) #E9F0F6 repeat-x;
border-bottom: solid 1px #9BAEBF;
border-top: solid 1px #FFFFFF;
padding-left: 10px;
padding-right: 10px;
}
.titlebg, .titlebg a:link, .titlebg a:visited
{
font-weight: bold;
color: black;
font-style: normal;
}

.titlebg a:hover
{
color: #404040;
}
/* same as titlebg, but used where bold text is not needed */
.titlebg2 a:link, .titlebg2 a:visited
{
color: black;
font-style: normal;
text-decoration: underline;
}

.titlebg2 a:hover
{
text-decoration: underline;
}

/* This is used for categories, page indexes, and several other areas in the forum.
.catbg and .catbg2 is for boardindex, while .catbg3 is for messageindex and display headers*/

.catbglogo
{
background: #000000;
color: #000000;
padding-left: 10px;
padding-right: 10px;
}


.catbg , tr.catbg td , .catbg3 , tr.catbg3 td
{
background: url(images/catbg.jpg) #88A6C0 repeat-x;
color: #ffffff;
padding-left: 10px;
padding-right: 10px;
}
.catbg2 , tr.catbg2 td
{
background: url(images/catbg2.jpg) #A1BFD9 repeat-x;
color: #ffffff;
padding-left: 10px;
padding-right: 10px;
}
.catbg, .catbg2, .catbg3
{
border-bottom: solid 1px #375576;
}
.catbg, .catbg2
{
font-weight: bold;
}
.catbg3, tr.catbg3 td, .catbg3 a:link, .catbg3 a:visited
{
font-size: 95%;
color: white;
text-decoration: none;
}
.catbg a:link, .catbg a:visited , .catbg2 a:link, .catbg2 a:visited
{
color: white;
text-decoration: none;
}
.catbg a:hover, .catbg2 a:hover, .catbg3 a:hover
{
color: #e0e0ff;
}
/* This is used for tables that have a grid/border background color (such as the topic listing.) */
.bordercolor
{
background-color: #ADADAD;
padding: 0px;
}

/* This is used on tables that should just have a border around them. */
.tborder
{
padding: 1px;
border: 1px solid #696969;
background-color: #FFFFFF;
}

/* Default font sizes: small (8pt), normal (10pt), and large (14pt). */
.smalltext
{
font-size: x-small;
font-family: verdana, sans-serif;
}
.middletext
{
font-size: 90%;
}
.normaltext
{
font-size: small;
}
.largetext
{
font-size: large;
}


/* Posts and personal messages displayed throughout the forum. */
.post, .personalmessage
{
width: 100%;
overflow: auto;
line-height: 1.3em;
}

/* All the signatures used in the forum.  If your forum users use Mozilla, Opera, or Safari, you might add max-height here ;). */
.signature
{
width: 100%;
overflow: auto;
padding-bottom: 3px;
line-height: 1.3em;
}

/* Sometimes there will be an error when you post */
.error
{
color: red;
}


/* 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;
}

/* how links behave in mirror tab. */
.mirrortab_back a:link , .mirrortab_back a:visited, .mirrortab_active_back a:link , .mirrortab_active_back a:visited
{
color: white;
text-decoration: none;
}

.mirrortab_back a:hover, .mirrortab_active_back a:hover
{
color: #e0e0ff;
text-decoration: none;
}

/* The AJAX notifier */
#ajax_in_progress
{
background: #32CD32;
color: white;
text-align: center;
font-weight: bold;
font-size: 18pt;
padding: 3px;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
fieldset.spoiler
{
border: 1px dashed gray;
}

fieldset.spoiler > legend
{
font-size: 1.2em;
}

div.spoilerheader a
{
font-family: sans-serif;
font-size: 1.1em;
font-weight: bold;
}

div.spoilerheader input
{
background-color: #cececc;
color: #3e3e33;
font: 0.9em sans-serif;
}

div.spoilerbody
{
color: #0f0f0f;
border: 1px dotted gray;
padding: 1em;
margin: 1em;
}

fieldset.spoiler div.spoilerbody
{
border: 0px;
padding: 0em;
}


As you can see, it features noone of the lines of code the OP instructs me to replace, so I don't know what to do.

Any tips are appreciated. 

[[unplugged]]

@ Jakki
in between the <a> and </a> of the button, just before the actual button name, you could add something like  <img src="URL_TO_YOUR_IMAGE" />&nbsp;&nbsp;.

@ Asshandler
The code listed in the OP needs to be added to the end of your style.css. Basically, it should have both blocks of code in it.

[Antechinus]

How do I make this work with DzinerStudio's Outline?

Thanks

I've already done it with another drop menu code: http://custom.simplemachines.org/themes/index.php?lemma=991

[Asshandler]

@ Asshandler
The code listed in the OP needs to be added to the end of your style.css. Basically, it should have both blocks of code in it.

I was referring to the section of code pertaining to the removal of old menu tabs.

// Show the start of the tab section.
// Generate a strip of buttons.

I don't have those markers, nor any of the code between them, at least not how it is shown in the OP.

So where it says "Now, we must add aour new dropdown menu in here..
Here it is..."

I don't have a clue where to place that segment of code to replace the existing stuff.

[Antechinus]

As pointed out by SpectroPro my SMF 2 Beta fix doesn't work for SMF 2 Beta 4, so here is the solution for that version.

You will need to add the css style code to the 'style.css' file as described above by HCM in the first post. But the other edits are unecessary, as this shows you how to do the second edit and the language strings are included for the drop down bits in SMF 2 Beta 4. You will have to copy the images that are attached to that post as well.

For SMF 2 Beta 4 ONLY.

Find the 'template_menu()' function from your index.template.php. The code in the function has the html that shows your menu.

<snip>

You will have to change the css code for custom themes, but you get the idea.

Ok, that's just dandy. Now how do I sort it for multicolour themes?

[Jakki]

@ Jakki
in between the <a> and </a> of the button, just before the actual button name, you could add something like  <img src="URL_TO_YOUR_IMAGE" />&nbsp;&nbsp;.

Okay thanks I'm having trouble getting this code to work in classic. I'll keep trying

[ascaland]

^ Make sure you add the image file into your webserver directory. In the images folder. If you didn't know. 

[Jakki]

^ Make sure you add the image file into your webserver directory. In the images folder. If you didn't know. 

No clue as to what I'm doing, this is the first theme, I've actually wanted to finish. I've attempted others but quickly became discouraged, so I really want to do this one.

Having trouble getting code in the index and css plus the english.modification.php is not in the classic file.

[[unplugged]]

i do not see the <img ... /> stuff in the source code for your site. That will need to be added to the index.template.php for the theme you are using, not the default index.template.php. Also, as Project Evolution mentioned, you need to be sure to have the image uploaded to the location you pointed to in the image tag. There are a few other things that would make the images not show up as well, unfortunately. If you could post your index.template.php here (inside [ code ][ /code ] tags) and we can work through it. 

[ascaland]

i do not see the <img ... /> stuff in the source code for your site. That will need to be added to the index.template.php for the theme you are using, not the default index.template.php. Also, as Project Evolution mentioned, you need to be sure to have the image uploaded to the location you pointed to in the image tag. There are a few other things that would make the images not show up as well, unfortunately. If you could post your index.template.php here (inside [ code ][ /code ] tags) and we can work through it. 

Even though I epically fail PHP, I can still try? 

[[unplugged]]

I always overlook the little details like that. 

[Antechinus]

Why read the instructions when you can have so much more fun learning by parse error?
It works for me.

[Antechinus]

As pointed out by SpectroPro my SMF 2 Beta fix doesn't work for SMF 2 Beta 4, so here is the solution for that version.

<snip>

You will have to change the css code for custom themes, but you get the idea.

No, I don't get the idea. Where are the menu's buttons and sub-buttons actually set in Beta 4? I obviously have to construct a custom menu somewhere and it obviously isn't in index.template.php
Which file is the actual arrangement contained in?

[Nathaniel]

@antechinus,
Have a look at the '$buttons' array in the 'setupMenuContext()' function at the bottom of your '/Sources/Subs.php' file. For SMF 2 Beta, that is where buttons/subbuttons are setup.

[Antechinus]

Ok, found that but so much has changed from 1.1.x that it's like starting from scratch.

For instance I see 'sub_buttons' => array but none of the standard SMF 2 themes include sub-buttons so this code is obviously looking rather odd if you know what I mean. Having redundant code in new software is a surefire way to confuse people.

I'm going to need a good online manual to get my head around this lot.