CMS Made Simple Forums

Posted: **Sun Jun 28, 2009 3:20 pm**

hi!
i've been trying to solve this problem for hours now, but i won't find the mistake - and i'm sure i made one. i have specified the currentpage-class but the browsers won't do as i wish. here http://www.archfem.at/cmsmadesimple is the link to the actual site.

SOLUTION (thanks to Forum Member "nockenfell"): adressing the actual currentpage directly:

Code: Select all

ul#menu li a.currentpage {

here ist the affected part of the css:

Code: Select all

a (line 434) {
color: #000000;
text-decoration: underline;
}

.currentpage (line 349) {
background-color: #665152;
border-top-color: #665152;
border-top-width: 10px;
border-top-style: solid;
border-bottom-color: #665152;
border-bottom-width: 10px;
border-bottom-style: solid;
}

a:hover (line 439) {
color: #b30063;
text-decoration: none;
}

#menu li a (line 64) {
color: #ffffff;
background-color: #b30063;
font-size: 110%;
font-family: Impact,arial,Helvetica,sans-serif;
text-decoration: none;
display: block;
vertical-align: bottom;
border-top-color: #b30063;
border-top-width: 10px;
border-top-style: solid;
border-bottom-color: #b30063;
border-bottom-width: 10px;
border-bottom-style: solid;
}

#menu li a:hover (line 80) {
background-color: #665152;
border-top-color: #665152;
border-bottom-color: #665152;
}

... and here the complete stylesheet:

Code: Select all

/* DIV-Container */
#page { 
background : #b30063; 
width : 100%;
margin : 0px auto;
padding-top: 10px;
}

#header {
height : 91px;
width : 800px;
overflow : hidden;
margin-right : auto;
margin-left : auto;
}

#header a{ /* Color Header-Text */
color : #b30063;
}

#header a {
background : #ffffff url(uploads/layout/banner.jpg) no-repeat;
width : 800px;
height : 91px;
margin-left : auto;
margin-right : auto;
padding : 50px 0 0 50px; /* Position Header-Text */
text-align : center;
display : block;

}

#container { 
background : #fff url(uploads/layout/hg_content.gif) repeat; 
font-family : "Trebuchet MS", Tahoma, Helvetica, sans-serif; 
font-size : 90%; 
font-style : normal; 
font-variant : normal; 
font-weight : normal; 
line-height : normal; 
margin : 0 auto;
overflow : hidden; 
text-align : left; 
width : 800px; 
}

#navcontainer { 
float : left; 
min-height : 580px; 
overflow : hidden; 
padding-top: 0px; 
width : 185px;
}

#menu li {
text-align : left;
list-style-type : none;
border-top-width: 10px;
border-bottom-width: 10px;
margin-bottom: 20px;
}

#menu li a { 
color : #fff;
background-color:#b30063;
font-size : 110%;
font-family : Impact, arial, Helvetica, sans-serif;
text-decoration : none;
display : block; 
vertical-align : bottom; 
border-top-color: #b30063;
border-top-width: 10px;
border-top-style: solid;
border-bottom-color: #b30063;
border-bottom-width: 10px;
border-bottom-style: solid;
}

#menu li a:hover { 
background-color:#665152;
border-top-color: #665152;
border-bottom-color: #665152;
}

#active { 
background-color : #665152; 
border-top-color: #665152;
border-bottom-color: #665152;
}

li#separator { 
background-color : red; 
}

span.sectionheader { 
background-color : yellow; 
}

#content { 
float : right; 
min-height : 580px;
padding-bottom : 0px;
width : 615px; 
height : 100%;
}

#maincontent {
background-color : #a0a0a0;
float : left;
overflow : hidden;
voice-family : inherit;
width : 430px;
padding : 10px;
margin : 0px;
}

#maincontent ul { 
list-style-image : url(uploads/layout/bullet.png); 
}

#rightdiv { /* Breite 165px = width minus padding seitlich */
font-size : 90%;
float : right;
padding-left : 10px;
padding-right : 10px;
padding-top : 18px; 
width : 145px; 
}

#rightdiv img { 
border : 0px solid #6fb2e6; 
margin : 0px;
float : none;
}
 
#news { 
font-family: "Palatino Linotype", "Times New Roman", Times, serif;
color : #665152;
background-color: #fff;
margin : 0 auto; 
width : 100%; 
}

#footer { 
font-size : 80%;
height : 22px;
margin : 0;
padding : 0px;
text-align : center;
width : 800px;

