Change Accent Colors on Arcane Theme

  • Author
    Posts
  • #3227783

    jesspendley
    Member

    Hi,

    I reached out on the theme support forum, but haven’t received an answer, so I was hoping I could get some advice here.

    There are several sections on my site (buttons, horizontal lines, etc) that are all the same red color. I’d like to change the color of all of these accent items to something other than red, but I’m having a hard time tracking down a way to do that.

    Any ideas?

    Thanks for your time.

    The blog I need help with is undergroundoracle.com.

    #3227949

    torres126
    Member

    Hi there,

    Sure thing, this is something which you can do with CSS on the Premium or Business Plan.

    You’ll notice I’ve used different colours (mainly purple and green) as an example, but you can update the HEX code to whatever suits your needs: https://www.w3schools.com/colors/colors_picker.asp

    In order to change the horizontal lines, please use the following code. This will make them purple.

    .page-header:after, .sf-menu>li>a:after, .widget .widget-title:after {
    background: #800080;
    }
    
    .site-info {
    border-top: 6px solid #800080;
    }

    For the buttons that are currently red, please use the following CSS to turn them green:

    .search-control-wrapper a, .search-control-wrapper a:visited, .search-form .search-submit, button, input[type=button], input[type=reset], input[type=submit] {
    background: #008000;
    }

    The “FOLLOW” button uses a border as a different colour for a nice effect. You can choose to have this with other colours if you want, or you can just use the same HEX code as above.

    To demonstrate this, I’m using bright colours (yellow and white).

    button, input[type=button], input[type=reset], input[type=submit] {
    border: 1px solid #FFF825;
    border-bottom: 3px solid #BFCEC8;
    }
    

    You can add CSS in your Site Customiser: https://en.support.wordpress.com/custom-design/editing-css/

    If you were to use all of the above, you should get this effect: https://prnt.sc/lrpdcj

    Let me know if that doesn’t work for you, or if you have any further questions or issues. :)

    #3229447

    jesspendley
    Member

    Hi @torres126,

    Thanks so much for your super quick reply!

    That worked wonderfully. I just had one more question if you don’t mind. I’ve been tinkering with this since last night to see if I could do it on my own, but I didn’t crack it. How would I change the buttons, links, etc on hover?

    #3229709

    torres126
    Member

    Ah, I forgot about those! Sure thing, you can do that with CSS too. I’m using light green as an example for these.

    For the buttons:

    .search-control-wrapper a:hover, .search-form .search-submit:hover, button:hover, input[type=button]:hover, input[type=reset]:hover, input[type=submit]:hover {
    background-color: #83FF25;
    }

    For links:

    a:hover {
    color: #83FF25 !important;
    }

    If you’re looking to change anything else, let me know! :)

    #3231779

    jesspendley
    Member

    Awesome! That did the trick.

    Thanks so much for all of your help @torres126. You rule!

    #3232079

    torres126
    Member

    No problem, happy to help. :)

You must be logged in to reply to this topic.