css/style error i can't debug

bici · 2022-12-12 22:50:17

just when i thought i was done doing websites i got puled into doing another website for, of all people— retired folk, just like me!
i used a bootstrap framework or template. which i bent and adapted for our use. But one issue, albeit small, still haunts me. i cannot figure out how to stye the active link backround from solid black to another colour in the nava bar… see members section. I globally changed all what was black to red in the bootstrap.min.css file but darn it nothing changes! On the plus side i managed to adapt the footer area incorporating something that Gallex had done recently. (with thx!)

Anyways if someone can easily spot the reason why i can’t change the background colour i would appreciate the tip. Otherwise will live with it.
PS there is also a bootstrap.min.js file that i can’t make much sense of. I can see i am a bit rusty. ;-)

phiw13 · 2022-12-12 23:15:02

This is what you’re looking for:

.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
color: #fff;
background-color: #080808;
}

bootstrap.min.css line 3940 – according to the devlopper tools

bici · 2022-12-12 23:52:35

phiw13 wrote #334283:

This is what you’re looking for:

.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {...

bootstrap.min.css line 3940 – according to the devlopper tools

thank-you. but no luck :-(

I then did a global find/replace for background-color:#080808 >> background-color:#993333
without anything changing. there were 4 occurances. stumped.

Last edited by bici (2022-12-13 00:06:17)

bici · 2022-12-12 23:58:06

phiw13 wrote #334283:

This is what you’re looking for:

.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {...

bootstrap.min.css line 3940 – according to the devlopper tools

Update: I decided to add that code to the last css file that loads and it worked!
Which is strange as there is nothing in the last css that would have interfered.
anyways happy!

phiw13 · 2022-12-13 00:52:49

bici wrote #334286:

Update:

Probably some obscure specificity error, bootstrap seems quite messy in that.

BTW, while you are at it, you might want to change that dullgrey colour of the other text (SFURA) in the navigation bar. The offending code:

.navbar-inverse .navbar-brand {
color: #9d9d9d;
}

You might want ot make that a bit (mucho?) brighter, for better readability. Old eyes will appreciate it.

bici · 2022-12-13 01:13:38

phiw13 wrote #334287:

Probably some obscure specificity error, bootstrap seems quite messy in that.

BTW, while you are at it, you might want to change that dullgrey colour of the other text (SFURA) in the navigation bar. The offending code:

.navbar-inverse .navbar-brand {...

You might want ot make that a bit (mucho?) brighter, for better readability. Old eyes will appreciate it.

indeed! #fff is mucho better

bici · 2022-12-13 02:26:18

Darn … no Navigation menu appears on mobile … strange

phiw13 · 2022-12-13 07:02:35

bici wrote #334289:

Darn … no Navigation menu appears on mobile … strange

It is there, but hidden (display:none). I suppose you need to hook some scripting on that navigation bar, and then you’ll get a menu button… check the documentation for that template?

bici · 2023-01-05 00:46:17

Making some progreess but now stuck on the navigation css
Issues with styling Active Class
The following works but active is only on home link (Test is disabled as it’s not ready to be publicly available):

<li class="nav-item active"> 
<a class="nav-link active" aria-current="page" href="/">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/members">Members</a>
                </li>
              <li class="nav-item">
                   <a class="nav-link disabled">Test</a>
               </li>

I have tried using various combinations using TxP code from examples in the documentation but to no avail. Also not sure why the Links are not styled correclty using the txp examples as it is using the same css rules for <li> ..

<li<txp:if_section name="members"> class="nav-link active" aria-current="page"</txp:if_section>>
            <txp:section link="1" title="1" name="members" />
        </li>
        <li<txp:if_section name="test"> class="nav-link active" aria-current="page"</txp:if_section>>
            <txp:section link="1" title="1" name="test" />
        </li>

using a prototype >> site

bici · 2023-01-05 01:23:35

i have used this logic to style active links in navagation on EE sites and it has always worked. is there a similar concept using Txp tags.

{if segment_1 == "blog"} 
<li class="active"><a href="https://sample.com/blog/">Blog</a></li> 
{/if} 
{if segment_1 != "blog"} 
<li><a href="https://sample.com/blog/">Blog</a></li>
{/if}
 {if segment_1 == "events"} 
<li class="active"><a href="https://sample.com/events/">Events</a></li> 
{/if} 
{if segment_1 != "events"} 
<li><a href="https://sample.com/events/">Events</a></li>
{/if}

albeit it’s a bit more wordy it does exactly what one needs.

edited for display

Last edited by bici (2023-01-05 01:25:39)

phiw13 · 2023-01-05 05:46:02

Does example 3 of the txp:section_list docs work for you?

In your code above, you need to wrap the whole list in a <txp:section_list>…@</txp:section_list>@ – I think.

I use a variant:

<ul>
<txp:section_list default_title="Home" include_default wraptag="" break="" sections=",section-1,section-2,section-3">
<li<txp:if_section not name=''><txp:if_section name='<txp:section />'> class="active-menu"</txp:if_section></txp:if_section>><a itemprop="url" href="<txp:section url />"><txp:section title /></a></li></txp:section_list>
</ul>

the “home page” is listed first and will never have the active class, the other sections will have that class applied when the user is viewing that particular section.

colak · 2023-01-05 11:13:26

Hi bici,

Would this be of help? It is what we are using in the NeMe site.And here is the css.

Textpattern CMS

Textpattern CMS support forum

#1 2022-12-12 22:50:17