Arcane theme: Changing spot color

  • hithorpe · Member ·

    I’m using Arcane theme. The theme defaults to using a red color (specifically f24444) for certain elements, including the search button and the “Read More” button. I would like to change this color to one that matches my logo in all occurrences. Is that possible?

    Thank you! And please forgive any confusing language/descriptions, I’m quite new at this.

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

  • pauloeaquino · Staff ·

    Hi @hithorpe,

    Yes, it’s possible to add custom colors. To do so, you would need access to Custom CSS, a feature only available to Premium or Business WordPress.com plans.

    From there, you would then, for example, be able to edit and the change colors of the search button or the “Read More” button with the following code like so:

    /* Search Button */

    .search-submit {
    background: #ff4401;
    }

    /* Read More Button */

    .more-link {
    background: #ff4401;
    border-bottom: 3px solid #fff;
    }

    Here are some related links to the info mentioned above:
    Premium / Business Pricing Plans
    https://wordpress.com/pricing/
    Custom CSS
    https://en.support.wordpress.com/custom-css/
    Arcane Theme Support Forum
    https://premium-themes.forums.wordpress.com/forum/arcane

  • hithorpe · Member ·

    Hi! Thanks, this is great.
    I have a Premium account so I can edit CSS. I didn’t know there was a forum all about the Arcane theme – that’s very helpful, thank you!

    And the code was effective in changing the “Read More” button – I am wondering if there is a way to tell the stylesheet to replace all instances of f24444 to ff4400?

    Thanks again!

  • pauloeaquino · Staff ·

    Glad to help :)

    If you had access to the theme’s main stylesheet, you would be able to find & replace things like the color codes. Unfortunately, external files and CSS stylesheets aren’t provided with WordPress.com themes.

    You would need to inspect the items you want to change on your site individually and change the CSS accordingly.

    If your comfortable, try this out.

    In your browser (I recommend Google Chrome), right click on any element, then click “Inspect” or “Inspect element”. This will bring up the developer tools in the your browser.

    Here you will be able to see the HTML, CSS, and Box Model for the element you just inspected. You can then edit any of the CSS and see the changes live.

    See example screenshot here:
    https://peaeb.files.wordpress.com/2017/08/giphy.gif

    To easily identify which elements have color that can be applied to, skim through the CSS and find the color picker box, click it, and try changing the color. If the change is what you wanted, then you would simply copy and paste that same code into the WordPress Customizer CSS tab.

    If there’s no change in color, then that just means you’re inspecting the wrong element and you should probably click on or around that area to find what you want.

    It takes some playing around with, but hopefully this will help you out later on.

  • The topic ‘Arcane theme: Changing spot color’ is closed to new replies.