WordPress.org

Forums

Earth Pro
Help customization (21 posts)

  1. xoxixox
    Member
    Posted 11 months ago #

    Hello,
    I have installed and try to make adjustment on your theme Earth Pro but I have a technical question,
    i can't find a way to change the take off the blue color that is on a link in my left menu when the page is active ???? and all the sub page ? I try everything, but can't find where is hiden this option.
    see : http://www.a-picture-from-switzerland.com/?page_id=73
    it's even more obvious in the page "focales"
    best regards
    Laurent

  2. jzonewarrior
    Member
    Posted 11 months ago #

    I also have the same question as Laurent - thank you

  3. jzonewarrior
    Member
    Posted 11 months ago #

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

  4. xoxixox
    Member
    Posted 10 months ago #

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

  5. CrouchingBruin
    Member
    Posted 10 months ago #

    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?

  6. jzonewarrior
    Member
    Posted 10 months ago #

    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.

  7. CrouchingBruin
    Member
    Posted 10 months ago #

    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.

  8. xoxixox
    Member
    Posted 10 months ago #

    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.

  9. CrouchingBruin
    Member
    Posted 10 months ago #

    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.

  10. xoxixox
    Member
    Posted 10 months ago #

    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 :
    ....

  11. CrouchingBruin
    Member
    Posted 10 months ago #

    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;
    }
  12. xoxixox
    Member
    Posted 10 months ago #

    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 : http://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 :
    http://www.a-picture-from-switzerland.com/?page_id=4515

  13. CrouchingBruin
    Member
    Posted 10 months ago #

    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.

  14. xoxixox
    Member
    Posted 10 months ago #

    works perfectly :-))
    thanks a lot

    just on this page : http://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

  15. CrouchingBruin
    Member
    Posted 10 months ago #

    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;
    }
  16. xoxixox
    Member
    Posted 10 months ago #

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

  17. CrouchingBruin
    Member
    Posted 10 months ago #

    .widget ul li {
       border-bottom: 0;
    }
  18. CrouchingBruin
    Member
    Posted 10 months ago #

    If you learn to use a web debugging tool like Firebug or Chrome Developer Tools, you will be able to see what CSS rules affect each element, and then write your own overriding rules.

  19. xoxixox
    Member
    Posted 10 months ago #

    Now I have exactly what I wanted, again thank you a lot,
    I will try those program you mentioned
    My knowledge are still at the time of "frames" and it is the first time I use WordPress
    I bought the theme Avada but it is so complicated for me that I gave up, and this theme Earth Pro is much more simple.
    Thank you for your help ;-)

    Laurent

  20. jzonewarrior
    Member
    Posted 8 months ago #

    I'd like to remove some of the left padding from the sidebar because 300 x 250 google ads are being cut off. How can I do that? Thank you!

    Site is
    fromanobody.com

  21. CrouchingBruin
    Member
    Posted 8 months ago #

    @jzonewarrior, the tricky thing is that the main content area and the sidebar widths are set as a percentage. Just removing the padding isn't going to help, because as the user shrinks the screen width, the width of the sidebar will shrink proportionally, possibly (probably) under 300px. If you just try setting the minimum width of the sidebar to 300px (min-width), the sidebar will wrap below at screen widths of 1110px. Since you need at least 300px to display the Google ads, you'll need to convert those percentage widths to fixed pixels and use media queries to adjust the widths at different viewport settings. For example, you can give this a try:

    #secondary {
       /* Set width to 300px to fit Google ads */
       width: 300px;
       padding: 0;  /* remove padding so ads fit */
       float: left;
    }
    #primary {
       /* since enclosing content div is 1100px, 1100-300 = 800 */
       width: 800px;
    }
    /* The following adjusts the main content area (primary) depending upon the screen width */
    @media screen and (max-width: 1200px) {
       #primary {
          width: 600px;
       }
    }
    @media screen and (max-width: 940px) {
       #primary {
          width: 500px;
       }
    }
    @media screen and (max-width: 840px) {
       #primary {
          width: 400px;
       }
    }
    @media screen and (max-width: 767px) {
       #primary {
          width: auto;
       }
       #secondary {
          width: auto;
       }
    }

    Remember my warning in a post above about using either a child theme or a CSS plugin to add CSS rules if the theme does not have a Custom CSS option. If you edit the theme files directly, your changes will be lost if/when the theme is upgraded.

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.