Hi
I'm trying to modify the Curve theme to match a theme that I am also developing in phpBB3. Progress so far -
phpBB3 - http://www.brummiesfans.com/main/portal.php
Coppermine - http://brummiesfans.com/coppermine/
As can be seen I have a problem with the positioning of the header image. In phpBB, the image acts as a background and sits beneath the border graphic. In Coppermine, the image seems to sit on top of the border.
The header image also seems to form part of the template.html file as opposed to being handled in the style.css like the border image files.
Is there an easy way to:
a) handle the header image in style.css?
b) arrange the order of the grahics files in style.css so that the header image goes "under" the border lines, to give the same effect as in phpBB3?
Thanks in advance.
Martin
Quote from: uk_martin on September 26, 2010, 07:58:07 PM
In phpBB, the image acts as a background and sits beneath the border graphic. In Coppermine, the image seems to sit on top of the border.
In phpBB it's the background of a div, in Coppermine it's a separate img element. Try to use your image as background for the
cpg_logo_block_inner div.
Thank for the reply, but it's not quite there yet.
The header image is now where I want it, but it's come at the expense of the top right corner graphic which comes from the "main_block.png" file. I can't seem to have both files "live" in the code, else the whole header looks a mess.
At the moment I can either have a header and a missing top right corner with this code:
body {
background: #d00000;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color : Black;
margin: 0px;
padding-top: 10px;
padding-right: 5%;
padding-bottom: 15px;
padding-left: 5%;
}
#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/header_random_1.png);
[b]// background-image: url(images/main_block.png);[/b]
background-repeat: no-repeat;
background-attachment: scroll;
[b]// background-position: 100% -240px;[/b]
display: block;
padding-top: 110px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 0px;
}
#cpg_logo_block_logo {
float: center;
border: none;
}
#cpg_logo_block_name {
float: right;
text-align: center;
OR
I can have the border but no header graphic with this code:
body {
background: #d00000;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color : Black;
margin: 0px;
padding-top: 10px;
padding-right: 5%;
padding-bottom: 15px;
padding-left: 5%;
}
#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/header_random_1.png);
background-image: url(images/main_block.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 100% -240px;
display: block;
padding-top: 110px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 0px;
}
#cpg_logo_block_logo {
float: center;
border: none;
}
#cpg_logo_block_name {
float: right;
text-align: center;
It appears that the "main_block.png" image needs the "background-position:" values in order to line up correctly, but these values then throw the "header_random_1.png" off the screen.
How can I get both of the images to display corectly?
Thanks again.
Martin
Thank for the reply, but it's not quite there yet.
The header image is now where I want it, but it's come at the expense of the top right corner graphic which comes from the "main_block.png" file. I can't seem to have both files "live" in the code, else the whole header looks a mess.
At the moment I can either have a header and a missing top right corner with this code:
body {
background: #d00000;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color : Black;
margin: 0px;
padding-top: 10px;
padding-right: 5%;
padding-bottom: 15px;
padding-left: 5%;
}
#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/header_random_1.png);
// background-image: url(images/main_block.png);
background-repeat: no-repeat;
background-attachment: scroll;
// background-position: 100% -240px;
display: block;
padding-top: 110px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 0px;
}
#cpg_logo_block_logo {
float: center;
border: none;
}
#cpg_logo_block_name {
float: right;
text-align: center;
OR
I can have the border but no header graphic with this code:
body {
background: #d00000;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color : Black;
margin: 0px;
padding-top: 10px;
padding-right: 5%;
padding-bottom: 15px;
padding-left: 5%;
}
#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/header_random_1.png);
background-image: url(images/main_block.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 100% -240px;
display: block;
padding-top: 110px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 0px;
}
#cpg_logo_block_logo {
float: center;
border: none;
}
#cpg_logo_block_name {
float: right;
text-align: center;
It appears that the "main_block.png" image needs the "background-position:" values in order to line up correctly, but these values then throw the "header_random_1.png" off the screen.
How can I get both of the images to display corectly?
Thanks again.
Martin
Does anyone have any ideas on how the two images can happily co-exist?
Thanks in advance
Martin