Removing Header "Curves"

[Willie]

Not sure that I can change colors and edit images to get the header I want. It seems complicated for someone who does not do coding.  I just want to remove the curves at the top of the page.  My header will not extend to the edges and the background image, light blue curves show on the left and right of my header image.

Is it main_block.png   that I need to work with?  If so, how do it remove the images?

It seems that many will want to place their header in this area and are going to have the same problem.  I have been reading quite a few hours trying to find a solution.  Finally I just put my header in and just need to remove the frame images.  Thanks.  I am using 2.0 default curves.

[Antechinus]

Index.css:

Koodi [Valitse] Laajenna

/* the framing graphics */
#header
{
background: url(../images/theme/main_block.png) #fefefe no-repeat 0 -480px;
padding-left: 20px;
}
#header div.frame
{
background: url(../images/theme/main_block.png) no-repeat 100% -480px;
display: block;
padding: 5px 20px 1em 0;
}

Change to:

Koodi [Valitse] Laajenna

/* the framing graphics */
#header
{
background: #FFFFFF url(../images/theme/frame_repeat.png) repeat-y top left;
padding-left: 1px;
}
#header div.frame
{
background: url(../images/theme/frame_repeat.png) repeat-y top right;
display: block;
padding: 5px 1px 1em 0;
}

Adjust paddings to suit yourself. The px left and right paddings will allow the thin grey border to continue up the side of the header, which I think would be best for looks.

[Willie]

Thanks, Antechinus.  Seems easy enough.  It appears that this code will remove the curve image replacing it with white while reducing the padding so that my header image will increase in width. 

Thanks again for your prompt reply.

[Willie]

I removed all of the padding from sides and top. It looks great on my 21" monitory, but not on my big one.   Where and how do I set the image width to 100%?

[Antechinus]

h1 img {width: 100%;}

Then look at it on a 1024.

[Willie]

Can't find a h1 image in index.css

Should I add image under h1.forumtitle?

/* the main title, always stay at 45 pixels in height! */
h1.forumtitle
{
        image: 100%;
   line-height: 45px;
   font-size: 1.8em;
   font-family: Geneva, verdana, sans-serif;
   margin: 0;
   padding: 0;
   float: left;
}

[Willie]

Nope, that did not work.  The only other h1 is for font color.

[Antechinus]

No, add that code to index.css. It aint there yet.

[Willie]

Thanks, Antechinus.

Here's the result




//* the framing graphics */
#header
{
   background: #FFFFFF url(../images/theme/frame_repeat.png) repeat-y top left;
   padding-left: 1px;
}
#header div.frame
{
   background: url(../images/theme/frame_repeat.png) repeat-y top right;
   display: block;
   padding: 5px 1px 1em 0;
}

[Willie]

I placed my header image "test1"  here:

// the upshrink image, right-floated

echo '
         ', empty($settings['site_slogan']) ? '<img id="smflogo" src="http://clips6.info/test1.jpg"'; .



http://clips6.info/smf/index.php

[Antechinus]

Hmm. Would have to mess around with it a bit. Don't have time right now but will take a look tonight.

One thing though: if you do stretch the image you are going to have problems with different resolutions. TBH it's not really a good solution as the distortion and pixellation usually doesn't look too good. That's why I said "Check it on a 1024".

[Willie]

I am still working at it. The ColorizeIt got me the color scheme I wanted, but now I am still having to replace the header and logo. I got rid of the curves as you suggested, but ran into the problem on a widescreen of not having my header color extend to the right border. It looks great on an old monitor at 1024, but not a widescreen.  I have a logo that can go over a color background, but I am having trouble getting the "top" colored. Also, I need to increase the height of the top space. My logo is replacing "forum name"and I delete the smf logo.  I am taking your advice and giving up on making the logo part of the header so it won't have to stretch for the wide screen.  Then I lose my color gradient .

It would be a lot easier to give up on curves, but it ought to be workable.....I think.   I have not worked with a "main_block.png" before, so I not sure how to deal with it in trying to get the background color changed.  I changed the color of all the space including my nav bar which made them unreadable since I am using a dark color. You can see that the header I have is taller than the allotted space. Can I increase the height and color it dark blue and then use my logo?