WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: Bachson on March 07, 2011, 12:32:21 PM

Title: problem with adaption of Zenlike template with show_menu2
Post by: Bachson on March 07, 2011, 12:32:21 PM

I try to adapt zenlike for my purpose
All well but one small problem with the show_menu2
I would like the submenu on the rightsite to not show the bullets in the list. But whatever I do it keeps up appearing.
I changed the menu call in the index.php to a class.

Code: [Select]

<div class="subnav">
<? show_menu2(0, SM2_ROOT+1, SM2_ALL, SM2_ALL|SM2_CURRTREE); ?>
</div>
and the next css

Code: [Select]

{
padding: 0em;
margin: 0em;
}

body
{
background: #E7AF92 url('images/bkk.png');
background-repeat: repeat-y;
background-size: 110%;
background-position: top center;
padding: 20px 0px 20px 0px;
}

body,input
{
font-size: 10pt;
font-family: "georgia", "times new roman", serif;
color: #333333;
}

p
{
line-height: 1.5em;
margin-bottom: 1.0em;
text-align: justify;
}

a
{
color: #B96D00;
text-decoration: underline;
}

a:hover
{
text-decoration: none;
}


h3 span
{
font-weight: normal;
}

h3,h4
{
display: inline;
font-weight: bold;
background-repeat: no-repeat;
background-position: right;
}

h3
{
font-size: 1.7em;
padding-right: 34px;
background-image: url('images/db1.png');
}

h4
{
font-size: 1.2em;
padding-right: 28px;
background-image: url('images/db2.png');
}

.contentarea
{
padding-top: 1.3em;
}

img.left
{
position: relative;
float: left;
margin: 0em 1.8em 1.4em 0em;
}

img.right
{
position: relative;
float: right;
margin: 0em 0em 1.8em 1.8em;
}

.divider1
{
position: relative;
background: #fff url('images/border2.gif') repeat-x;
height: 14px;
margin: 2.0em 0em 1.5em 0em;
clear: both;
}

.divider2
{
position: relative;
height: 1px;
border-bottom: solid 1px #eaeaea;
margin: 2.0em 0em 2.0em 0em;
}

.post .details
{
position: relative;
top: -1.5em;
font-size: 0.8em;
color: #787878;
}

.post ul.controls
{
clear: both;
}

.post ul.controls li
{
display: inline;
font-size: 0.8em;
}

.post ul.controls li a
{
background-repeat: no-repeat;
background-position: left;
padding: 0em 1.0em 0em 20px;
}

.post ul.controls li a.printerfriendly
{
background-image: url('images/icon-printerfriendly.gif');
}

.post ul.controls li a.comments
{
background-image: url('images/icon-comments.gif');
}

.post ul.controls li a.more
{
background-image: url('images/icon-more.gif');
}

.box
{
position: relative;
background: #FDFCF6 url('images/boxbg.gif') repeat-x;
/*left: -1.5em;*/
top: -1.5em;
padding: 1.5em;
border-bottom: solid 1px #E1D2BD;
margin-bottom: 1.0em;
}

#subnav ul
{
background: #000;
list-style-type:none;
}

#subnav li
{
line-height: 2.0em;
list-style: none;
}

#upbg /*bovenste plaatje, niet in gebruik*/
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 275px;
background: #fff url('images/bg2.jpg') repeat-x;
z-index: 1;
}

#outer
{
z-index: 2;
position: relative;
/*
The width value below controls the overall width of the design. By default it's set to 82%
(so it'll take up 82% of the browser window's width). You can set it to a different percentage
value (70%, 90%, etc.) or even a pixel value (760px, 800px, etc.) to enforce a fixed width.
*/
width: 85%;
border: solid 9px/* #fff*/#FDC9AB; /*kleur van de rand van het hoofdventer*/
border-style: ridge groove;
background-color: #fff; /* kleur van het hoofd tekstvenster*/
margin: 0 auto;
}

#header
{
position: relative;
width: 100%;
height: 7.0em;
background: /*#1D3200*/#660000 ;
margin-bottom: 2px;
}

#headercontent
{
position: absolute;
bottom: 0em;
padding: 0em 2.0em 1.3em 2.0em;
}

#headercontent h1
{
font-weight: normal;
color: #fff;
font-size: 2.5em;
}

#headercontent h1 sup
{
color: #777;
}

#headercontent h2
{
font-size: 1.0em;
font-weight: normal;
color: #aaa;
}

#search
{
position: absolute;
top: 4.5em;
right: 2.0em;
padding-right: 0.0em;
}

#search input.text
{
margin-right: 0.5em;
vertical-align: middle;
border-top: solid 1px #000000;
border-right: 0px;
border-bottom: solid 1px #777777;
border-left: 0px;
padding: 0.15em;
width: 10.0em;
}

