Change Accent Colors on Arcane Theme

  • Author
  • #3227783



    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



    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:

    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:

    If you were to use all of the above, you should get this effect:

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



    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?



    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! :)



    Awesome! That did the trick.

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



    No problem, happy to help. :)

The topic ‘Change Accent Colors on Arcane Theme’ is closed to new replies.