Page 1 of 1

Menu Spacer (Separator) Joomla 1.5 ?

Posted: Mon Feb 18, 2008 5:35 pm
by jamesodmitchell
How do I add a menu serarator in Joomla 1.5 - I am NOT in legacy mode BUT set Spacer under legacy parameters but obviously did not work.

Thanks
James

Re: Menu Spacer (Separator) Joomla 1.5 ?

Posted: Tue Feb 19, 2008 5:15 pm
by midimarcus
I've the same problem with horizontal menu's spacer.

The right way should be to use a horizontal-formatted list and putting a border on the left side of a or li tag and a corresponding padding.
The problem here are the first and last list items, that need some different ID or class enabling developer to remove the border at the beginning and at the end of the list.
Anyone knows how to do this?

Re: Menu Spacer (Separator) Joomla 1.5 ?

Posted: Sat Feb 23, 2008 10:17 pm
by jjgy
The typical approach to this problem is the use of the :first-child psuedoclass. Applied to your template, this handy tool automatically applies the attributes given to it to the element only if it is the first child of the parent block level element. I haven't tried this with joomla before, but if I understand the menus properly, it'd look something like this.

Code: Select all

#navigation ul li {
	background-image: url(../images/spacer.png);
	background-repeat: no-repeat;
	background-position: left;
	display: inline !important; 
	margin: 0;
	padding-left: 5px;
	padding-right: 5px;
}

#navigation ul li:first-child {
	background-image: none;
}
I'm not much of a joomla! dev, so I'm not sure if the built in spacer function you guys mentioned handles this, but situations like this is where the :first-child psuedoclass really shines. Also, I just made up the IDs in that code example. I'm not sure what joomla outputs for menus, so you'll want to replace that if you use this code. Hope this helped ;)

Re: Menu Spacer (Separator) Joomla 1.5 ?

Posted: Sun Feb 24, 2008 10:26 am
by midimarcus
jjgy wrote:The typical approach to this problem is the use of the :first-child psuedoclass.
[...]
Yes,you're right, but as far I know :first-child psuedoclass is not supported by Internet Explorer 6 and previous versions.
Am I right? :-\
jjgy wrote: I'm not much of a joomla! dev, so I'm not sure if the built in spacer function you guys mentioned handles this, but situations like this is where the :first-child psuedoclass really shines. Also, I just made up the IDs in that code example. I'm not sure what joomla outputs for menus, so you'll want to replace that if you use this code. Hope this helped ;)
Using Joomla! 1.5 menu output is strictly made of lists, so you have full control of them with CSS. Perhaps I have to investigate more for list and list items override from template, to be able to add custom classes and ids. Anyone knows more about this?

Re: Menu Spacer (Separator) Joomla 1.5 ?

Posted: Mon Feb 25, 2008 12:19 am
by jjgy
Ah, you're right about the IE 6 support. Enough people have made the jump to IE that for a small fix to your menus it shouldn't be a big deal, but obviously anything that would leave a big scar on your site by the failure of proper style application of anything under :first-child should be avoided.

Perhaps this would be a good time for a javascript style hack? Or perhaps a modification of the menu module to output an id on the first <li> item. I guess I'll look into that.

Re: Menu Spacer (Separator) Joomla 1.5 ?

Posted: Mon Feb 25, 2008 5:04 pm
by midimarcus
Playing with mod_mainmenu output overriding I've reached the minimum goal of identify first and last items adding them a custom CSS class.

Please see at http://forum.joomla.org/viewtopic.php?f ... 5#p1216015

Re: Menu Spacer (Separator) Joomla 1.5 ? Last child?

Posted: Tue Jan 19, 2010 4:49 pm
by frankien
I have been trying for days to take out the last dot on my submenu

http://www.the-venting-spleen.co.uk after join us

I tried using a separator and using the bg image parameter - didnt show up

tried adding the last child code mentioned above - didnt show up....

tried using a separator and using css to give it a bg image - didnt work -

tried renaming my submenu items so the ul comes after the name - didnt work....below is a copy of my css style sheet please help

thank you

x frances

/* ************************************************************************************************** */
/* CSS by Norm Douglas */
/* Netreach */
/* */
/* */
/* ************************************************************************************************** */
/* CONTENT CSS */
/* ************************************************************************************************** */
#wrapper {
margin:auto;
width:960px;
}

#header {
background-color:#FFFFFF;
height:110px;
background-image:url(../../../images/stories/the_venting_spleen_logo_masthead.gif);
background-repeat:no-repeat;
padding-top: 30px;
width:960px;
}

#divider {
height:0px;
border-top-width: 2px;
border-bottom-width: thin;
border-top-style: solid;
border-bottom-style: solid;
border-top-color:#CCCCCC;
border-bottom-color:#333333;
margin-bottom: 10px;
}

#banner {
float:right;
border: thin solid #CC0000;
position:relative;
top:-25px;
height:68px;
width:460px;
}

#login {
height: 16px;
font-size: 12px;
color: #fff;
text-align: right;
padding: 10px 20px 15px;
background:url(../../../images/login.png) repeat-x;
}

#date {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
color:#FFFFFF;
text-align:right;
width:940px;
}

#search {
position:relative;
top:40px;
left:547px;
float:right;
z-index:2;
width:400px;
}

#topmenu {
height:25px;
background-color:#333333;
width: 960px;
}

#submenu {
height:30px;
}

#right {
float:right;
width:180px;
height:100%;
}

#right1 {
margin-right: 5px;
text-align:right;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
margin-bottom:5px;
float:right;
}

#right2 {

float:right;
margin-bottom:10px;
margin-right:3px;
}

#right3 {
float:right;
margin-right:-16px;
margin-top:-8px;


}

