WordPress.org

Support

Support » Themes and Templates » [Theme: Twenty Twelve] How do I add transparency and centre header image?

[Theme: Twenty Twelve] How do I add transparency and centre header image?

  • Hi Folks,

    I’m new to wordpress so bare with me please. I run a video game website called Game-Modo and in the process of moving all content from Blogger to our own wordpress site.

    I have 2 questions that I’ve been struggling to find answers for.

    1. How do I centre the heading image at the top of the site and
    2. How do I make the main white part of the site (that sits on top of the grey) partly transparent?

    The website link is http://www.game-modo.co.uk

Viewing 15 replies - 1 through 15 (of 17 total)
  • I’m new to wordpress so bare with me please.

    Not to worry, these aren’t WordPress issues.

    Here’s how to centre things in CSS http://www.w3.org/Style/Examples/007/center.en.html

    Here’s how to add CSS opacity
    http://css-tricks.com/css-transparency-settings-for-all-broswers/

    Use Twenty Twelve’s Custom CSS option in the dashbord to hold your CSS modifications.

    Ok ive tied this and im kinda lost. 🙁 Im not so clued up on CSS. My main issue is finding where the heading image is located so I can centre it (it surely cant be that complex, right?). Seems really complex. Maybe I’m looking at this wrong 🙁

    Also the transparency guide doesn’t help. I only really want to make the white part of the site (that sits on top of the grey) partly transparent, but have no idea how to do this as I cant find out where the part of the site is.

    Sorry, as stated im kinda a noob at all this.

    Try Google Chrome’s Developer tool for this sort of explorative CSS work. You can expose underlying CSS and HTML structure by right clicking on a webpage and selecting ‘Inspect element’ (within Google Chrome).

    Ive figured out how to centre the header image, just the transparency now man.

    If you have an issue of other page elements incorrectly inheriting the CSS opacity applied, instead apply a background image of the opacity you want.

    Its not the background I need to change though, its the white section of the page, the page that contains the content.

    This is my site

    Its not the background I need to change though, its the white section of the page, the page that contains the content.

    This is my site http://www.game-modo.co.uk

    Okay, I would then try applying CSS opacity to the highlighted HTML element here http://snag.gy/wGaNZ.jpg (found with Chrome’s Developer tool).

    No luck 🙁

    Try this in the Custom CSS area of the dashboard

    body .site {
     opacity: 0.6;
     /* Adjust 0.6 to the value you want */
    }

    Allmost but its having this effect (check the site its all gone transparent) only the white area needed to be transparent.

    Yeah, I thought that was going to happen.
    Try my previous suggestion of;

    If you have an issue of other page elements incorrectly inheriting the CSS opacity applied, instead apply a background image of the opacity you want.

    Arghhhhh so sorry about this but I cant find a way to change the white bit into an image, it lets me change the grey bit. You have been really helpful so far by the way.

    Try using the background CSS property;

    body .site {
     background: url("/wp-content/themes/path-to-image/image.png");
    }

    The image need only be 1px by 1px, it can be repeated.

    Thanks man. You sir are a legend. Will give this a go now and report back, I o you a beer man.

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘[Theme: Twenty Twelve] How do I add transparency and centre header image?’ is closed to new replies.