background-image: url(uploads/layout/kante_unten_archfem.jpg);
background-repeat: repeat;
background-position: center 0;
}

#footertextleft { 
float : left; 
margin-left : 0px;
margin-top : 25px; 
text-align : left; 
width : 450px; 
}

#footertextright { 
float : right; 
margin-right : 0px; 
margin-top : 25px;
text-align : right; 
width : 250px; 
}

/* Class */

hr { 
width : 100%;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #fff; 
}

.box-mitrahmen { 
background-color: #b30063;
border-width: 1px;
border-style: solid;
border-color: #fff;
padding: 3px;
}

.box-menue { 
text-align : left; 
width : 100%;
margin-bottom: 10px;
}

.box-menue p { 
margin-bottom : 10px; 
margin-top : 10px; 
}

.NewsSummary { 
padding-bottom : 15px; 
}

.NewsSummaryPostdate { 
font-size : 80%; 
}

.NewsSummaryAuthor { 
font-size : 80%; 
}

.NewsSummaryCategory { 
font-size : 80%; 
}

.NewsSummaryContent { 
padding-top : 4px; 
}

.NewsSummaryLink a { 
font-size : 110%;
font-family : Impact, arial, Helvetica, sans-serif;
color: #A9003D;
text-decoration: none;
}

.NewsSummaryLink a:hover { 
color: #665152;
}

.NewsSummaryMorelink a { 
color: #A9003D;
text-decoration: none;
}

.NewsSummaryMorelink a:hover { 
color: #665152;
text-decoration: none;
}

.underline { 
width : 100%;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #fff; 
}

.subheading { 
font-weight : bold; 
}

.menu ul { 
list-style : none; 
margin-top : 18px; 
padding : 0px; 
}

.currentpage{ /* menu */
background-color:#665152;
border-top-color: #665152;
border-top-width: 10px;
border-top-style: solid;
border-bottom-color: #665152;
border-bottom-width: 10px;
border-bottom-style: solid;
}

li#separator{ /* menu */
   background-color:red;
}

span.sectionheader{ /* menu */
   background-color:yellow;
}
 
html, body { 
background : #b30063; 
color : #fff;
font-family : "MS Trebuchet", Tahoma, arial, Helvetica, sans-serif; 
font-size : 14px; 
margin : 0; 
padding : 0; 
text-align : center; 
}
 
img { 
float: left;
margin-right: 5px;
margin-bottom: 5px;
border : medium none; 
}

* html #container { 
overflow : visible; 
}

* html #content { 
height : 580px; 
overflow : visible; 
}

* html #navcontainer { 
height : 580px; 
overflow : visible; 
}

.mainheading { 
font-size : 123%; 
}

.header-text { /* Header-Text */
font-family : arial; 
font-size : 250%; 
font-style : normal; 
font-variant : normal; 
font-weight : bold; 
line-height : normal; 
margin-top : 0; 
padding-top : 0; 
visibility : none;
}

/* Links */
a { 
color : #000; 
text-decoration : underline; 
}
 
a:hover { 
color : #b30063; 
text-decoration : none; 
}

...and here the template:

Code: Select all

{process_pagedata}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>

<title>{sitename} - {title}</title>
{metadata}
{stylesheet}
</head>

</__body>

<!--start page-->
<div id="page">

<!--start header-->
<div id ="header"><a href="#"></a>
</div>
<!--end header-->

<!--start container-->
<div id="container">

<!--start navcontainer-->
<div id="navcontainer">

<!--start menu-->
<div class="box-menue">
{cms_module module='menumanager' template='bulletmenu' collapse ='1'}
</div>
<!--end menu-->

<br />

<!--start search-->
{search searchtext="Search..."}
<!--end search-->

<br />

</div>
<!--end navcontainer-->

<!--start content-->
<div id="content">

<!--start maincontent-->
<div id="maincontent">
<h2>{title}</h2>
{content}
</div>
<!--end maincontent-->

<!--start rightdiv-->
<div id="rightdiv">

<!--start news-->
<div class="box-menue">
<div id="news">
{news}
</div>

</div>
<!--end news-->

</div>         
<!--end rightdiv-->

</div>         
<!--end content-->

</div>
<!--end container-->

<!--start footer-->
<div id="footer">
{global_content name='footer'}
</div>
<!--end footer-->

</div>
<!--end page-->

<__body>
</__html>

CMS Made Simple Forums

[solved] can't manage to style the active menu link

[solved] can't manage to style the active menu link