Advanced search  

News:

CPG Release 1.6.26
Correct PHP8.2 issues with user and language managers.
Additional fixes for PHP 8.2
Correct PHP8 error with SMF 2.0 bridge.
Correct IPTC supplimental category parsing.
Download and info HERE

Pages: [1]   Go Down

Author Topic: Header Image Alignment problem  (Read 3957 times)

0 Members and 1 Guest are viewing this topic.

uk_martin

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Posts: 186
Header Image Alignment problem
« on: September 26, 2010, 07:58:07 pm »

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
Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15764
Re: Header Image Alignment problem
« Reply #1 on: September 27, 2010, 02:14:56 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.
Logged

uk_martin

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Posts: 186
Re: Header Image Alignment problem
« Reply #2 on: September 27, 2010, 08:56:19 pm »

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:

Code: [Select]
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:

Code: [Select]
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
 
Logged

uk_martin

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Posts: 186
Re: Header Image Alignment problem
« Reply #3 on: September 27, 2010, 08:58:24 pm »

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:

Code: [Select]
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:

Code: [Select]
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
Logged

uk_martin

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Posts: 186
Re: Header Image Alignment problem
« Reply #4 on: September 30, 2010, 09:49:38 am »

Does anyone have any ideas on how the two images can happily co-exist?

Thanks in advance

Martin
Logged
Pages: [1]   Go Up
 

Page created in 0.026 seconds with 19 queries.