WordPress.org

Ready to get started?Download WordPress

Forums

transparent background for pages (6 posts)

  1. ferdri3
    Member
    Posted 2 years ago #

    Hi everyone,

    I was wondering how to get a transparent background for pages only (so not posts)

    I changed the wrapper value but that makes everything (pages, posts, etc) transparent.

    any id or class I could change in a Twenty Ten childtheme to make this happen?

    Kind regards

  2. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    Twenty Ten uses body_class() so every page would have a css class in the body tag of .page, while a single post would have .single, other web pages will have something else;

    http://codex.wordpress.org/Function_Reference/body_class

    example:

    .page #wrapper { background: transparent; }

  3. ferdri3
    Member
    Posted 2 years ago #

    Thanks alchymyth that worked perfect!

    Another question, now I see that in my posts even the header gets a colored background. I build this childtheme with
    #wrapper: { background: transparent; }
    so I totally forgot that it covered the whole webpage.. anything I can about that?

    PS. for others asking the same (first - on top of this page) question:
    add
    .page #wrapper { background: transparent; }
    to your childtheme's css file

  4. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    even the header gets a colored background ... it covered the whole webpage

    to get a transparent header while keeping a background on the content, try to add a background to #main:

    #wrapper{background:transparent;}
    #main{background:#fff;}

    for more detailed questions, you might need to post a link to your site.
    or you could try working with a tool such as Firebug http://getfirebug.com/ to investigate the styles.

  5. ferdri3
    Member
    Posted 2 years ago #

    I use "inspect element" in google chrome, which works kinda the same as firebug.

    The code you gave me worked perfect! Thanks a lot!

  6. ferdri3
    Member
    Posted 2 years ago #

    EDIT:

    #main { background: #fff; }
    .page #main { background: transparent; }

    Is perfect

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.