Template Documentation

Is there any documentation on templates that tells you what CSS file each section is in and controlled by or do we have to reverse engineer and hunt and peck at it? If there is documentation that brings light to this so I don't have to dig, hunt, and peck so much to create a theme I'm sure I'm not the only one that would appreciate it.

I don't think there's anything like that.  You should use your browser's built-in developer tools (all major browsers have this feature, including Internet Explorer) to examine elements and see which CSS files they relate to.  You'll need to disable caching and compression first.

Yes, I am using Firebug to find that info, but I can not figure out which one of the hundreds of instances of that name controls it.

I'm trying to change the color of the navigation menu. See attached, the part highlighted in blue. Can someone tell me what line of what file it is? I would be extremely grateful for the time saved hunting it down.

The Firebug panel should show the CSS information in the second box.  For the menu, the style information should be under /templates/base/css/top_menu.css.  Do not edit this file directly.  You should copy this file to your current default template's directory and edit it there.

Firebug will tell you what file the CSS for a given class is in and at what line number if you have dolphins cache turned off. Other wise it just shows you the cache file which is useless.

All of that stuff is in top_menu.css and all of the items for that menu are mostly images.

tm_bg.png
tm_cm_bg.png
tm_cm_item_center_act.png
tm_cm_item_left_act.png
tm_cm_item_right_act.png
tm_item_left.png
tm_item_left_act.png
tm_item_right.png
tm_item_right_act.png
tm_sitem_act.png
tm_sitem_search_bg.png
tm_smenu_bg.png
tm_smenu_bottom.png
tm_smenu_sitem_act.png

Guess not. More hunting and pecking.

I'm running it locally so it doesn't matter if I edit the file directly, so I am. If I make a mess of it there's always the un-do features as well as having a backup of it in the install.zip. Not a problem.

Nobody can help out significantly and save me the hours of time it's already taken trying to find it by telling me which line in which file?

I can't get Firebug to point directly to the topMenu class telling me where it is exactly. It tells me where sys_top_menu is, exactly, but that's not what I'm looking for.

.topMenu .top ul.sub {
    width:190px;
    height:auto;
    right:0px;
    margin:0px;
    padding:2px 0px 0px 0px;
   
    position:absolute;
    z-index:20;
    display:none;
    visibility:hidden;
   
    background:transparent url(../images/tm_smenu_bg.png) repeat-y left top;
   
    list-style:none;   
    white-space:nowrap;   
    text-align:left;
}

.topMenu .top ul.sub li {
    width:100%;
    margin: 0px;
    line-height:33px;
    /*height:33px;*/
    min-height:33px;
}

.main_elements { left:0px; }

#mmm {border-collapse:collapse; top:0px;right:0px; width:0; height:0; position:absolute; }

/*.topMenu td.top a:hover {visibility:visible; position:relative;display:block;} */

.topMenu td.top:hover ul.sub {visibility:visible;display:block;}
/*.topMenu td.top a:hover ul.sub {visibility:visible;display:block;} */

.topMenu td.top a:hover ul.sub, .topMenu td.top:hover ul.sub {
    right:0px; position:absolute;
}

.topMenu ul.more_sub {
    margin-left: 18px;
    padding: 0px;

    list-style: none;
}

.topMenu ul.sub li:hover {
    background:transparent url(../images/tm_sitem_act.png) no-repeat 0px 0px;
    vertical-align:middle;
}

.topMenu ul.sub ul.more_sub li:hover {
    background:transparent url(../images/tm_smenu_sitem_act.png) no-repeat 0px 0px;
}

.topMenu ul.sub .more_sub li {
    background-image: none;
    overflow: hidden;
}

.topMenu .more_down,
.topMenu .more_right {
    width: 9px;
    height: 31px;
    vertical-align: middle;
    margin: 0px;
}

.topMenu .more_down {
    background:url(../images/icons/tm_sitem_down.gif) no-repeat left 0px;
    margin-top:1px;
}

.topMenu .more_right {
    background:url(../images/icons/tm_sitem_right.gif) no-repeat left 0px;
    margin-top:1px;
}

.topMenu { background-image:none; }

.topMenu td {
    height:31px;
    background-color:transparent;
    margin-right:0px;
    vertical-align: middle;
}

.topMenu a,
.topMenu b {
    height:31px;
    line-height:31px;
}

hunt peck hunt peck

Thanks anyway....

As i said. Most of them are images. And to change the color you replace the images.

If i must do the work for you.

templates\base\css\top_menu.css

Line 1

div.sys_top_menu {
    min-height: 31px;

    position: relative;
    z-index: 100;
   
    background: transparent url(../images/tm_bg.png) repeat-x scroll center top;
}



Line 143

.topMenu a,
.topMenu a:link,
.topMenu a:visited,
.topMenu b {
    margin: 0px;
    padding: 0px 0px 0px 5px;
   
    display: block;
   
    background: transparent url(../images/tm_item_left.png) no-repeat scroll 0%;
    border-width: 0px;

    text-transform: capitalize;
    text-decoration: none;
    color:#666666;   
    font-weight: normal;
}
.topMenu a:focus {
    outline: 0;
}


Line 165 Much of this area.

.topMenu a:hover,
.topMenu a:active {
    color:#333;
}

.topMenu td#tm_active a.top_link,
.topMenu td#tm_active a.top_link:link,
.topMenu td#tm_active a.top_link:visited,
.topMenu td#tm_active a.top_link:active {
    background:transparent url(../images/tm_item_left_act.png) no-repeat scroll 0%;
    color:#333;
}

.topMenu td.top:hover a.top_link,
.topMenu td.top:hover a.top_link:link,
.topMenu td.top:hover a.top_link:visited,
.topMenu td.top:hover a.top_link:active {
    background:transparent url(../images/tm_item_left_act.png) no-repeat scroll 0%;
}

.topMenu b {
    color:#000;
}

.topMenu a span.down,
.topMenu b span.down {
    padding: 0px 5px 0px 0px;

    display: block;
    background: transparent url(../images/tm_item_right.png) no-repeat scroll right top;           

    text-align: center;
    cursor: pointer;
}
.topMenu a span.down img,
.topMenu b span.down img {
    width: 16px;
    height: 16px;
    margin: 8px auto 7px auto;

    vertical-align:middle;
}
.topMenu td.top:hover a span.down,
.topMenu td.top:hover b span.down {
    background-image:url(../images/tm_item_right_act.png);
}
.topMenu td.top a:hover a span.down,
.topMenu td.top a:hover b span.down {
    background-image:url(../images/tm_item_right_act.png);
}

.topMenu td#tm_active a span.down {
    background-image:url(../images/tm_item_right_act.png);
}

There are a number of different areas involved in the menu and at the moment i do not have the time to locate them all for you.

Line numbers is what I needed.Thank you! I didn't need anything more then that.

Probably easier to just make my own flash menu and let it be controlled by an XML file to get the result I want. Or use a css menu from dynamic drive.