Button color on the active page

[Gianluca]

Greetings to all users of this wonderful forum, my name is Gianluca and thanks to this forum I learned a lot about RW.
I’m looking for a little help for a question,
the site is this https://www.polliallabrace.info and the theme is Blank theme from ThemeFlood,
at the bottom of each page of the site I put 4 buttons (Button Press 2 - DooBox) connected to 4 pages.
I put the 4 buttons in a CSSBOX (), to align them I inserted this code:

.cssboxnav> div {
display: inline-block
}
.cssboxnav {
text-align: center;
}

all right.

Now I would like that when the page, for example, is on POLLI ALLA BRACE, the respective button is red to indicate that the page is active, the same for the second button when it is on the PATATINE page and so on.
Can anyone give me some suggestions?
Thank you.

(I had also tried with ButtonPlus2 in the specific section “define active page & state?” but unfortunately I can’t do it, it certainly isn’t me who doesn’t understand how to do it.)

[Gianluca]

At this moment I solved it by changing the color of the button on each page, but I would be curious to know if there is a way to do it with CSS.
Thank you.

[teefers (Doug Bennett)]

Yes it can be done with CSS.

Looks like you aren’t using tidy links?

It doesn’t look like you have set the HTML link for the current page?

Are you looking to have a partial, or are you planning on leaving it the way it is( a separate nav for each page)?

Anyway I’d need to see the site the way you want it to give you the exact CSS selector, but for a site that has tidy links turned on, you could set up a selector like this:

.cssboxnav a[href="./"] > * {
   Background-color: red!important;
}

[Gianluca]

Wonderful, great job, works perfectly, thanks.
I entered:
.cssboxnav a [href = “./”]> * {
color: #FFFFFF! important;
background-color: # CF3938! important;
border-color: # AF302F! important;
}

that’s exactly what I was looking for, thanks again.

[Gianluca]

I would like to add if, as in my case, the pages reside in the same or main folder, the css to use is for each per page is

a [title = “lorem ipsum”] equal or
a [title ~ = “lorem”] contains

as in my case on the Patatine page:

    .cssboxnav a[title~="Patatine"] > * {
	color: #FFFFFF !important;
	background-color: #CF3938 !important;
	border-color: #AF302F !important;
}

thanks again Doug