Customising the Header Image

uk_martin · October 08, 2010, 02:13:30 PM

Hi

I am trying to get my header image to look the same as the one in my phpBB3 development site - www.brummiesfans.com/main

Hopefully these links will illustrate the problem.
phpBB - www.brummiesfans.com/main
Coppermine - www.brummiesfans.com/coppermine

phpBB uses seperate image for each corner, horizontal and vertical element of its border. Coppermine uses one big image (http://www.brummiesfans.com/coppermine/themes/brummies/images/main_block.png ), twice, and each image is positioned so that they overlap to produce the same effect. My image, because of having transparencies, will need to be adjusted later, but of pressing concern is the header image.

The "overlaps" of the border images are governed by padding left and padding right values. This padding is also affecting the header image.

I need to display the header image, independently of the padding. So far I've not been able to do this. Any help in achieving this goal would be much appreciated.

Thanks in advance

Martin

template.html

Code Select

<body>

<div style="padding:0 0px;min-width:650px;width:900px;margin:0 auto;">
    {CUSTOM_HEADER}

    <div id="cpg_logo_block_outer">
        <div class="cpg_logo_block_inner">
            <div id="cpg_logo_block_logo">
            </div>
        </div>
        
        <div class="clearer">
        </div>
    </div>

style.css

Code Select

#cpg_logo_block_outer  {
    background-image: url(images/main_block.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: 0pt -240px;
    padding-left: 10px;
}
#cpg_logo_block_outer div.cpg_logo_block_inner {
    background-color: transparent;
    background-image: url(images/main_block.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: 100% -240px;
    display: block;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 0px;
    padding-left: 0px;
}
#cpg_logo_block_logo {
    background-color: transparent;
    background-image: url(images/header_random_1.png);
    background-position: 100%
    background-repeat: no-repeat;
    background-attachment: scroll;
    display: block;
    padding-top: 112px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}

Αndré · October 12, 2010, 10:34:21 AM

Maybe it's easier to drop the whole cpg_logo_block_outer div and rebuild it from scratch to fit your needs?

uk_martin · October 12, 2010, 02:05:34 PM

Quote from: Αndré on October 12, 2010, 10:34:21 AM
Maybe it's easier to drop the whole cpg_logo_block_outer div and rebuild it from scratch to fit your needs?

Yes and No, I think. I don't think that removing the cpg_logo_block_outer div will work, as it contains one of the overlayed instances of images/main_block.png that provides the top right hand border. But yes, there is a need to take the header image out of the "logo block". I may need a little help on how to do that though, as I'm no CSS expert. Any offers of help please?

Thanks

Martin

Αndré · October 12, 2010, 02:22:32 PM

Quote from: uk_martin on October 12, 2010, 02:05:34 PM
I'm no CSS expert

Me neither. Sorry.

uk_martin · October 21, 2010, 02:33:07 PM

Quote from: Αndré on October 12, 2010, 10:34:21 AM
Maybe it's easier to drop the whole cpg_logo_block_outer div and rebuild it from scratch to fit your needs?

I was slowly coming to that solution myself, as there were other aspects that I wanted to customise as well. I've made a start, based on the phpBB3 template and style, but have hit a snag.

An example of where I am at is here - http://www.brummiesfans.com/coppermine/themes/brummies/new_template.html

The problem I have is that I've probably overlooked something so stupidly simple that I can't see thewood for the trees. What is currently keeping the spacing looking like it is, is the text that is contained in the "<div id="container>" Without that text, the whole layout collapses to look like this - http://www.brummiesfans.com/coppermine/themes/brummies/new_template2.html

What is it that needs to be done to get the div that features the border, so self-resize, according to the size of the contents, mainly of course the "<div id=main>"

The template (without "supporting" text) and css follow. Any advice on what needs to be amended, before the heavy machinery gets installed, would be appreciated.

Thanks in advance

Martin

CSS

Code Select

body {
 background: #d00000;
 font-family : Verdana, Arial, Helvetica, sans-serif;
 font-size: 10px;
 color : Black;
 margin: 0px;
 padding-top: 10px;
 padding-right: 0%;
 padding-bottom: 15px;
 padding-left: 0%;
}
#container {
 float:center;
 margin-left:auto;
 margin-right:auto;
 top: 10px;
 width:900px;
 min-width: 650px;
}

.border-top     {background: url(images/border_top.png) repeat-x 0 0;}
.border-bottom     {background: url(images/border_bottom2.png) repeat-x 0 100%;}
.border-left    {background: url(images/border_left.png) repeat-y 0 0;}
.border-right    {background: url(images/border_right.png) repeat-y 100% 0;}
.border-top-left   {background: url(images/border_top_left.png) no-repeat 0 0;}
.border-top-right    {background: url(images/border_top_right.png) 100% 0 no-repeat;}
.border-bottom-left   {background: url(images/border_bottom_left.png) 0 100% no-repeat;}
.border-bottom-right   {background: url(images/border_bottom_right.png) 100% 100% no-repeat;}
.header      {background: url(images/header_random_1.png) no-repeat;}
.inside      {padding: 10px 10px 10px 10px;}
.clear {clear: both and height: 0}

#header {
 background-color: transparent;
 background-image: url(images/header_random_1.png);
 background-position: 100%
 background-repeat: no-repeat;
 background-attachment: scroll;
 display: block;
 padding-top: 108px;
 padding-right: 10px;
 padding-bottom: 0px;
 padding-left: 10px;
}
 
#menu {
 position:relative;
 background-color: #ffdd00;
 width:860px;
 top: 0px;
 left:0px;
 padding-left:10px;
 padding-right:10px;
}
#columns {
 position: relative;
 width: 880px;
 top: 0px;
 background-color: #F9F;
}
#left {
 position:absolute;
 width:165px;
 top: 0px;
 left:0px;
 padding-left:10px;
 padding-right:5px;
 background-color: #00F;
}
#main{
 position:absolute;
 width: 695px;
 top: 0px;
 right: 0px;
 padding-left:5px;
 background-color: #0F0;
}
#footer {
 clear:both;
 width:860px;
 top: 0px;
 left:0px;
 padding-left:10px;
 padding-right:10px;
 background-color: #FF3;
}

TEMPLATE

Code Select

<body>

<div id="container">
<div class="border-top"><div class="border-bottom"><div class="border-left"><div class="border-right">
<div class="border-top-left"><div class="border-top-right"><div class="border-bottom-left"><div class="border-bottom-right"><div class="inside">

<div id="header"></div>
<div id="menu">
  <a>Top Menu
  </a>
  <br /><br />
</div>
<div id="columns">
<div id="left">
<p>Side Menu</p></div>

<p>&nbsp;</p>

<div id=main>
    <p>The</p>
    <p>Photo    </p>
    <p>Gallery</p>
</div>
</div>

<div id="footer">
  <a>The footer
  </a>
  <br /><br />
</div></div></div></div></div></div></div></div></div></div></div>
</body>

uk_martin · October 24, 2010, 03:24:43 AM

Now solved by another means - see "Two Column theme - nearly there" thread.

coppermine-gallery.com/forum

News:

Customising the Header Image

uk_martin

Αndré

uk_martin

Αndré

uk_martin

uk_martin