#right4 {
float:right;
margin-right:2px;
margin-bottom:5px;
margin-top:-5px;

}

#right5 {
float:right;
margin-right:2px;
margin-bottom:5px;
margin-top:-4px;
}

#right6 {
float:right;
margin-top:4px;
margin-right:2px;

}

#right7 {
float:right;
margin-right:6px;

}
#opinion1{}
#opinion2{}
#opinion3{
margin-top:20px;}
#opinion4{
margin-top:6px;
margin-left:1px;
}
#opinion5{
margin-top:10px;
margin-left:5px;}

#mainbody {
width:755px;
float:left;
border-right:1px #c8c8c8 dotted;
padding-right: 20px;
}

#mainbody img {
margin-right: 10px;
border: 0 none;
margin-top: 5px;
}

#footer {
height:50px;
clear:both;
margin-top: 10px;
text-align:center;
font-size:9px;
}

#banner2 {
height:90px;
margin-bottom:20px;
margin-top:5px;
clear: both;
}

body {
color: #444;
margin: 0 auto;
font-size: 14px;
padding: 0;
}

h1 {
font-size:24px;


}

h2 {

}
h3 {

}

a
{
outline: none;
}

a:link {
text-decoration: none;
font-weight: normal;
color:#000000;
border:0px;
margin:0px;
}


a:visited {
text-decoration: none;
font-weight: normal;
color:#000000;
}

a:hover {
color:#CC0000;
text-decoration:none;
font-weight: normal;
}

a:active {
text-decoration: none;
font-weight: normal;
color:#000000;
outline: none;

}
a: img {
text-decoration: none;
font-weight: normal;
color:#000000;
}

p {
margin-top: 0;
margin-bottom: 3px;
margin-right: 15px;
}

img {

border: 0 none;
margin-top: 5px;
}
/* ************************************************************************************************** */
/* TEMPLATE LAYOUT CSS - DEFINE YOUR OWN TEMPLATE STYLES HERE */
/* ************************************************************************************************** */
#page_bg {
padding: 10px 0;
margin-bottom: 1px;
}

ul#mainlevel {
margin: 0;
padding: 0;
text-transform:uppercase;

}

ul#mainlevel li {
display: inline; /* Shows each item side-by-side */
list-style-type: none; /* Gets rid of the bullet points */
}

ul#mainlevel a {
display: block;
float: left;
padding: 0 1.485em; /* Provides horizontal separation between menu items */
height:25px;
line-height:25px;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
text-decoration:none;
border-right: 1px solid #FFFFFF;
color:#FFFFFF;
display:block;
background-image:url(../../../images/stories/nav_bg.png);
}

ul#mainlevel a:link {
color:#FFFFFF;
}

ul#mainlevel a:hover {
background-image:url(../../../images/stories/nav_bg_grey.png);
color:#FFFFFF;
}

ul#mainlevel a:visited {
color:#FFFFFF;
}

ul#mainlevel a:active {
color:#FFFFFF;
}

ul#mainlevel-nav {
margin: 0;
padding: 0;
}

ul#mainlevel-nav li {
display: inline; /* Shows each item side-by-side */
}

ul#mainlevel-nav a {
display: block;
float: left;
padding: 8px 19px 8px 10px;
text-align:left;
font-family:"Times New Roman", Times, serif;
font-size:12px;
line-height:18px;
text-decoration: none;
background-image:url(../../../images/stories/tvs_dkgreydot.png);
background-repeat: no-repeat;
background-position: right 14px;
}

ul#mainlevel-nav li:lastItem {
background-image:none;
}

ul#mainlevel-nav a:link {

}

ul#mainlevel-nav a:hover {
color:#CC0000;
}

ul#mainlevel a:visited {

}

ul#mainlevel-nav a:active {

}

form {
padding: 20px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

.small {
font-size:11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#999999;
}

.readmore-link {
display:none;
}
.comment-link{
display:none;
}


.vsig_ctrls {
display:block;
text-align:right;
width:344px;
position:relative;
height:10px;

}


.addthis_toolbox {
width: 180px;
padding: 10px 0 10px 10px;
background-image:url(../../../images/stories/rounded%20bar.png);
background-repeat: no-repeat;
}


/* ************************************************************************************************** */
/* */
/*
:geek:

Re: Menu Spacer (Separator) Joomla 1.5 ?

Posted: Tue Apr 05, 2011 11:51 am
by erickaps
jjgy wrote:The typical approach to this problem is the use of the :first-child psuedoclass. Applied to your template, this handy tool automatically applies the attributes given to it to the element only if it is the first child of the parent block level element. I haven't tried this with joomla before, but if I understand the menus properly, it'd look something like this.

Code: Select all

#navigation ul li {
	background-image: url(../images/spacer.png);
	background-repeat: no-repeat;
	background-position: left;
	display: inline !important; 
	margin: 0;
	padding-left: 5px;
	padding-right: 5px;
}

#navigation ul li:first-child {
	background-image: none;
}
I'm not much of a joomla! dev, so I'm not sure if the built in spacer function you guys mentioned handles this, but situations like this is where the :first-child psuedoclass really shines. Also, I just made up the IDs in that code example. I'm not sure what joomla outputs for menus, so you'll want to replace that if you use this code. Hope this helped ;)
This idea worked for me thanks jjgy.

This is how I did it:

I have set the menu class suffix '_bottommenu'

Code: Select all

ul.menu_bottommenu li a {border-left:solid #A8A8A8 1px;padding:0px 5px;}
ul.menu_bottommenu li:first-child a {border-left:0px;padding-left:0px;}

Re: Menu Spacer (Separator) Joomla 1.5 ?

Posted: Sat Dec 01, 2012 5:34 pm
by hrva07
erickaps, thank you. Your post is very usefull :-)