Re: Removing mouseover effect on links in nav bar.

January 3, 2015 at 9:34 am #1482

Participant

Hello,

First of all, Congrats for great customization of Contango. Dark version of Contango is also very impressive.

Quote:

I need a simple global soloution to all my links, so I don’t need to change every anchor element individually in the style.css file.

It depends on the level of customization. Like, in your case – deep customization may need to write more and more styles to make the customization perfect.

*** I will strongly recommend NOT TO ALTER style.css file. As it will be override in case of Contango upgrade. Please always use Extend Settings of Contango Options to write your own styles.

Do you follow me ?

I have made some quick customization to Contango to meet your style. Let have a look on the attachments and steps,

Step One:

I have changed the Background color to #000 of theme via `Appearance > Background > Colors`
I have changed the Contango Layout to wide via `Appearance > Contango Options > Layout Settings`

Step Two:

I have changed the Contango Skin via `Appearance > Contango Options > Skin Settings`
Primary Skin to: #ff0000
Secondary Skin to: #ff2626

Step Three:

I have written following some quick styles to match with your theme via `Appearance > Contango Options > Extend Settings`

/* Content */
#content {
background: #000;
border: none;
box-shadow: none;
}

/* Sidebar */
#sidebar {
background: #000;
border: none;
box-shadow: none;
}

/* Nav Common Styles */
#loop-nav-numeric a,
#loop-nav-next-prev a,
#loop-nav-singlular-post a,
#loop-nav-singular a,
#comments-nav-below a,
.page-link a span,
.page-link span,
.nav-numeric span {
background-color: #ff0000;
border: solid 1px #ff2626;
color: #fff;
}
#loop-nav-numeric a:hover,
#loop-nav-next-prev a:hover,
#loop-nav-singlular-post a:hover,
#loop-nav-singular a:hover,
#comments-nav-below a:hover,
.page-link a:hover,
.page-link a span:hover {
color: #fff;
background-color: #ff2626;
}

/* Navigation */
#nav {
background: #000;
border: none;
box-shadow: none;
}

/* Menu Primary */
/** Top Level List */
.menu ul li {
background: #000;
border-right: none;
}

/** Nested List */
.menu ul ul.sub-menu li,
.menu ul ul.children li {
border: none;
background: #000;
}

/** Top Level Anchors */
.menu ul a,
.menu ul a:visited {
color: #fff;
}[/CODE]

Please see the result in the attached screenshots.
I hope you have got the point.

Thanks

[ATTACH=full]72[/ATTACH]

[ATTACH=full]73[/ATTACH]

[ATTACH=full]74[/ATTACH][CODE]/* Content */
#content {
background: #000;
border: none;
box-shadow: none;
}