Custom link styling

5 Posts

CarlosGonzalez Reply #1, 16 years, 7 months ago

Hello ModX community,

I have a wayfinder menu working - currently has basic call:

[[Wayfinder? &startId=`0`  &level=`1`]]

links are working fine, and is pulling in my CSS correctly.

However I have created a class to apply to the first link - "Home" so that it doesn’t have a left border.

CSS for Navigation is:

#Nav ul {
	display: inline;
	list-style: none;
	padding: 0;
	border: none;
	margin-top: 0;
	margin-bottom: 0;
}
#Nav li {
	text-align: left;
	display: inline;
	font-size: 0.9em;
	border-left-width: 1px;
	border-left-style: double;
	border-left-color: #6989AD;
	padding-left: 12px;
	padding-right: 5px;
	margin-left: 0px;
	margin-right: 0px;
}

#Nav li.first {
	text-align: left;
	display: inline;
	padding-left: 15px
	font-size: 0.9em;
	border-left: none;
}

As yet I’m not able to work out how to apply this class just to the home page list item, using wayfinder. So any help would be great.

Feel free to check the test site: http://cg-interactive.co.uk/modX/testSite to get an idea (p.s footer has hard coded placeholder links for now)

Many thanks,
Carlos

1,161 Posts

Photowebmax Reply #2, 16 years, 7 months ago

I think you have an error in naming the pseudo class designation...

Try

#Nav li:first-child{...

Also I think you have a little case of "divitis" going on in the nav area of your code...

5 Posts

CarlosGonzalez Reply #3, 16 years, 7 months ago

thanks, that’s great.. divitis removed too grin

1,161 Posts

Photowebmax Reply #4, 16 years, 7 months ago

Glad that worked.

You could still go a little deeper with the div pruning though.

Try presenting your upper navigation with one <ul id="topNav"> and then adding the CSS to the ul, li’s and the li:first-child directly. This way you could remove the class="alignCentre" and the id="Nav" from the markup.

Naming the upper navigation "topNav" instead of "Nav" allows you to have separate nav systems with their own custom CSS...

5 Posts

CarlosGonzalez Reply #5, 16 years, 7 months ago

cool, will do... always been applying ID’s to a div.. hehe

appreciate the advice,
Carlos

1,161 Posts

Photowebmax Reply #6, 16 years, 7 months ago

Your site will function either way.

But generally its good practice to present as little code as possible. The upper banner & Nav area is where I often see extra code and divs that really do not need to be there: a "branding wrapper" wrapped around a "banner div" wrapped around a <div id="nav"> wrapped around a UL with special classes and spans thrown in for extra bloat.

Some coders will just use a h1 and <ul id="topNav"> and be done with it. In this case the h1 can support the banner graphic using the background CSS with text indented off the screen etc.