Change Color : Post Area, Side bar, Bottom bar… / Hemingway Rewritten Theme

  • Unknown's avatar
    samuelbourille · Member ·

    Hi again,

    I want to change the color of the differents areas in my Hemingway Rewritten Theme.

    I tried different code i found here and there but nothing worked.

    Do you have any clue to help me ?

    Thanks a lot for your precious help !

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

  • staff-happychia · Staff ·

    Change the color names to whatever you prefer to use and feel free to ask if you need to make any changes:

    body {
	background: pink;
}

.site-main {
background-color: gray;
}

.site-content .widget-area {
	background-color: yellow;
}

.site-footer {
background: green;
}
  • Unknown's avatar
    samuelbourille · Member ·

    Thanks a lot !

    Is there a way to get the areas a little bit larger to have marge around text content ?

    Another question would be : how do i change the background of my main blog title. I would even like to have a transparency on it….

  • Unknown's avatar
    samuelbourille · Member ·

    I found this : `.site-main {
    width: 500px;
    }`

    But i’m pretty sure this not going to fit and adapt different screen size ?

    If i put 100% it doesn’t work.

    And this is not answering my “marge” problem with the texte. I understantd it is a “marge” code that i have to add but what code… i’m going to search on it.

  • Unknown's avatar
    samuelbourille · Member ·

    And i found it :

    `.site-main {
    padding: 5px;
    }`

    Is this good ?

    Do you have any clue to enlarge the content widht keeping fitable to all screen size ?

  • staff-happychia · Staff ·

    You have two rules using the same site-main selector. You can merge them into one.

    I made the width 90% ( originally it was 80%) and margin-left to -13% (originally -5%).

    .site-main {
    width: 90%;
    background-color: #F1F1F1;
    padding: 15px;
    margin-bottom: 10px;
    margin-left: -13%;
    line-height: 1.3;
}

    Try this and let me know if you need anything else :-)

  • Unknown's avatar
    samuelbourille · Member ·

    Exact ! Thanks for your help.

    Would you know how to change color and background of the the header title ?

    Is it possible to put a transparency on a background color ?

  • staff-happychia · Staff ·

    Site title is not a text. It is part of your header image.

    So please edit your image to get the required style.

  • Unknown's avatar
    designsimply · Member ·

    Would you know how to change color and background of the the header title ?

    I checked http://lesventsnousportent.com/ and it looks like you’ve added text inside a semi-transparent box into the image directly:
    https://lesventsnousportent.files.wordpress.com/2015/03/cropped-lesventsnousportent-main41.jpg

    Because of the way you have set that up, you would need to change the header image itself and re-upload it to change the color and background of the main header text that says “LES VENTS NOUS PORTENT Un autre blog de voyage.”

    If you mean the post titles such as “COLOMBIA – De Cartagena à Capurgana” then you can change the color and background like this:

    .entry-title,
.entry-title a,
.entry-title a:visited {
	color: red;
}

.entry-title {
	background: pink;
	padding: 5px 15px;
}

    Or leave out the second rule for “.entry-title” to leave the background the same color as the rest of the post.

  • Unknown's avatar
    samuelbourille · Member ·

    Hi and thansk for your replies,

    The header image you see on my blog with my site title inside is a second choice i made because i couldn’t find a way to customize the box within the header to be transparent… Si uncheck the box to make it disapear.

    But my first choice would be to keep the box but make it transparent. (Default is black). Sorry for my english i’m not sure to make myself understand.

    Do you you have any suggestions ?

  • Unknown's avatar
    designsimply · Member ·

    I see. It helps very much to look at a specific example when working with CSS, so let’s look at the demo site for the Hemingway Rewritten theme to create an example:

    https://hemingwayrewrittendemo.wordpress.com/

    To change the color of the site title and tagline to black and the background to a transparent white, this CSS example should work:

    .site-branding {
    background: rgba(255, 255, 255, 0.52);
}
.site-title a, .site-description {
    color: #000;
}

    I also made a screencast showing how I figured out the CSS. :) It’s in English! But I think it will be easy to follow because it shows what’s happening on-screen too.

    https://cloudup.com/cwxI3lPPNgn (1m59s)

  • Unknown's avatar
    stealthflation · Member ·

    Can someone help me change the link color on the WP.com Hemingway Theme.

    I have the hexadecimal color code, and just need the actual command code line to insert in the CSS Stylesheet window.

    PLEASE HELP ME I’M CODE CLUELESS

    Thanks in advance brothers & sisters

  • Unknown's avatar
    designsimply · Member ·

    The basic CSS needed to change the link color in the Hemingway Rewritten theme would be something like this:

    a,
a:visited,
a:hover,
a:focus,
a:active,
.entry-title a:hover {
	color: red;
}

    And you would want to add it to your Appearance > Customize > CSS editor.

    Note that will not change the color of links you have manually set in the content area using the visual editor. For example, on this page http://stealthflation.org/ the link to “STEALTHFLATION” has been manually set to black in the HTML inside the post: https://cloudup.com/cPhMbP4z-gP and the CSS rule won’t change that, but you can change link colors like that one by editing the post and removing or changing the color using the tools in the post editor.

  • Unknown's avatar
    stealthflation · Member ·

    First of all thank you for your gracious assistance.

    Your words; “something like this” may not be enough for me, as I know zippo about coding. Think neanderthal like.

    Can you simply rite exactly what it should be, and tell me where to plug in the hexadecimal code. I will then place it directly in the CSS Stylesheet editor.

    I’m pretty clueless here, I will need a copy/paste format from you so as not to foul this up……….

    Merci mademoiselle….

  • Unknown's avatar
    stealthflation · Member ·

    I GOT IT! YOU’RE THE BEST!!

  • Unknown's avatar
    designsimply · Member ·

    > I GOT IT! YOU’RE THE BEST!!

    Nice. :)

  • Unknown's avatar
    samuelbourille · Member ·

    Designsimply, you are juste fantastic ! Did you do this video just for me ? With you tip I can imagine to be a little more autonomous and be faster to change what i want to change. It’s a priceless tip. Thanks a lot !

  • Unknown's avatar
    samuelbourille · Member ·

    By the way your code worked, but I don’t knwo why but it needed a #page to sel the color. If no i think it was ruled by another code, maybe the one that say to main-navigation to be white ?

    .site-branding {
    background: rgba(255, 255, 255, 0.7);
    }
    #page .site-title a, .site-description {
    color: #000;
    }

  • Unknown's avatar
    samuelbourille · Member ·

    Other question would be regading the main navigation :

    Exemple :

    I click on “Voyages” and when page is loaded it turns blue wich is what i want. With this code :

    #page .main-navigation .current-menu-item a {
    color: #0a7ce0;
    }

    But if i click on the sub-menu “Voyages/Colombia”, when page loaded blue’s gone and it’s white…

    Any clue ?

  • Unknown's avatar
    stealthflation · Member ·

    DesignsSimply,

    Hey superstar, any chance you could help me change the background color for quoted text fields. It’s only slightly lighter grey than the site’s general grey background color, and I sure would like to lighted it up if possible.

    Forever indebted…….

    Best,
    Bruno

1 2 3
  • The topic ‘Change Color : Post Area, Side bar, Bottom bar… / Hemingway Rewritten Theme’ is closed to new replies.