Changing theme colors in CSS

  • Resolved thisbecharlie

    (@thisbecharlie)


    11 years, 9 months ago

    Greetings, the website in question is at http://www.envisionmaine.org/summit

    I am having trouble using the free version of Minamaze. I would like to change the colors of the default ‘read more’ buttons on the homepage, plus the matching color of links being hovered over. I can’t find this stuff in theme options and i’m almost certain this is something only available in the paid version.

    That said I decided to take matters into my own hands and try to do this in either the stylesheet, or custom CSS field located under Theme Options. Thus far, my efforts to change the color in the stylesheet have been futile(trying to go from F33F3F to 232D84), my method being to look for this color in the stylesheet (ctrl + f) and then simply overwrite F33F3F with 232D84. Unfortunately, this has not worked no matter which part of the sheet I put it in(and I don’t notice changes around the site), and my conclusion has been that there is another .css file I may need to edit in order to make this happen.

    The alternative method would of course be to use the Custom CSS field. I have tried a few things here, but only managed to change the color of all links on the page using this:

    a { color: #232D84 !important; }
a:hover { text-decoration: underline !important; }
a:visited { color: #551A8B !important; }

    Unfortunately i’m not really sure how to tailor this such that it changes the colors of my ‘read more’ buttons to blue, highlights hovered-over links as blue, but also keeps my ‘read more’ text as white.

    The answer could be really simply, but i’m a novice to WP/CSS and as a result i’m not sure of the selector or call phrase i’m supposed to use here to overwrite the colors the theme has chosen.

    TLDR, can someone help me overwrite Minamaze’s button and link colors using CSS, or explain to me a better way to accomplish this? It could be that I missed an option somewhere, but i’m almost certain I have not.

    Thanks ahead of time.

Viewing 8 replies - 1 through 8 (of 8 total)
  • themeposter

    (@themeposter)

    11 years, 9 months ago

    Website is in under construction send me admin details.

    Thread Starter thisbecharlie

    (@thisbecharlie)

    11 years, 9 months ago

    View post on imgur.com

    Remembered the site is private due to a plugin. In case you’re looking for clarification, the highlighted areas are those i’m describing and want changed. The top menu bar is highlighted, since hovered over text matches the salmon color of each Read More button.

    dlnkprs

    (@dlnkprs)

    11 years, 9 months ago

    Hi,

    The best way to achieve a different background color for the ‘read more’ buttons is to add custom CSS. I’ve read that you’ve already tried that but it didn’t work out well. That’s because your custom CSS does not target the ‘read more’ buttons but all the text links in your content.

    To achieve a blue background on the buttons, place this code in the custom CSS field under Theme Options:

    .themebutton, button, html input[type=\"button\"], input[type=\"reset\"], input[type=\"submit\"] {
background: #232D84;
}
.themebutton:hover, button:hover, html input[type=\"button\"]:hover, input[type=\"reset\"]:hover, input[type=\"submit\"]:hover {
background: #3F4AA8;
}

    Notice this changes all buttons used in the theme. If you only want to target the ‘read more’ buttons you can use this code instead:

    a.more-link .themebutton {
background: #232D84;
}
.a.more-link .themebutton:hover {
background: #3F4AA8;
}

    Good luck with your site!

    Greetings,
    Dylan

    Thread Starter thisbecharlie

    (@thisbecharlie)

    11 years, 9 months ago

    Fantastic help Dylan.

    I will not soon forget this, your solution has worked perfectly and I appreciate you taking the time to write that out, I’ll try and learn more CSS so I can do this myself in the future.

    Thanks again.

    dlnkprs

    (@dlnkprs)

    11 years, 9 months ago

    You’re welcome!

    I noticed a dot before a.more-link which doesn’t belong there (can’t edit my previous post so here is the code without the dot):

    a.more-link .themebutton {
background: #232D84;
}
a.more-link .themebutton:hover {
background: #3F4AA8;
}
    rooshendriks

    (@rooshendriks)

    11 years, 2 months ago

    I had found out this already by myself, but it didn’t work. I tried it again with the code you offered here, but it still has no effect. The buttons are still red (#F33F3F). What can be the reason?

    Below you see the inline css:

    <style type=”text/css”>
    body {
    font-family: georgia,\"times new roman\",times,serif;
    font-size: 16px;
    }
    #pre-header {
    background: #00529b;
    }
    #pre-header-search .search {
    background-color: #FFFFFF;
    }
    .themebutton, button, html input[type=\"button\"], input[type=\"reset\"], input[type=\"submit\"] {
    background: #232D84;
    }
    .themebutton:hover, button:hover, html input[type=\"button\"]:hover, input[type=\"reset\"]:hover, input[type=\"submit\"]:hover {
    background: #3F4AA8;
    }
    .wpcf7-form input {
    width: auto;
    }
    </style>

    thanks in advance

    WPyogi

    (@wpyogi)

    11 years, 2 months ago

    @rooshendriks – please start your own thread if you need help. Here:

    https://ww.wp.xz.cn/support/theme/minamaze#postform

    You also need to post a link to your site for CSS help.

    linburnlane

    (@linburnlane)

    11 years, 1 month ago

    I changed my “Read more” buttons to blue by adding this to my child theme’s style.css

    .themebutton { background: #0c5eba; }

a.themebutton { color: #FFF; }

.themebutton:hover { background: #333; }
Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Changing theme colors in CSS’ is closed to new replies.