Framing the text in the About section

  • Author
    Posts
  • #1363142

    imveryape
    Member

    Hi there,

    I am wondering how to do the CSS code for framing the “About” content much like I have done for the archives. So I can have the content untouched by the background image. I was also wondering how I could make the background for the content black, and then make the content and menu, and all text that would be impossible to see against the black, turn it white.

    Thanks,

    Chris

    The blog I need help with is imveryape.com.

    #1363226

    jeffwelston
    Member

    Hi Chris,

    Here’s what’s happening: your content is in a 900px wide container on all your pages. The archives have a background-color set (white) and the About page doesn’t, so it’s transparent. You can make it black with this (kinda long) code:
    .page.page-id-2-page-template-default.logged-in.admin-bar.no-customize-support.custom-background.typekit-enabled.single-author.mp6.highlander-enabled.highlander-light #container {background-color: black;}
    If you inspect the body element on that page (let me know if you don’t know what that means) you see the crazy long class name on the body. If my code doesn’t work, check my class name against that for typos.

    #1363231

    jeffwelston
    Member

    You will see that your background image is probably not wide enough on that page though, so it may need some modifying.
    Also, do you want that entire area black? And just on the About page? We should clear that up before worrying about changing fonts.

    #1363236

    imveryape
    Member

    Thanks for the quick reply. Yes, it would just be for the About page. Would like to have that page a little different. Would the framing be the same dimensions as my archive page? That’s what I’m looking for.
    Ya, I’ll adjust the background picture so it fits better.

    Thanks again for all of your help

    #1363244

    imveryape
    Member

    I didn’t see any change after the code, I will check the body element (I think I know what that is).

    #1363258

    jeffwelston
    Member

    Yes, the About page has the same dimensions as the rest of the site.

    It looks like most of the text is still pretty legible on top of black. The a elements (hyperlinks) seem to be the biggest issue as they’re black. To change their color only on the About page, you will need to start the selector with that long class and then find the elements you want to change. Such as:
    .super.long.class #widgets a {color: white;}

    #1363359

    Hi jeffwelston, thanks for helping! One quick tip would be that you don’t need to have that super long class selector. Picking just one of the body classes, especially a unique one to the page, will work. For example, instead of starting with this:

    .page.page-id-2-page-template-default.logged-in.admin-bar.no-customize-support.custom-background.typekit-enabled.single-author.mp6.highlander-enabled.highlander-light

    You could start with this:

    .page-id-2

    The final example would look like this:

    .page-id-2 #container {
    	background-color: black;
    }
    .page-id-2 #widgets a {
    	color: white;
    }
    #1363367

    jeffwelston
    Member

    You beat me to it! I figured that out and was just going to correct myself.
    Thanks.

    #1363369

    jeffwelston
    Member

    I was thinking that it was a huge class name, not a string of classes.

    #1363370

    imveryape
    Member

    Thank you both for the help, that is awesome.

    #1363372

    @jeffwelston, body classes are crazy like that. :)

The topic ‘Framing the text in the About section’ is closed to new replies.