[pmwiki-users] triad skin, page header image issue.

[Hans]

Hello Ahmad,

Wednesday, June 27, 2018, 3:59:25 PM, you wrote:

> yes as your expected, I need to stretch the image Horizontally to fill the entire header space.
> image doesn't include a text  and it is used a background for the header.

> I added it in the file config.php 
> this line:   $PageLogUrl=
> "https://s25.postimg.cc/89wgm4gz3/11_Nahdi_Banner.jpg";
> but, as you see in the attached, there is empty space (in right side) didn't fill by the image.
> could you advice how to solving this issue and which css file includes that?

well, the image you are using does contain text (nahdiwiki etc.)
But to answer the question as to how one can stretch a banner image in
the header, one can try  the following:
1. not use  variable $PageLogUrl in config.php.
2. edit PageHeader page and remove
 >>lfloat<<
 [[{$ScriptUrl}|{$PageLogoUrl}]]
 >><<

 remove >>rfloat<< div as well if there is no need for a search box or
 remove >>fontsizer links.
3. put your banner.jpg image file somewhere in pub, let's say in a folder
 pub/img/
4. add or edit pub/css/local.css file (create it if you have not got
 one. pub/css/local.css can contain css rules for the entire wiki.
5. add to pub/css/local.css the following:
#header {
  height:100px;
  background: url(../img/banner.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  }
in the above adjust the height to what suits your header, and use the
correct file name for the banner image.
6. check if these css rules take effect. Your banner image should be
visible, as a background of the header division, and stretched both
horizontally and vertically.
7. As the banner image will be stretched, it can become quite
distorted. So avoid having text as part of the image. Instead, you can
add text directly to the header via the Site/PageHeader page, for
instance use:
 >>lfloat sitetitle<<
 [[{$ScriptUrl}|My Site Name]]
 >><<
8. then use css in pub/css/local.css to style the text, via class
.sitetitle:
.sitetitle { font-size: 3em; color: red; }


Best regards,
 Hans                         
mailto:design at bracker.uk