Menu Spacer (Separator) Joomla 1.5 ?

General questions relating to Joomla! 1.5 There are other boards for more specific help on Joomla! features and extensions.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting.
Forum Post Assistant - If you are serious about wanting help, you should use this tool to help you post.
Locked
jamesodmitchell
Joomla! Apprentice
Joomla! Apprentice
Posts: 24
Joined: Sun Feb 17, 2008 12:53 pm

Menu Spacer (Separator) Joomla 1.5 ?

Post by jamesodmitchell » Mon Feb 18, 2008 5:35 pm

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

midimarcus
Joomla! Apprentice
Joomla! Apprentice
Posts: 20
Joined: Thu Feb 02, 2006 1:01 pm

Re: Menu Spacer (Separator) Joomla 1.5 ?

Post by midimarcus » Tue Feb 19, 2008 5:15 pm

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?
--
Marco Giorgetti :: http://www.marcogiorgetti.com

jjgy
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Wed Jun 13, 2007 7:38 am

Re: Menu Spacer (Separator) Joomla 1.5 ?

Post by jjgy » Sat Feb 23, 2008 10:17 pm

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 ;)

midimarcus
Joomla! Apprentice
Joomla! Apprentice
Posts: 20
Joined: Thu Feb 02, 2006 1:01 pm

Re: Menu Spacer (Separator) Joomla 1.5 ?

Post by midimarcus » Sun Feb 24, 2008 10:26 am

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?
--
Marco Giorgetti :: http://www.marcogiorgetti.com

jjgy
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Wed Jun 13, 2007 7:38 am

Re: Menu Spacer (Separator) Joomla 1.5 ?

Post by jjgy » Mon Feb 25, 2008 12:19 am

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.

midimarcus
Joomla! Apprentice
Joomla! Apprentice
Posts: 20
Joined: Thu Feb 02, 2006 1:01 pm

Re: Menu Spacer (Separator) Joomla 1.5 ?

Post by midimarcus » Mon Feb 25, 2008 5:04 pm

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
--
Marco Giorgetti :: http://www.marcogiorgetti.com

frankien
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Mon Dec 21, 2009 5:12 pm

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

Post by frankien » Tue Jan 19, 2010 4:49 pm

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:

User avatar
erickaps
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 101
Joined: Thu Aug 17, 2006 9:27 am
Location: United Kingdom
Contact:

Re: Menu Spacer (Separator) Joomla 1.5 ?

Post by erickaps » Tue Apr 05, 2011 11:51 am

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;}

hrva07
Joomla! Apprentice
Joomla! Apprentice
Posts: 17
Joined: Tue Aug 28, 2012 7:46 am

Re: Menu Spacer (Separator) Joomla 1.5 ?

Post by hrva07 » Sat Dec 01, 2012 5:34 pm

erickaps, thank you. Your post is very usefull :-)


Locked

Return to “General Questions/New to Joomla! 1.5”