Advanced search  

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Pages: [1]   Go Down

Author Topic: Customising the Header Image  (Read 5900 times)

0 Members and 1 Guest are viewing this topic.

uk_martin

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Posts: 186
Customising the Header Image
« on: 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;
}
Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15764
Re: Customising the Header Image
« Reply #1 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?
Logged

uk_martin

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Posts: 186
Re: Customising the Header Image
« Reply #2 on: October 12, 2010, 02:05:34 pm »

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
Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15764
Re: Customising the Header Image
« Reply #3 on: October 12, 2010, 02:22:32 pm »

Logged

uk_martin

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Posts: 186
Re: Customising the Header Image
« Reply #4 on: October 21, 2010, 02:33:07 pm »

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>
Logged

uk_martin

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Posts: 186
Re: Customising the Header Image
« Reply #5 on: October 24, 2010, 03:24:43 am »

Now solved by another means - see "Two Column theme - nearly there" thread.
Logged
Pages: [1]   Go Up
 

Page created in 0.022 seconds with 20 queries.