SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast conorp's Avatar
    Join Date
    Feb 2007
    Location
    Australia
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,152
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)
    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
    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 -->
    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.

    As can be seen by looking at the wplancer site, the resulting mark-up is
    HTML 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>
    .....
    The CSS has
    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;
    	 }
    so that the text is still there and will show if images is off.

    BTW. the wplancer site has been compromised. If you downloaded your theme from that site you should run an AV/trojan/spyware scan ASAP.

  3. #3
    SitePoint Enthusiast conorp's Avatar
    Join Date
    Feb 2007
    Location
    Australia
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,152
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)
    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.
    HTML Code:
    <body>
    
    <div id="main">
    
    <div id="header">
    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 has
    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;
    	}
    The * is the "universal" selector and "resets" the padding and margin for those browsers that have various default values for those.
    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.

  5. #5
    SitePoint Enthusiast conorp's Avatar
    Join Date
    Feb 2007
    Location
    Australia
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    WordPress Freelancer banago's Avatar
    Join Date
    Dec 2006
    Location
    Vlorė, Albania
    Posts
    446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    BTW. the wplancer site has been compromised. If you downloaded your theme from that site you should run an AV/trojan/spyware scan ASAP.
    My site is clean now - I got read of those spam link in the footer - it was a pain though!
    WPlancer.Com - PHP & WordPress Developer
    ProverbHunter - English Proverbs Explained


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •