How to change the theme color?

  • Unknown's avatar
    freshfilmsgouda · Member ·

    Hi!

    I need some help with finding an way to change the colors of my theme. The color i’m talking about is not the background color, but the color you see when you hover above my portfolio grid and on some buttons/text.

    This is the color code: #499A86.

    I would like it to match my company color: #4392CD.

    Hopefully someone here can help me.

    Thanks!

    Daan

    The blog I need help with is: (visible only to logged in users)

  • staff-zinnia · Staff ·

    Hi –

    Can you tell me the exact buttons and text that you want changed to #4392CD ?

    Here is the CSS code to change the hover on the portfolio. 

    {
.project .entry-text
background-color: #4392CD;
}
  • Unknown's avatar
    garysixtyeight · Member ·

    Hi there,

    There’s a couple of issues with the CSS posted in the previous comment which will prevent it from working. The opening bracket is in the wrong place and it doesn’t target the hover state.

    For the hover colour on portfolios, please try using:

    .project:hover .entry-text {
    background-color: rgba(67, 146, 205, 0.8);
}

    I’ve used rgba rather than a solid hex colour to maintain the opacity.

  • Unknown's avatar
    gemmacevans · Member ·

    @garysixtyeight — thanks for tweaking the CSS, staff-zinnia said to pass on her thanks :)


    @freshfilmsgouda     — the code above can be pasted in to My Sites > Customise > CSS, underneath what is already there.

  • Unknown's avatar
    freshfilmsgouda · Member ·

    @garysixtyeight – thanks for the help and the code! it works fine :)


    @gemmacevans     / staff-zinnia – Thanks your help! The buttons / text I was talking about where the text below the ”Riverdale Festival 2018” :

    – Continue reading →.
    – the search bar icon color.
    – the send button on the contact page (send=versturen).

    Thanks in advance!

    Daan

  • Unknown's avatar
    garysixtyeight · Member ·

    Please check if the Custom Colours feature in the customizer allows you to change the main accent colour from green to blue:

    https://en.support.wordpress.com/custom-design/custom-colors/

    If the colours can’t be changed with that feature, please let me know, and I’ll post the CSS for it.

  • Unknown's avatar
    freshfilmsgouda · Member ·

    @garysixtyeight The custom colours feature won’t let me change my main accent but only changes my background color.

    If you can post the CSS that would be great!

  • Unknown's avatar
    wpx2 · Member ·

    Hi @freshfilmsgouda

    Here are the CSS codes that will do the trick for each part you needed changed.

    For – Continue reading →

    .entry-summary .more-link {
    color: #4392CD;
}

    For The search bar icon color, the send button on the contact page (send=versturen) and all the buttons across your website

    button, input[type=submit], input[type=reset], input[type=button], .button, .button-minimal {
    background: #4392CD;
    border: 1px solid #4392CD;
}

    I hope this helps :)

  • Unknown's avatar
    garysixtyeight · Member ·

    There’s some additional elements that need to be styled, like the portfolio tags and post navigation links. The hover states for those items also needs to be changed.

    The CSS below should cover most of them. If it doesn’t, please let me know.

    .button-minimal:hover,.main #infinite-handle span,.page-links a:hover,.pagination .current,.pagination a:hover,.post-tags a:hover,.widget_tag_cloud .tagcloud a:hover,reply a:hover,sticky-post {
    background:#4392CD;
}

::-moz-selection {
    background:#4392CD;
}

::selection {
    background:#4392CD;
}

a, .navigation a:hover .post-title {
    color:#4392CD;
}

.button,.button-minimal,button,input[type=button],input[type=reset],input[type=submit] {
    border:1px solid #4392CD;
    background:#4392CD;
}

.button-minimal:hover {
    border-color:#4392CD;
}

.comment-metadata a:hover,.portfolio-entry .more-link,.portfolio-entry .more-link:hover,body #infinite-footer .blog-credits a {
    color:#4392CD;
}

.reply a {
    border:1px solid #4392CD;
}

/* Change the hover and focus states for buttons to a slighter darker blue */
 
button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, .button:hover, .button-minimal:hover, button:focus, input[type=submit]:focus, input[type=reset]:focus, input[type=button]:focus, .button:focus, .button-minimal:focus {
    background: #0e74b2;
    border-color: #0e74b2;
}
  • Unknown's avatar
    freshfilmsgouda · Member ·

    @garysixtyeight Thanks for all the CSS! You helped me a lot! It works just fine.

  • Unknown's avatar
    garysixtyeight · Member ·

    You’re welcome, glad we could help :)

  • The topic ‘How to change the theme color?’ is closed to new replies.