Recent Topics

1 Feb 28, 2007 03:59    

My b2evolution Version: 1.9.x

I am using the "niftycorners" skin, which is provided as one of the five skins included with a new installation. I am happy with the skin, having made only a few changes in colors and backgrounds.

However, I wish to have a larger (taller) image for the background in the pageheader area. I tried just using a larger (taller) image than the size of the default header area ... but, when displayed, my image appears truncated, top and bottom, and not evenly. The image I chose is 108 pixels in height, but 25 pixels of it are not appearing on the bottom and 5 pixels are hidden from the top.

I cannot figure out which file in the niftycorners directory (or other areas) controls the height of the header. It seems as if I could merely change the allotted height for that header, then my new background image would be displayed accordingly.

How can I make my new background image display entirely?

2 Feb 28, 2007 05:57

Find the following in styles.css for that skin...
div.pageHeader /* Title zone */

{
	margin: 0 1ex;
	padding: 0;
	background-image: url(img/squares.gif);
	background-repeat: no-repeat;
	background-position: right center;
	/* border: 1px solid #f00; */
}


and simply add "height:108px;"

{
        height:108px;
	margin: 0 1ex;
	padding: 0;
	background-image: url(img/squares.gif);
	background-repeat: no-repeat;
	background-position: right center;
	/* border: 1px solid #f00; */
}

3 Feb 28, 2007 07:55

Thanks John for your response. However, although I made that change you suggested, it does not produce any difference at all in the height of that header section.

What I am talking about is the box below the blog titles, a small area which has it's own background image (on the default niftycorners skin configuration, it's a file named squares.gif).

Irrespective of whatever number I put into that pageheader section (on the styles.css) for the height (even up to 200) and no matter the height of my background image (I tried several), the dimensions of that "box" below the Blog titles does not change.

It is very strange... something must be controlling the size of that area (it stays so consistent, to my calculations, about 55 pixels high), but I can't seem to find what to change.

4 Feb 28, 2007 09:12

Try adding height to the following...

h1#pageTitle {
	font-size: 250%;
	font-weight: bold;
	margin: 0;
	padding: 0;
	color:#06a3c4;
}

5 Feb 28, 2007 15:55

John, putting a height entry into that section was not effective, however, that was good guidance by you to point me to that h1#pageTitle area, because it led me to discover the solution for what I was hoping to achieve.

The good news is that I achieved my goal by inserting the following entry into that listing of properties:

padding-top: 25px;

I then was able to use the taller background image jpg, which I had wanted to include and I have now achieved the look I was seeking. Thanks for your help John. You certainly got me going to the correct css file (and the proper area in that file) and that enabled me to experiment so I could find the solution. Mission accomplished.

For future reference (for those like me who are css amateurs) here is a great site which demonstrates css style properties dynamically (the left hand column has various properties to examine). This is where I experimented and found the property I was looking for. I plan to use the site to learn how to do other changes as well:

http://www.w3schools.com/css/css_howto.asp

You may wish to bookmark this one.

6 Feb 28, 2007 21:15

Glad it's sorted. I only have a version of that skin without any images so I couldn't really relate to your specific issue.


Form is loading...