| SitePoint Sponsor |
Wordpress question
Hey everyone, I lately have been messing around with a wordpress skin and i want to know how I can remove the text in the header and replace it with an image. Here is an example http://www.wplancer.com/.
Here is the skin
http://img527.imageshack.us/img527/816/72748715lj9.gif
Conorp
EDIT
Also,
How do i make the whole background black, i know the code is #000000 but i don't know where to put it.
Last edited by conorp; Dec 6, 2008 at 20:44.
You can specify the background-color in the wp-content/themes/[theme name]/style.css file.
If you look in the theme's header.php file, you should see something like
This is what you need to change. Just make sure you provide a text alternative to the image for those with no images enabled. And I'm not sure how this would affect the SEO, as bots read text, not images.PHP Code:<div id="header">
<h1 id="blog-title"><a href="<?php echo get_option('home') ?>/" title="<?php bloginfo('name') ?>" rel="home"><?php bloginfo('name') ?></a></h1>
<div id="blog-description"><?php bloginfo('description') ?></div>
</div><!-- #header -->
As can be seen by looking at the wplancer site, the resulting mark-up is
The CSS hasHTML Code:<div id="header"> <div id="logo"> <h1> <a href="http://www.wplancer.com"> <img src="http://www.wplancer.com/wp-content/themes/wplancer/img/logo.png" alt="WordPress Freelancer" border="0" /> <span>WordPress Freelancer</span> </a> </h1> </div> .....
so that the text is still there and will show if images is off.Code CSS:#header{ overflow: hidden; } #logo{ float: left; } H1 { margin: 0; padding: 0; } H1 span{ font-size: 10px; display: none; float: left; margin: 0; padding: 0; }
BTW. the wplancer site has been compromised. If you downloaded your theme from that site you should run an AV/trojan/spyware scan ASAP.
Thank you Mittineague.
I was able to implement my logo into the page, but i can not see where i can change the main colour of the page. I understand that it is in the style.css file but there is so many different colour tags in theme that i cant find the right one. Could you please tell me what the tag that needs to be changed is called.
Thanks again
Conorp
So you are using the wplancer theme? The page of course has the html and body tags, and the contents are wrapped by a div with the id "main". Then there are other tags nested inside that.
The C of CSS stands for cascading. That means that subsequent selectors may inherit previous rules specified for "wrapping" elements. And if the inner tags have different rules, they may over-ride the previous rules. CSS is an art and can be tricky so save a backup copy of the CSS file in case you mess things up. The CSS file hasHTML Code:<body> <div id="main"> <div id="header">
The * is the "universal" selector and "resets" the padding and margin for those browsers that have various default values for those.Code CSS:*{ padding: 0; margin: 0; } body { font: normal 13px Georgia ; color: #505050; background: repeat-y url("img/bg.png") top center; } ....... #main{ width: 944px; margin: 8px auto; }
You can try giving body a background-color instead of the background image.
And try giving #main a background-color, although some browsers show a "space" between the body and the content, so the body is probably a better choice.
Hello again.
First off, I wasn't using the wplancer theme, I was just using it as an example. Secondary, although the theme was slightly different I got the main idea of how to do it from you. I thankyou for this.
I simply added
Code CSS:body { margin: 0; padding: 0; background-color:#000000
Thanks for the help
Conorp
My site is clean now - I got read of those spam link in the footer - it was a pain though!BTW. the wplancer site has been compromised. If you downloaded your theme from that site you should run an AV/trojan/spyware scan ASAP.
Posting Permissions
Bookmarks