Changing Colors

  • I customize the background color of certain doorpages by entering additional CSS like:

    
body.page-id-XXX {
background-color: #123456; 
}

body.page-id-XXX a:hover {
background-color: #654321; 
}

    This way I want to make an exception for the footer, as the color changes do not always work out well with the social icons. I tried some different lines, but it I can’t get it to run.

    Any ideas what I have to add so I can determine the footer color separately? (Don’t say “Customize templates in block editor”, because something with the themes primary color then messes around with the whole site.)

    • This topic was modified 1 year, 12 months ago by drikkes.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hello there,

    You could try: 

    
footer.wp-block-template-part {
    background: red;
}

    Per page it would be: 

    
.page-id-26 footer.wp-block-template-part {
    background: red;
}
    Thread Starter drikkes

    (@drikkes)

    Sorry, if this wasn’t clear: I meant to change the hover color in the footer, not the background color. Because when I use your code suggestion, even with a red footer the social icons turn to white squares when hovering over them. Same as with blue now.

    I’d probably suggest using the same CSS you have before, but making sure the social links especially are excluded, using a :not pseudo-selector:
    https://developer.mozilla.org/en-US/docs/Web/CSS/:not

    Something like this, for example:

    
body.page-id-26 a:not(.wp-block-social-link-anchor):hover {
  background-color: #ffffff;
}

    I can’t guarantee it’d work perfectly as sometimes these things work OK in the browser preview and not so much in the Customizer, but it’s worth a try.

    Thread Starter drikkes

    (@drikkes)

    Thanks for trying, but that doesn’t work. The social icons still turn to white squares, when hovering over them. My understanding of programming is very limited. Maybe it has something to do with the quote “Links in containers with the primary background color get special treatment” in the style.css, because I think that’s what blue is here.

    But even if a code snippet would override the white hovering with the theme’s default one, that won’t win much – in fact, it’ll be even worse: Default hover is blue, so one this blue page, there won’t be an effect at all.

    I guess I have to live with the white squares in the footer. Or ditch blue as background color and only use red, green and yellow for it.

    • This reply was modified 1 year, 11 months ago by drikkes.

    It does seem to be a bit tricky to target. I had another look at the CSS and I was wondering if this could work:

    
body.page-id-26 a:not(.wp-social-link a):hover {
  background-color: #ffffff;
}

    The other alternative could be to instead change your CSS so that it explicitly targets only links within your main content. It looks like you assigned a class .e-content to that area – could this work instead?

    
body.page-id-26 .e-content a:hover {
background-color: #ffffff;
}
    Thread Starter drikkes

    (@drikkes)

    Thanks for trying, Sophie, but unfortunately they do both not work. That’s not a real problem, don’t bother much. I could live with the social icon disappearing into white squares at the end of blue pages or I could use other backgroung colors like red or green. I just thought it would be fun to completely invert the white/blue from the starting page.

    I did not assigned any classes myself. As said, I’m not a coder. Just found these code snippets somewhere on the web after I did not make progress with the block editor. The Loudness theme seems quite new, and I like it a lot – it’s bold and fast. The minor hassles are worth it.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Changing Colors’ is closed to new replies.