WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. gamemodo
    Member
    Posted 1 year ago #

    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

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  3. gamemodo
    Member
    Posted 1 year ago #

    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.

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    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).

  5. gamemodo
    Member
    Posted 1 year ago #

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

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  7. gamemodo
    Member
    Posted 1 year ago #

    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

  8. gamemodo
    Member
    Posted 1 year ago #

    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

  9. Andrew
    Forum Moderator
    Posted 1 year ago #

    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).

  10. gamemodo
    Member
    Posted 1 year ago #

    No luck :(

  11. Andrew
    Forum Moderator
    Posted 1 year ago #

    Try this in the Custom CSS area of the dashboard

    body .site {
     opacity: 0.6;
     /* Adjust 0.6 to the value you want */
    }
  12. gamemodo
    Member
    Posted 1 year ago #

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

  13. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  14. gamemodo
    Member
    Posted 1 year ago #

    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.

  15. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  16. gamemodo
    Member
    Posted 1 year ago #

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

  17. gamemodo
    Member
    Posted 1 year ago #

    IT WORKED WOOOOO HOOOO. It looks a bit messy but will need to get it looking right now. I would hug you if you was here. Thanks ever so much man. You rock squire.

  18. PatrickMcCarthy
    Member
    Posted 1 year ago #

    Andrew, Thanks very much-just stumbled onto this page. I've been playing with WordPress for a little over a month now. I like the Twenty Twelve theme, but a major complaint is that the "Background" is really more of a border and most of the page is white. Thanks to your suggestion above I've got a background that's really full screen and the site looks much more professional as a result. -

Topic Closed

This topic has been closed to new replies.

About this Topic