|
Newbie Girl
|
Wednesday 28 June 2006 4:59:24 am
I have big troubles finding the relevant CSS-attributes to change for my TopMenu. The menu becomes blue all the time, and I want to have it transparent with a picture as background. I also want the correct size.
See:
http://unifiedconsulting.ezpublish.webdeal-testspace.com/index.php/ Basically I have copied the flat_top.tpl into [my_design]\menu\ -folder. I have also copied the core.css, site.css, site-colors.css and my_stylesheet.css into my [my_design]\stylesheets - catalogue. But I can't find out to where to change the css-elements for my TopMenu. Feels like I have tried every element there is, but I hav probaly not ;) My pagelayout.tpl at the relevant place looks like this: <div id="topmenu">
{default current_user=fetch('user','current_user')}
{cache-block keys=array($uri_string, $current_user.role_id_list|implode( ',' ), $current_user.limited_assignment_value_list|implode( ',' ))}
<div class="break"></div> <hr class="hide" />
{menu name=TopMenu}
<hr class="hide" />
{/cache-block}
</div>
</div>
and my flat_top.tpl file looks like this: ยจ
<div id="topmenu">
<div id="topmenu-design"> <h3 class="hide">{"Top menu"|i18n("design/base")}</h3>
{let root_node=fetch( content, node, hash( node_id, 2 ) )
menuitems=fetch( content, list, hash( parent_node_id, 2,
class_filter_type, include,
class_filter_array, ezini( 'MenuContentSettings', 'TopIdentifierList', 'menu.ini' ),
sort_by, $root_node.sort_array ) )}
<ul>
{section var=menu loop=$menuitems}
{let selected=and( count( $module_result.path )|gt(1), eq( $module_result.path[1].node_id, $menu.node_id ) )}
{section show=eq( $menu.object.content_class.identifier, "link" )}
<li {$selected|choose( '', 'class="selected"' )}><div class="spacing"><a href={$menu.data_map.location.content|ezurl}>{$menu.object.name|wash}</a></div></li>
{section-else}
{section show=eq( sum( $menu.index, 1 ), $menuitems|count )}
<li class="last {$selected|choose( '', 'selected' )}"><div class="spacing"><a href={$menu.url_alias|ezurl}>{$menu.name|wash}</a></div></li>
{section-else}
<li {$selected|choose( '', 'class="selected"' )}><div class="spacing"><a href={$menu.url_alias|ezurl}>{$menu.name|wash}</a></div></li>
{/section}
{/section}
{/let}
{/section}
</ul>
{/let}
<div class="break"></div>
</div>
</div> <hr class="hide" />
|
|
Tim Dickinson
|
Wednesday 28 June 2006 5:20:48 am
The CSS file you need to look at is located here:
http://unifiedconsulting.ezpublish.webdeal-testspace.com/design/uc/stylesheets/site.css and the relevant part to change is: /* TOP MENU */
div#topmenu
{
/* position: absolute; */
width: 750px;
height: 17px;
text-align: left;
vertical-align: middle;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
text-transform: uppercase;
font-weight: bold;
background-image: url('../images/menu_bg.gif');
padding-left: 12px;
padding-right: 12px;
text-decoration: none;
}
div.topmenu-line
{
border-bottom: 1px solid; /* This line needs to be set to avoid bug in IE */
}
div#topmenu-design
{
/*position: absolute;*/
width: 750px;
height: 17px;
margin: 0;
padding: 0;
text-align: left;
vertical-align: middle;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
text-transform: uppercase;
font-weight: bold;
padding-left: 12px;
padding-right: 12px;
text-decoration: none;
}
div #topmenu a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
text-transform: uppercase;
font-weight: bold;
padding-left: 12px;
padding-right: 12px;
text-decoration: none;
}
div #topmenu a:hover {
color: #1c72a5;
text-decoration: none;
}
div#topmenu ul
{
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
text-transform: uppercase;
font-weight: bold;
color: #545454;
padding-left: 12px;
padding-right: 12px;
text-decoration: none;
}
div#topmenu li
{
margin: 0;
padding: 0;
float: left;
display: block;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
text-transform: uppercase;
font-weight: bold;
color: #545454;
padding-left: 12px;
padding-right: 12px;
text-decoration: none;
}
div#topmenu li div.spacing
{
padding: 0.2em 12px 0.3em 12px;
}
div#topmenu li a
{
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
text-transform: uppercase;
font-weight: bold;
color: #545454;
padding-left: 12px;
padding-right: 12px;
text-decoration: none;
}
div#topmenu li a:hover
{
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
text-transform: uppercase;
font-weight: bold;
color: #545454;
padding-left: 12px;
padding-right: 12px;
text-decoration: none;
}
(It's pretty easy to find if you're using Mozilla Firefox with the Web Developer Extension). Regards Tim
http://www.AdBalance.com - Ad network news and reviews
http://www.DevPublisher.com - Website publisher guides, tools and news
http://www.AudioMelody.com - Make better music
|