Forums

amkane01

We need to put a new logo on our site as our header, but I can't get the new image to appear! A company created a custom CSS Sheet, so it isn't like most of the coding on help pages. If I replace the link with the new picture link, they only leave a blank space. Below is how the page is coded. Can anyone help? If you go to www.roemerind.com, I want to change the logo and coloring at the top.

/* Theme Name: Roemer Industries Author: Page One Web Solutions */

  html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }  
  a:active, a:focus {outline:none;}
  label {cursor:pointer;}

  html {background:url(images/body.jpg);}
  body {background:url(images/header.jpg) repeat-x; font-family:Arial, Helvetica, sans-serif;}
  h1 {font-size:20px; color:#277580; font-weight:normal; border-bottom:1px solid #dde9eb; padding:22px 0 5px 0; margin-bottom:15px;}
  h2 {font-size:18px; color:#3c8892; font-weight:normal; border-bottom:1px solid #3c8892;}
  h3 {font-size:14px; font-weight:bold; color:#277580; border-bottom:1px solid #dde9eb; padding-bottom:3px; margin-bottom:5px;}
  h5 {font-size:18px; font-weight:bold; color:#277580; padding-bottom:1px; margin-bottom:5px;}

  #header {height:87px;}
  #head {background:url(images/head.jpg) no-repeat; height:56px; width:919px; margin:0 auto;}
  #head a {text-indent:-6666px; display:block; width:250px; height:56px;}

  #topnav {height:31px; width:950px; margin:0 auto; }
  #topnav span {float:right; color:#FFF; font-size:18px; font-family:Verdana, Arial, Helvetica, sans-serif; position:relative; right:33px; top:6px; font-weight:normal;}
  #topnav ul {padding-left:15px;}
  #topnav li {float:left; list-style:none;text-indent:-6666px;}

  #topnav a {background:url(images/topnav.jpg) no-repeat; display:block; height:31px; }
  #topnav a.home {background-position:0px 0px; width:73px;}
  #topnav a.home:hover {background-position:0px -31px;}
  #topnav a.products {background-position:-73px 0px; width:89px; }
  #topnav a.products:hover {background-position:-73px -31px;}
  #topnav a.materials {background-position:-162px 0px; width:97px;}
  #topnav a.materials:hover {background-position:-162px -31px;}
  #topnav a.processes {background-position:-259px 0px; width:101px;}
  #topnav a.processes:hover {background-position:-259px -31px;}
  #topnav a.services {background-position:-360px 0px; width:89px;}
  #topnav a.services:hover {background-position:-360px -31px;}
  #topnav a.quality {background-position:-449px 0px; width:79px;}
  #topnav a.quality:hover {background-position:-449px -31px;}
  #topnav a.about {background-position:-528px 0px; width:93px;}
  #topnav a.about:hover {background-position:-528px -31px;}
  #topnav a.contact {background-position:-621px 0px; width:88px;}
  #topnav a.contact:hover {background-position:-621px -31px;}
  #topnav a.phone {background-position:-800px 0 px; width:120 px;}
  #topnav a.phone:hover {background-position:-800px -31px;}

  #content-top {background:url(images/content-top.jpg) right no-repeat; width:929px; height:12px; margin:0 auto; }
  #content {background:url(images/content.png) right repeat-y; width:929px; margin:0 auto; }

kevinvance

@amkane01 I'm actually not seeing the part that's controlling that image anywhere in this stylesheet. I inspected the page real quick, and the part I think you're wanting to change (the logo and the text that says "We Make It Right, We Make It On Time") is a background image of #header, and the image file is called masthd.png. I don't see that file name anywhere in the stylesheet you showed.

There must be another .css file that is controlling this. (Unless I'm too late, and you already figured it out, and the file I'm seeing is the one you just changed it to. In that case...nevermind)

treehouse : what would you like to learn today?

Forums

Changing Header in Custom CSS Wordpress