Posted 4 months 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
Posted 4 months 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.
Posted 4 months 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.
Posted 4 months 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).
Posted 4 months ago #
Ive figured out how to centre the header image, just the transparency now man.
Posted 4 months 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.
Posted 4 months ago #
Posted 4 months 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
Posted 4 months 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).
Posted 4 months ago #
No luck :(
Posted 4 months ago #
Try this in the Custom CSS area of the dashboard
body .site {
opacity: 0.6;
/* Adjust 0.6 to the value you want */
}
Posted 4 months ago #
Allmost but its having this effect (check the site its all gone transparent) only the white area needed to be transparent.
Posted 4 months 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.
Posted 4 months 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.
Posted 4 months 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.
Posted 4 months ago #
Thanks man. You sir are a legend. Will give this a go now and report back, I o you a beer man.
Posted 4 months 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.
Posted 1 month 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. -
You must log in to post.
