Drake CMS Official Forums - read-only archive

You are reading the Drake CMS Official Forums archive, available for historical purposes only.

Drake CMS has been rebranded into Lanius CMS, visit the new Lanius CMS Official Forums if you need support about Lanius CMS or Drake CMS -> Lanius CMS migration.
Home page Templates > Discussion about the new CSS model Permanent link to this page
 
 
Author Message:
legolas558
Discussion about the new CSS model
25 June 2007 15:13
Anonymous As told in the v0.4.4 release news, the CSS model has changed and now your custom templates need to be adapted to it.

This new CSS model is definitive, there will be additions to it but if you adapt the templates to it now there will not be any other major breaks in future.

Looking at the CSS files into the css folder of the standard released templates, you can easily update your custom template as needed.

Please discuss further here if you have any doubt.
 
therenderman
Re : Discussion about the new CSS model
27 June 2007 00:02
Anonymous I am having some major difficulties customising the new CCS model for a new template I'm working on. Specifically the top menu. I'm certainly no CSS guru so please correct me if I'm wrong here, but it seems that it is impossible to fully independently style the top menu from the main menu because of the cascading style implementation.

For instance, if you have a custom graphic in the background of the main menu and don't want it to appear in the top menu, setting the .topmenu CSS to background-image: none; should remove it but the image still appears even after changing all 5 .topmenu styles.

Below is a copy of my cascading style set for the top menu - menu_arrow.gif is the offending graphic which is remove for the hover state but nor for the link state:

Code:
a:link, a:visited (line 62)
{
font-size: 11px;
color: #ae2a26;
text-decoration: none;
font-weight: bold;
}
a:hover (line 68)
{
font-size: 11px;
color: #0570b8;
text-decoration: none;
font-weight: bold;
}
.dkmod_menu a.menu_mainlevel (line 436)
{
font-family: Arial,Verdana,Geneva,Helvetica,sans-serif;
text-align: left;
text-indent: 24px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
display: block;
line-height: 22px;
height: 20px;
font-size: 12px;
text-decoration: none;
width: 166px;
background-color: transparent;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-x-position: 0%;
background-y-position: 0%;
}
.dkmod_menu a.menu_mainlevel, .dkmod_menu a.menu_mainlevel:visited (line 463)
{
text-align: left;
display: block;
font-size: 12px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #ffffff;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #47abd5;
font-weight: bold;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
color: #5759a0;
width: 166px;
text-indent: 24px;
background-color: transparent;
background-image: url(../images/menu_arrows.gif);
background-repeat: repeat;
background-attachment: scroll;
background-x-position: 0%;
background-y-position: 0%;
}
.topmenu a.menu_mainlevel (line 495)
{
list-style-type: none;
list-style-image: none;
list-style-position: outside;
padding-top: 18px;
margin-top: 0pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 0pt;
font-size: 0.8em;
background-color: transparent;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-x-position: 0%;
background-y-position: 0%;
text-indent: 0pt;
border-top-style: none;
border-bottom-style: none;
}
.topmenu li a.menu_mainlevel (line 527)
{
display: block;
background-image: none;
padding-left: 1px;
padding-right: 1px;
float: left;
margin-top: 0pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 0pt;
width: auto;
font-size: 11px;
line-height: 22px;
white-space: nowrap;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #ffffff;
text-indent: 0pt;
border-top-style: none;
border-bottom-style: none;
}
.dkmod_menu a.menu_mainlevel:link (line 452)
{
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
text-align: left;
text-indent: 24px;
display: block;
font-size: 12px;
text-decoration: none;
width: 166px;
background-color: transparent;
background-image: url(../images/menu_arrows.gif);
background-repeat: repeat;
background-attachment: scroll;
background-x-position: 0%;
background-y-position: 0%;
}
.dkmod_menu a.menu_mainlevel:hover (line 476)
{
text-align: left;
display: block;
background-color: transparent;
background-image: url(../images/menu_arrows.gif);
background-repeat: repeat;
background-attachment: scroll;
background-x-position: 0px;
background-y-position: -20px;
font-size: 12px;
font-weight: bold;
text-decoration: none;
text-indent: 24px;
color: #ffffff;
}
.topmenu li a.menu_mainlevel:hover (line 551)
{
color: #49aad5;
font-weight: bold;
background-color: transparent;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-x-position: 0%;
background-y-position: 0%;
text-indent: 0pt;
border-bottom-style: none;
border-top-style: none;
}


Is some part of the .topmenu CSS is not being implemented properly to fully allow customisation the menu?

...or have I missed something really obvious and someone can put me right!

Any thoughts....
 
legolas558
Re: Re : Discussion about the new CSS model
27 June 2007 12:20
Anonymous Did you try to remove the background-image from .dkmod_menu a.menu_mainlevel:link ?
 
therenderman
Re: Re : Discussion about the new CSS model
28 June 2007 00:29
Anonymous Yes I see what you're about. Deleting it from .dkmod_menu a.menu_mainlevel:link and .dkmod_menu a.menu_mainlevel, .dkmod_menu a.menu_mainlevel:visited, but making sure it was present in .dkmod_menu a.menu_mainlevel did the trick - had the background image in too many places.

Thanks for you help - It's working fine now.
 
Top
 
  Copyright © 2008 Drake CMS official website - Terms of use, Privacy and Copyright statements Powered by Lanius CMS