Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

bici
Member
From: vancouver
Registered: 2004-02-24
Posts: 2,076
Website Mastodon

css/style error i can't debug

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


…. texted postive

Offline

#2 2022-12-12 23:15:02

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,102
Website

Re: css/style error i can't debug

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


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

#3 2022-12-12 23:52:35

bici
Member
From: vancouver
Registered: 2004-02-24
Posts: 2,076
Website Mastodon

Re: css/style error i can't debug

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)


…. texted postive

Offline

#4 2022-12-12 23:58:06

bici
Member
From: vancouver
Registered: 2004-02-24
Posts: 2,076
Website Mastodon

Re: css/style error i can't debug

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!


…. texted postive

Offline

#5 2022-12-13 00:52:49

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,102
Website

Re: css/style error i can't debug

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.


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

#6 2022-12-13 01:13:38

bici
Member
From: vancouver
Registered: 2004-02-24
Posts: 2,076
Website Mastodon

Re: css/style error i can't debug

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


…. texted postive

Offline

#7 2022-12-13 02:26:18

bici
Member
From: vancouver
Registered: 2004-02-24
Posts: 2,076
Website Mastodon

Re: css/style error i can't debug

Darn … no Navigation menu appears on mobile … strange


…. texted postive

Offline

#8 2022-12-13 07:02:35

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,102
Website

Re: css/style error i can't debug

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?


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

#9 2023-01-05 00:46:17

bici
Member
From: vancouver
Registered: 2004-02-24
Posts: 2,076
Website Mastodon

Re: css/style error i can't debug

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


…. texted postive

Offline

#10 2023-01-05 01:23:35

bici
Member
From: vancouver
Registered: 2004-02-24
Posts: 2,076
Website Mastodon

Re: css/style error i can't debug

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)


…. texted postive

Offline

#11 2023-01-05 05:46:02

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,102
Website

Re: css/style error i can't debug

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.


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

#12 2023-01-05 11:13:26

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,032
Website GitHub Mastodon Twitter

Re: css/style error i can't debug

Hi bici,

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


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

Board footer

Powered by FluxBB