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 (http://www.brummiesfans.com/main)
Coppermine - www.brummiesfans.com/coppermine (http://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 (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
<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
#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;
}
Maybe it's easier to drop the whole cpg_logo_block_outer div and rebuild it from scratch to fit your needs?
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
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 (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 (http://www.brummiesfans.com/coppermine/themes/brummies/new_template.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
CSSbody {
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<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> </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>
Now solved by another means - see "Two Column theme - nearly there (http://forum.coppermine-gallery.net/index.php/topic,67680.0.html)" thread.