WordPress.org

1. Jayjerome
   Member
   Posted 5 years ago #

   Hurry with response, I'm almost out of aspirins!

   I want to replace the standard header on my site (at jayjerome.com) with my own photoshop image (same size banner, but with graphics and nicer fonts). I’ve read ALL the codex how-to info, and about an hours worth of threads on the topic here today. The more I read the more confused I’m becoming.

   To start, I’m using (Nerima Daikon 3c 0.1), which doesn’t have a header graphic image I can replace.

   Clarifying question 1: to insert a graphic header to replace the default header do changes have to be made to the STYLE.CSS, or to HEADER.PHP, or to both?

   For instance, I found this code in one of the codex threads:

   #headerimg { background: url('<?php bloginfo('stylesheet_directory'); ?>/images/personalheader.jpg') no-repeat top;}

   Can I use this? If so, where? (I’m assuming I change ‘personalheader.jpg to my own graphic file, correct?)

   Clarifying question 2: the graphic image I created to replace the #header there now is 760x105 pixels. On one of the codex posts it said “Dimensions should be at least 760px x 200px” Can I use the smaller size, and add padding or something to it?

   Clarifying question 3: if I insert a graphic header, do I have to remove the #header info from STYLE.CSS or any other file (height, margin-top, padding, color, etc)? Or do I leave that there? In the Codex I found this code:

   h1 {display: none; font-size: 150%; color: white....}

   which the codex writer said would keep the h1 info hidden, but allow search engines to pick up my blog name, etc. Do I need to use this? If so, where? And do I have to do anything else after that?

   By the way, Happy 4th of July to Everybody!!!! Oh, wait—those popping noises are not fire-crackers – must be my brain cells exploding trying to figure this out!!!

   JJ

2. doodlebee
   Member
   Posted 5 years ago #

   Why don't you upload your image to the theme, them in the CSS, change this:

   #header {
   height: 105px;
   margin-top: 20px;
   padding: 0px;
   color: #ffffff;
   background-color: #CCFFCC;
   border-left: groove 120px #CCFFCC
   }

   to this:

   #header {
   height: 105px;
   margin-top: 20px;
   padding: 0px;
   color: #ffffff;
   background-image:url("images/yourimage.jpg");
   background-repeat:no-repeat;
   }

   you can change the size, as well, in this very section. Adjust as needed.

3. Yosemite
   Member
   Posted 5 years ago #

   You're doing well... Lemme try those:

   do changes have to be made to the STYLE.CSS, or to HEADER.PHP, or to both? - Either one. Your example (above) is a line from a header.php file. It's often the case that a change is required in both areas: header.php for any 'heavy-lifting' and style.css for, well, style ;')

   the graphic image I created to replace the #header there now is 760x105 pixels - Make it any size you want... The codex reference concerned a specific theme where you wanted to 'fit' a pre-defined space. You don't have the same limitations.

   if I insert a graphic header, do I have to remove the #header info from STYLE.CSS or any other file (height, margin-top, padding, color, etc)? You might have to. This will be dependent on your theme. Not to worry, it's simple enough to comment out what you don't want, add what you do or just change what's there.

   I think the confusion is simply because there are a lot of different ways to achieve this. It's possible to do it all in style.css, or just in header.php.

   Many authors lean towards the header.php because it allows a lot more control for different environments. Note the php call to find the current path information in your example. They have to consider that their theme will be used in WP installs that have different structures/paths[/sub-directories]... You don't have to worry about that.

   Before you start: Your last post 'Valedictorian...' looks like it was cut and pasted from Word. It still contains Word formatting. It's not valid... And it's a good idea to make sure you're valid before making changes as it makes troubleshooting a hell of a lot easier.

   And; For some reason, your page calls 2 different style.css files. Look at this from your page:
   <meta name="generator" content="WordPress 2.0.2" />
<link rel="stylesheet" href="http://www.jayjerome.com/wp-content/themes/nerima-daikon-3c-01/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="./style.css" type="text/css" media="screen" />

   The second style.css is full of what looks like page-source. Find it and kill it (delete it and whatever's calling it).

   Hope this helps...

4. Jayjerome
   Member
   Posted 5 years ago #

   Thanks, to both of you!!!

   Doodlebee, I used your code, and it worked! I'll have to fiddle with the dimensions a bit in my 'sandbox' but other than that, it looks good!

   Yosemite, you're correct, I did copy that post from Word; I thought I could work around the WordPress HTML editor to get better formatting (colored text, etc) and for spell checking. Any other HTML editors I can use to format the post that way? Or can I save the Word file as text only, to continue to use the spell checker, and paste it in after? Or do I have to retype the two posts directly into the WordPress editor?

   And that second style.css info -- I may have inadvertantly uploaded it from my 'sandbox' when I was playing around with the header format. I'll uninstall and reinstall the theme to start fresh before I make any more changes to it.

   Again, thanks your help.

5. Yosemite
   Member
   Posted 5 years ago #

   In my opinion posts should have little formatting and you should use css for styling rather then putting styles 'in' the post. For example, if you want to use a different font/size, define it in style.css and call it in your post with <p class="mybigfont">. Adding the properties themselves to the post means your commiting the properties to your database.

   Ideally the db just has your raw text, and you 'format' it on the fly, applying desired styling with your css. In reality you can't keep all styling out of your db 'records', but I try to keep it to a minimum.

Topic Closed

This topic has been closed to new replies.