I am just starting to configure a site using Base3 and bringing content to it from the older site. One of the articles uses article page breaks and the menu that results in the article has white links. Here is the page:
dev.oakcreekwatershed.org/about-ocwc/1-the-ocwc-council

Can you please tell me how to style this in-article menu without also effecting links on the other menu items, such as the main menu?
tmsrDD

Hi

Colour wise try

.pull-right.article-index .nav-tabs li a {color:#000 !important;}
.pull-right.article-index .nav-tabs li.active a {color:#fff !important;}

Some progress.
I ended up using this derivation:
.pull-right.article-index .nav-tabs li a {color:#000 !important;padding:2px !important;}
.pull-right.article-index .nav-tabs li.hover a {color:#000 !important;}
.pull-right.article-index .nav-tabs li.active a {color:#fff !important;}

The links all show up now on this page:
dev.oakcreekwatershed.org/about-ocwc/1-the-ocwc-council?showall=

But when I hover over the active link, it still disappears, and on Page 2, it doesn't pick up the active styling. What am I missing?

Also, when you hover over the three links, the area is "twitchy" moving around under the mouse. Any ideas for that?
tmsrDD

BTW, on page 2 of that article"
dev.oakcreekwatershed.org/about-ocwc/1-the-ocwc-council?showall=&start=1

The content drops way down, below the Table of Contents area. Any idea why that is?
tmsr

css try

.pull-right.article-index .nav-tabs li.active a:hover {
color: #000 !important;
}

with the colour changed as required

Okay, so the hover on the Page 1 is working, but Active is still not working on the second page:
dev.oakcreekwatershed.org/about-ocwc/1-the-ocwc-council?showall=&start=1

And the twitchy-ness when you hover is caused by -?
tmsrDD

The html is different for the second page so the style no longer applies

Have you changed / added any html?

Also where are you adding custom css styling?

Not sure what you mean by "Have I added any html" - to where? Within the article itself?

I am adding the custom css within the template area. I made a copy of Base3, I am using that for all of my customization, and there is the Custom Code tab. I am using the Before </head? section and then created a <style> tag to capture all of these custom css changes.
tmsrDD

Sorry I didn't express myself well - have you edited or created any php?

Is it possible to add custom css changes to the custom css file as I'm finding it hard to what has changed

I have not edited or created any php.

I could customize the custom.css, but not at the moment. Here is my current "Custom Code" in the Before section of the template:
<style>
.logo {
text-transform: none !important;
}
h1 {font-size:32px !important;}
h2 {margin-bottom:15px !important; font-size:1.4em !important;}
p {margin: 0 0 15px; }
#top4 ul {
margin-right: 10px !important;
margin-top: 10px !important
}

.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > span {
text-transform: none !important;
}

.cat-children h3 {
margin-bottom: 0px;
padding: 0;
}

#zentools96 .zentools .zentext ul {margin-bottom: 20px;}
#zentools96 .zentools .zentext li {list-style-type: disc; margin-left:25px;}

.pull-right.article-index .nav-tabs li a {color:#000 !important;padding:2px !important;}
.pull-right.article-index .nav-tabs li.active a {color:#fff !important;}
.pull-right.article-index .nav-tabs li.active a:hover {
color: #000 !important; padding:2px !important;
}
</style>

tmsrDD

Twitchy wise

Its hard to troubleshoot this way especially given the amount of LESS files as I can't see your css

but it looks like the border and no border states are causing the problem

.nav-tabs li a {border: 0 !important;}

The active state html is different so the styling doesn't apply so use

.nav-tabs li a.active {
color: #ffffff !important;
background: #4785c2 !important;
border: 1px solid #3d7bb8 !important;
border-radius: 0px !important;
}

For the font to be white you will need to increase the specificity to match the styling you added for it

I've implemented your latest css and I am now at least seeing the links, whether active or hover state, and they are legible, so while I might prefer the white for active, I couldn't figure that out, so I am moving on. Here is the Page 2, with this new css in play:
dev.oakcreekwatershed.org/about-ocwc/1-the-ocwc-council?showall=&start=1

Twitching: I tried in a Developer Inspect Element window (Chrome) to turn on and off every css rule I could to stop the "twitching" and nothing seemed to affect that. No border rule, etc. Irritating to me but I don't know what else to do.

Gap: Last tweak for this pagebreak issue is that on this Page 2, there is a large gap before Page 2's content starts. Any idea why that is? I checked the article itself and there are no random <br /> or extra p or h tags. I looked at the css in the Developer Inspect Element and couldn't find a margin or padding at play. Any idea there?

I really need to use this Pagebreak model for text-heavy content, but the layout isn't visually appealing yet.

Thanks,
tmsrDD

With the custom css being added to the template file it doesn't list the css file responsible as its a php file

Its really best to use the custom.css file its much harder to work like this

As above I mentioned the class is different so you need to override the existing custom style you added as a custom style

so add

.pull-right.article-index .nav-tabs li a.active {color:#fff !important;}

and

.pull-right.article-index .nav-tabs li a.active:hover {color: #000 !important;}

with colour as required for hover on an active link

As I mentioned above its styling relating to the hover state of the link so you need to add something along these lines

body .nav-tabs li a.active {border:0 !important;}

Found time to take the style code out of Custom Code area in the template manager and implement the custom.css.*

I worked through the other instructions and finally have the twitchy gone (didn't need the body level css. These are the final css modifications to that navigation, in case anyone else would like to use it:

.pull-right.article-index .nav-tabs li a {padding:2px !important;}
.pull-right.article-index .nav-tabs li a.active {padding:2px !important;}
.pull-right.article-index .nav-tabs li a.active:hover {padding:2px !important;
}

.pull-right.article-index .nav-tabs li a.active {
color: #ffffff !important;
background: #4785c2 !important;
border: 1px solid #3d7bb8 !important;
border-radius: 0px !important;
}
.pull-right.article-index .nav-tabs li a:hover {
border: 1px solid #3d7bb8 !important;
border-radius: 0px !important;
}

.pull-right.article-index .nav-tabs li a {color:#000 !important;}
.pull-right.article-index .nav-tabs li a.active {color:#fff !important;}
.pull-right.article-index .nav-tabs li a.active:hover {color: #000 !important;}

---

Navigation looks as I want it and stopped twitching now. Thank you for getting me this far.

Only problem left on this Pagebreak page is page 2's large gap to the left of that navigation. The content doesn't start there for some reason:
dev.oakcreekwatershed.org/about-ocwc/1-the-ocwc-council?showall=&start=1

Any solution for that?
tmsrDD

* Your file was named with a typo: custom_rename_to_ccustom.css

Is that piece of text that displays part of a standard article? its not a description or anything along those lines?

It is part of the standard article. To triple-check, I just looked at the article again. There is a Read more... just before Mission on the first page. Then, just before Accomplishments, I hit Page Break, gave it a name and title, and the result is what you see here:
dev.oakcreekwatershed.org/about-ocwc/1-the-ocwc-council?showall=&start=1

This is the source code leading into that:
12.  Obtain grants and contracts related to watershed resource issues and concerns.</p>
<hr title="Page 2" alt="Council, Pg 2" class="system-pagebreak" />
<h2>Accomplishments</h2>

tmsrDD