Adelle Theme – Changing ALL colors

  • Author
    Posts
  • #1313785

    I’m trying to change the link colors, the date colors and if possible, the social media icons colors in the Adelle theme. Thanks!

    The blog I need help with is fashionrollcall.wordpress.com.

    #1313882

    timethief
    Member

    Here’s the link to the Adelle stylesheet for you.

    #1314073

    mattwiebe
    Staff

    Hi Michelle, all those things can be done with CSS, but you’ll need to purchase the Custom Design upgrade first.

    Also, you might want to try the Custom Colors component of Custom Design, which makes changing your colors a matter of a few clicks. And if you don’t get the results you want, the CSS editor will let you get more specific.

    #1314081

    kcsteyn
    Member

    Hi,
    I am looking to change the colour of the main navigation banner bar, and while I can seem to change the central part of it, I cannot seem to change the two flag style edges.

    Is anyone able to help with the CSS code for those elements?

    Thanks

    #1314084

    To change the flag style edges behind the main menu in the Adelle theme, add this to your Appearance → Themes → Customize → CSS panel:

    @media screen and (min-width: 63.750em) {
    	.navigation-main:before,
    	.navigation-main:after {
    		border: 1.4em solid #c9caca;
    		content: "";
    		display: block;
    		position: absolute;
    		bottom: 0;
    		top: 0;
    		z-index: 1;
    	}
    	.navigation-main:before {
    		border-left-color: #fff;
    		border-right-width: 1.5em;
    		left: 0;
    	}
    	.navigation-main:after {
    		border-left-width: 1.5em;
    		border-right-color:#fff;
    		right: 0;
    	}
    }

    I used the #c9caca color code in this example, but you can change it out to something else if you would like.

    #1314086

    kcsteyn
    Member

    thanks very much for the help!

    #1314089

    hobnobnoor
    Member

    hi!

    thank you design simply – with your help I managed to add the CSS command for a similar issue mentioned above in my website http://letstrycreating.com/,however the two flag style edges in the main navigation bar are not the color i need.

    Can you help me with the color code for the ends of flag which would match with my background color?

    #1314090

    hobnobnoor
    Member

    I guess i figured it out, can you please check if I put the right code for color in the CSS please..:)

    #1314091

    I’m trying to change the menu background (with the flags on the end) in Adelle theme, but I can’t find the codes on the style sheet to do that. I’m working on a WordPress.org self-hosted site, does that make a big difference? –

    #1314092

    timethief
    Member

    @michellegardner

    I’m working on a WordPress.org self-hosted site, does that make a big difference? –

    Yes – different software – different version of theme.

    You are posting to the wrong support forum. WordPress.com and WordPress.org are completely separate and have separate logins. We provide support here in the CSS Forum only for those with free hosted WordPress.com blogs who have paid for the annually renewable custom design upgrade.

    If you don’t have a username account at WordPress.ORG click http://wordpress.org/support/ and register one on the top right hand corner of the page that opens, so you can post to the support forums there and receive advice from WordPress.ORG bloggers.

    #1314093

    @hbonobnoor, your code looks correct, but your color code is #87CEEB. Make sure you’re using the same color code for the flags as you are for the menu background.

    #1314094

    Hi designsimply,

    I’ve changed the links in the main body of text with this CSS –

    a,
    a:visited {
    color: #E82073;
    text-decoration: none;
    }
    a:hover,
    a:focus,
    a:active {
    color: #E82073;
    }

    But in my menu, the words ‘About’ (top nav) and ‘Artists’ (secondary nav) are highlighted all the time. It looks fine in the customize page but not on the normal homepage. How can I change this?

    Also I would like to change my search widget button colour as this didn’t change when I updated my colour scheme. What CSS should I use?

    Thanks! Siobhan

    #1314095

    Hello again,

    I managed to fix the issue with the navigation colours using

    .navigation-main a {
    color: #fff;
    display: block;
    font-size: 13px;
    padding: 1em;
    text-decoration: none;
    text-transform: uppercase;
    }

    But there are lots of other areas that have turned this colour #E82073 such as links in the blogroll, date and post titles.

    I would rather the ‘visited’ links were the colour they were supposed to be i.e. depending on whether they are a title, nav etc, but just want to make all hyperlinks this colour.

    I followed this thread https://en.forums.wordpress.com/topic/how-do-i-make-the-color-of-my-hyperlinks-uniform?replies=6

    Do I have to add the code for each section individually or is there a CSS code for hyperlink rather than visited I can use?

    Thanks, Siobhan

    #1314096

    Also I would like to change my search widget button colour as this didn’t change when I updated my colour scheme. What CSS should I use?

    Hi Siobhan, give this a try:

    #searchsubmit {
    background: #E82073;
    color: #000000;
    }

    The “color” property applies to the color of the text, and the “background” property applies to the color of the button. If you don’t want to change the color of the text, just remove the line with the “color” property.

    #1314097

    I’ve changed the links in the main body of text with this CSS

    If you want to change only the links in the body of your blog post, you can use this instead:

    .entry-content a, .entry-content a:visited {
        color: #E82073;
    }

    This will restrict the color change to the container that holds your posts’ text. To identify the container of an element, you can right click it the page and select the “Inspect Element” option. A panel showing your HTML will appear. Look through it until you find the container you wish to target with CSS. You can hover the code to see the element it represents highlighted in your page. Once you find the container you want, you can refer to it on the CSS using it’s id or class attribute.

    Do I have to add the code for each section individually or is there a CSS code for hyperlink rather than visited I can use?

    If you remove the snippet you inserted (the one changing all links to #E82073), I believe the code I just mentioned plus the following might do the trick for styling visited links.

    .tags-links > a, .cat-links > a, .comments-link > a {
        color: #544F4F;
    }

    With that, I think you can even remove the code to fix your navigation colors.

    Hope this helps :)

    #1314098

    Hi Fabian,

    Thanks so much for all your help. The CSS worked perfectly and it’s looking great now.

    You’re awesome!

    Thanks, Siobhan

The topic ‘Adelle Theme – Changing ALL colors’ is closed to new replies.