#search input.submit
{
background: #990000 url('images/buttonbg.png') repeat-x;
border: solid 1px #5F6800;
font-weight: bold;
padding: 0.25em;
font-size: 0.8em;
color: #F2F3DE;
vertical-align: middle;
}

#headerpic
{
position: relative;
height: 150px;
background: url('images/logo.png') no-repeat top left;
margin-bottom: 2px;
}

#menu
{
position: relative;
background: /*#7F8400*/#990000 url('images/menubg.png') repeat-x top left;/*de menuachtergrond over de hele breedte*/
height: 3.5em;
padding: 0em 1.0em 0em 1.0em;
margin-bottom: 2px;
}

#menu ul
{
position: absolute;
top: 1.1em;
}

#menu ul li
{
position: relative;
display: inline;
}

#menu ul li a
{
padding: 0.5em 1.0em 0.1em 1.0em;/*bepaald de grote van de menuachtergrond currentitem en postite van de tekst*/
color: #fff;
font-weight: bold;
text-decoration: none;
}

#menu ul li a:hover
{
text-decoration: underline;
}

#menu ul li a.menu_current
{
background: /*#7F8400*/#990000 url('images/menuactive.png') repeat-x top left;/*menuachtergrond van het actuele item*/
}

#menubottom
{
background: #fff url('images/border1.gif') repeat-x;
height: 14px;
margin-bottom: 1.5em;
}

#content
{
padding: 0em 2.0em 0em 2.0em;
}

#primarycontainer
{
float: left;
margin-right: -18.0em;
width: 100%;
}

#primarycontent
{
margin: 1.5em 22.0em 0em 0em;
}

#secondarycontent
{
margin-top: 1.5em;
float: right;
width: 18.0em;
}

#footer
{
position: relative;
height: 2.0em;
clear: both;
padding-top: 5.0em;
background: #fff url('images/border2.gif') repeat-x 0em 2.5em;
font-size: 0.8em;
}

#footer .left
{
position: absolute;
left: 2.0em;
bottom: 1.2em;
}

#footer .right
{
position: absolute;
right: 2.0em;
bottom: 1.2em;
}

anyone who can tell me what i do wrong?

Franc

Title: Re: problem with adaption of Zenlike template with show_menu2
Post by: Argos on March 09, 2011, 11:29:11 PM

Yes, you use a class in your html, but an id in your css...

Title: Re: problem with adaption of Zenlike template with show_menu2
Post by: Bachson on March 10, 2011, 12:49:12 AM

Bedankt Jurgen
dat was het :-D
hoe kortzichtig kan een mens zijn

excuses for the Dutch
problem solved.

Title: Re: problem with adaption of Zenlike template with show_menu2
Post by: Argos on March 10, 2011, 12:54:14 AM

 :wink:

Title: Re: problem with adaption of Zenlike template with show_menu2
Post by: Bachson on March 16, 2011, 11:49:18 AM

This problem is solved but the next appears. I've been searching but could not find the solution.
all is working wel but....
I've set the side menu on the left to have a menu-current. works like a charm but when on the page level 2 the menu current highlights the actual menu level 2 and the subpages on level 3. (see attachment)
How to prohibit this?
this is my CSS

Code: [Select]

#subnav .menu-current a
{
font-weight: bold; font-style: italic;
color: #ACB1C0;
}
and the call in the template

Code: [Select]

<?php if(show_menu2) { /* Only shown menu if we need to */ ?>
<? show_menu2(0, SM2_ROOT+1, SM2_ALL, SM2_ALL|SM2_CURRTREE);?>
<?php } ?>

[gelöscht durch Administrator]

Title: Re: problem with adaption of Zenlike template with show_menu2
Post by: Steve_O on March 16, 2011, 07:16:05 PM

try

Code: [Select]

#subnav .menu-current > a
as selector

Title: Re: problem with adaption of Zenlike template with show_menu2
Post by: Bachson on March 16, 2011, 07:38:30 PM

Nope, the current does not work at all when I do that.....

thanks anyway. I'll keep on trying.....

Title: Re: problem with adaption of Zenlike template with show_menu2
Post by: Bachson on March 16, 2011, 08:02:16 PM

I'll tried all variations I could imagine, none did the work.
In this tread I found some interesti8ng code: https://forum.WebsiteBaker.org/index.php/topic,16294.0.html
The menu-child code solved the problem. I'll tried until 4 levels deep (I will never more need I gues).

Code: [Select]

#subnav .menu-child a
{
text-decoration: none;
font-style: normal;
color: #000;
}
I gues you tell de system to set all the child pges to normal layout

thanks for helping