Support » Themes and Templates » [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)
  • Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    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.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    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.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    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

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    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 🙁

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    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.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    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.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    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.