Modifying {MAIN_MENU} looks

[MikaK]

Hello,

I would like to change the {MAIN_MENU} layout from vertical to horizontal:

My gallery currently looks like this (based on the Fruity theme):
http://www.soundchilds.net/gallery/

I´ve tried to find a way in theme.php around row 25

Code Select Expand


// HTML template for main menu
$template_main_menu = <<<EOT
                <a name="top"> <span class="topmenu">
<!-- BEGIN album_list -->
                        <a href="{ALB_LIST_TGT}" title="{ALB_LIST_TITLE}">{ALB_LIST_LNK}</a>
<!-- END album_list -->

<!-- BEGIN my_gallery -->
                        <a href="{MY_GAL_TGT}" title="{MY_GAL_TITLE}">{MY_GAL_LNK}</a>
<!-- END my_gallery -->
<!-- BEGIN allow_memberlist -->


etc...

but without any results

I would only like to arrange the links like:
.:Album List:. .:My Gallery:. ... ...
instead of

.:Album List:.
.:My Gallery:.


My other problem here are the links. Instead of showing black after visiting they remain red, hovering turns the
text into red instead of white...
Regarding the table where my {MAIN_MENU} is is laid out the code is:

Code Select Expand


<td height="20" valign="top" bgcolor="#FF0000" class="basictext_robg"><div align="center">{MAIN_MENU}</div></td>

where the class="basictext_robg" should create links like in the navigation bar at the top of the gallery site.

I have additionally set the class="topmenu" in the style.css as following:

Code Select Expand


.topmenu {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10px;
        color: #000000;
        margin-top: 0px;
        margin-bottom: 0px;
        width:123px;
}

.topmenu a {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
width:123px;
}

.topmenu a:active {
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: underline;
}

.topmenu a: visited {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}

.topmenu a: link {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}

.topmenu a: hover {
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: underline;
font-weight: bold;
}


Despite the above the links seem to display according to

Code Select Expand


a {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
a:active {
color: #FF0000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: underline;
}
a:visited {
color: #FF0000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
a:link {
color: #FF0000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
a:hover {
color: #FF0000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: underline;
font-weight: bold;
}


Does anyone have ideas about what I should change to get the problems sorted?

Thanks for any thoughts!
-Mika

[donnoman]

In regards to your '{MAIN_MENU}' not going horizontal you should look at how you have those cells constrained in the template.html.

It looks like you have the main table split into three sections and you aren't using the first or last.

copy your template.html to the same directory your 'THEMES' directory is, and open it with a standard HTML WYSIWYG Editor.

Fix your template, copy it back. (Keep Backups)

You also have some issues with your style sheets, the main page has four, one that doesn't exist and a duplicate.

Code Select Expand


<link href="style.css" rel="stylesheet" type="text/css"> = http://www.soundchilds.net/gallery/style.css [doesn't exist]
http://soundchilds.net/global_assets/global%20stylesheets/global_texts_and_spacers.css
http://www.soundchilds.net/gallery/themes/soundchilds_orange/style.css
http://www.soundchilds.net/gallery/../../../global_assets/global%20stylesheets/global_texts_and_spacers.css [duplicate]



You also have some issues with the content of your CSS. specifically there shouldn't be a space between "a:" and it's state: "visited". ie: "a: visited" = bad, "a:visited" = good.

From style.css

Code Select Expand


.topmenu a {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
width:123px;
}
/*BASIC ACTIVE LINK FOR WHITE BACKGROUNDS */
.topmenu a:active {
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: underline;
}
/*BASIC VISITED LINK FOR WHITE BACKGROUNDS */
.topmenu a: visited {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
/*BASIC LINK FOR WHITE BACKGROUNDS */
.topmenu a: link {  
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
/*BASIC HOVERED LINK FOR WHITE BACKGROUNDS */
.topmenu a: hover {
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: underline;
font-weight: bold;
}


I saw some other errors, but perhaps its best if I just point you to a validator that can help you sort it out:

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.soundchilds.net%2Fgallery%2Fthemes%2Fsoundchilds_orange%2Fstyle.css&usermedium=all


Good Luck Mate.

[MikaK]

Good Luck Mate.

Thanks a lot for the tips, donnoman! All css issues

Regarding the link appearance your assumption:

You also have some issues with the content of your CSS. specifically there shouldn't be a space between "a:" and it's state: "visited". ie: "a: visited" = bad, "a:visited" = good.

was dead on spot

Further, After changing

Code Select Expand


.topmenu {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10px;
        color: #000000;
        margin-top: 0px;
        margin-bottom: 0px;
        width:123px;
}

.topmenu a {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
width:123px;
}


to

Code Select Expand


.topmenu {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10px;
        color: #000000;
        margin-top: 0px;
        margin-bottom: 0px;
}

.topmenu a {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}


the vertical appearence becomes horisontal.

-Mika

[Casper]

I'm glad you've got it sorted to what you want, but I have to say you would probably have achieved this mush more easily by basing your theme on the classic theme, which already had horizontal menus etc, than using a special theme designed for a left positioned vertical set-up.