Need help? Check out our Support site, then


Adelle Theme - Changing ALL colors

  1. michellegardner
    Member

    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.

  2. Here's the link to the Adelle stylesheet for you.

  3. 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.

  4. 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

  5. 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.

  6. thanks very much for the help!

  7. 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?

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

  9. michellegardner
    Member

    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? -

  10. @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.

  11. @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.

  12. origininteriors
    Member

    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

  13. origininteriors
    Member

    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 http://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

  14. fabianapsimoes
    Staff

    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.

  15. fabianapsimoes
    Staff

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

  16. origininteriors
    Member

    Hi Fabian,

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

    You're awesome!

    Thanks, Siobhan

Topic Closed

This topic has been closed to new replies.

About this Topic