WordPress.org

1. flopez01
   Member
   Posted 2 years ago #

   Hey everyone,

   I have an issue with the header.
   http://new.hydroponic-gardens.com/wordpress/

   I'm trying to make the header look like this: Hydroponic-Gardens.com

   but for some reason it looks like this: Hydroponic-
   Gardens.com

   However, when I use a letter in place of the, - it works fine.
   Example: HydroponicsGardens.com

   I'm stuck. How do I fix this?

2. alchymyth
   The Sweeper
   Posted 2 years ago #

   the id="headerimage" in which the title is contained, is not wide enough for your titlte text, so the browser takes the hyphen to break wrap the text, but with a solid text string, just goes over the edge.
   in style.css of your theme, increase width here to about 600px:
   

   #headerimage{
     width:600px;
     height:220px;
     margin:50 auto;
     padding:0px 0px 0px 0px;
     background:green url(images/logo.jpg)
     top left no-repeat;
     }

   btw: just the last line above: delete the semicolon between 'left' and 'no-repeat' and correct the last word. (correct version shown)

   you could adjust the position of the title text by changing to 'text-align:left' here and maybe adapting the padding of 250px:
   

   #header h1.blogtitle{
     font-family:Tahoma,Arial, Helvetica, sans-serif;
     margin:0;
     color:#000000;
     padding:30px 0px 0 250px;border: 0;
     text-align:left;
     font-size: 4em;
   }

3. flopez01
   Member
   Posted 2 years ago #

   Thanks for quick reply,

   Changing the width to 600px only added more background green
   to the banner. http://new.hydroponic-gardens.com/wordpress/

   For some reason that title still has a line break.

   any other ideas?

4. alchymyth
   The Sweeper
   Posted 2 years ago #

   my mistake:
   change the width in #headerimage back to 220px;

   try adding width in:
   

   #header h1.blogtitle{
   width:600px;
     font-family:Tahoma,Arial, Helvetica, sans-serif;
     margin:0;
     color:#000000;
     text-decoration: none;
     padding:30px 0px 0px 250px;border: 0;
     text-align:left;
     font-size: 4em;
   }

5. flopez01
   Member
   Posted 2 years ago #

   Yes! That worked.

   Thank-you so much for your help. I changed it to 900px
   just to make sure I had enough room.
   http://new.hydroponic-gardens.com/wordpress/

   But why do my links change when I make changes
   to the heading title?

   For example:
   I would like to make the heading title a different color
   from the links under the Main Menu.

   My guess is that the links are not identified correctly.
   Is that right?

6. flopez01
   Member
   Posted 2 years ago #

   PS

   I would like to make those links a bit larger as well.

7. alchymyth
   The Sweeper
   Posted 2 years ago #

   with css, you can be very specific with styles:
   for instance add this new style:

   #header .blogtitle a {
     color: #123456;
     text-decoration: none;
   }

   and for the links in the left sidebar - add this new line to style.css:
   

   #left_sidebar a {font-size:15px;}

   PS: just check that width of #headerimage is 220px.

8. flopez01
   Member
   Posted 2 years ago #

   Yes! that worked.

   Thanks, you've been a big help.

   I just need to play around with it to get the right look.
   I'll be back on if I need more help.

   Thanks again.

Topic Closed

This topic has been closed to new replies.