Help customization

I also have the same question as Laurent – thank you

I would like to remove the color next to the active menu page.

Can someone help us removing the blue color when a page is active !!
please , anyone ?

Hmm, I don’t see any blue color on the left menu, and I looked at the page using IE, Chrome, and Firefox. Maybe I am missing something?

I found how to change the color in the .css code – I changed mine to a reddish color #C3000A you could set the color to the same as your menu background – there are two instances in the css code below .current_page_item a and li.current_page_item a

.current_page_item a {background:#017ab0; border-left: solid #C3000A 2px;}
.main-navigation ul ul,.main-navigation li:hover ul a {background: #fdfdfd; transition: all 1s ease 0s !important; }
.main-navigation ul ul a:hover,.main-navigation ul ul li.current_page_item a {background: #ededed; border-left: solid #C3000A 2px; }

Let me know if you need more help.

Great. Just make sure you are not making changes to the theme’s files directly. If the theme gets updated because of feature enhancements, bug fixes, or security patches, then your changes will be lost. If the theme has a custom CSS option, use that to override the existing CSS. If it doesn’t have a custom CSS option, either create a child theme or use a CSS plugin like Jetpack or Custom CSS Manager.

CrouchingBruin, you couldn’t saw the problem as my site wasn’t with the Earth Pro theme. now it is so please come and see the problem.

jzonewarrior I can’t get it, nothing works for me, can you please in a original copy of the Earth Pro files tell me where did you made the changes : witch line of code and what file.

Hi, Laurent:

OK, now I see the problem.

I see also that you created a child theme, which is great. However, you did not need to copy over all of the CSS from the parent theme (Earth Pro) because the CSS from the parent theme is automatically brought in by this line at the top of your child theme style.css file:

@import url("../earth-pro/style.css");

Now that I see the problem, how did you want to fix it? To keep the blue background, but just change the text to white, you can add this rule to the end of your child theme’s style.css file:

.widget ul li.current_page_item a {
   color: #fff;
   padding-right:5px;
}

This makes the text of the current menu item white. I also added some padding on the right to make it look better.

thank you for your quick answer,
I put all the original css because it is easier for me if I want to make change or test things.
I would like to have no backgroung when a page is active, maybe just the text in bold or something simple.
look also at the bottom of the page, the credit is the same color of the background so we can’t see it
I think there is a mess with the colors in the css, as the elements are mixed together.
I would like to have something like :
Title color :
a hover color :
background color :
….

I would like to have no backgroung when a page is active, maybe just the text in bold or something simple.

Add this CSS:

.widget ul li.current_page_item a {
   color: #32a7db;
   font-weight: bold;
   background-color: #fff;
   border-left: 0;
}

look also at the bottom of the page, the credit is the same color of the background so we can’t see it

footer#colophon .site-info a {
   color: #fff;
}

Well, I’m jealous :-)) I spend 2 days trying everything and in 3 seconds you save me :-)))
A big big thank you

But (there is always a “but”) there is another problem,
go to this page : https://www.a-picture-from-switzerland.com/?page_id=104
the active page is Miroirs but as you can see, the 2 childs links are also in bold ! not only the active page
another example with the page Focales :
https://www.a-picture-from-switzerland.com/?page_id=4515

Replace what I gave you earlier with this:

.widget ul li.current_page_item a {
   background-color: white;
   border-left: 0;
}

.widget ul li.current_page_item > a {
   font-weight: bold;
}

This should only make the current page bold and not any of the sub pages.

works perfectly :-))
thanks a lot

just on this page : https://www.a-picture-from-switzerland.com/?page_id=164
where I have a list of all pages, I still have this Fuc@#&°) background blue color on the active page

That is because that page does not use the widget menu like the other pages. So modify the rules like this:

ul.wsp-pages-list li.current_page_item a,
.widget ul li.current_page_item a {
   background-color: white;
   border-left: 0;
}

ul.wsp-pages-list li.current_page_item > a,
.widget ul li.current_page_item > a {
   font-weight: bold;
}

?? perfect !!
may I ask you how to take off the thin dotted line in the right menu that appears under the names
https://www.a-picture-from-switzerland.com/?page_id=309
they are not very nice I think