Absolution

Modify Header - Absolution

Modify Header

by Goblin Market » Tue Jan 29, 2013 1:54 pm

Hi,

I am trying to make a custom header for the latest Absolution. The problem is because the board is flexible width, I need to make my header flexible width too. To do so, I've split my image into three parts: header_L.png, header_M.png and header_R.png

I've done the following modifications to overall_header.html:

Find

Code: Select all

<div id="header">
<a href="./index.php"> <div class="float-left">


Add after

Code: Select all

<div class="header-l">
   <div class="header-m">
      <div class="header-r">   
      </div>
       </div>
</div>



absolution.css

Find

Code: Select all

#header {
   width: 100%;
   background: url("{T_THEME_PATH}/images/header.gif") repeat-x left top #DF013A ;
   -moz-box-shadow: 0 0 8px #011123;
   -webkit-box-shadow: 0 0 8px #011123;
   box-shadow: 0 0 8px #011123;   
}


Add after:

Code: Select all

.header-l{
   height: 400px;
   min-width:432px;
   background: url("{T_THEME_PATH}/images/Test_header_L.png") no-repeat;
}

.header-m{
   height: 400px;
   width: 100%;
   background: url("{T_THEME_PATH}/images/Test_header_M.png") repeat-x;
}

.header-r{
   height: 400px;
   background: url("{T_THEME_PATH}/images/Test_header_R.png") no-repeat right top;
}



I have to admit, I have little background knowledge in html and css. The stuff above is really trial and error and a lot of google search on my part and I highly suspect I've botched it up somehow. Any help would be greatly appreciated. :)
Goblin Market
Registered User
Posts: 9
Joined: Fri Jan 04, 2013 6:40 am
Contact:

Re: Modify Header

by corvairforum » Thu Jan 31, 2013 9:10 am

Is it working? I'm not sure if this is what you are trying to do or not.

I got it to display a logo on my site.

I made the logo the same size as the default "logo-text-bg.png" (377x106). Uploaded/overwriting the default logo to style/theme/images.

Then in the overall template I changed...

<h1>{SITE_NAME}</h1>
<!-- ENDIF -->
</div>

to be...

<h1>{SITE_LOGO}</h1>
<!-- ENDIF -->
</div>

Here is a screenshot.
Attachments
logo.jpg
corvairforum
Registered User
Posts: 13
Joined: Sat Jan 02, 2010 6:04 am
Contact:

Re: Modify Header

by Goblin Market » Fri Feb 01, 2013 3:44 am

corvairforum wrote:Is it working? I'm not sure if this is what you are trying to do or not.

I got it to display a logo on my site.

I made the logo the same size as the default "logo-text-bg.png" (377x106). Uploaded/overwriting the default logo to style/theme/images.

Then in the overall template I changed...

<h1>{SITE_NAME}</h1>
<!-- ENDIF -->
</div>

to be...

<h1>{SITE_LOGO}</h1>
<!-- ENDIF -->
</div>

Here is a screenshot.


Hi! Thank you for your reply. I'm sorry I wasn't very clear. I'm not trying to change the logo or the site name but the overall header. What I want to do is:

header-l:
Image

header-m:
Image

header-r:
Image

I want to repeat header-m so as I can get an overall image of:
ImageImageImageImageImage

This is because the forum body is flexible width. If I put my header as an image, the width of the body will change for different screen sizes but the width of my header will remain constant and it'll cause a disjoint.


I was wondering if you know how to upload a flexible header. Any help would be greatly appreciated
Goblin Market
Registered User
Posts: 9
Joined: Fri Jan 04, 2013 6:40 am
Contact:

Re: Modify Header

by Goblin Market » Fri Feb 01, 2013 4:17 am

I've fixed the problem. For anyone who wants to know how to put your own header and make it match the flexible width of the body.


styles/absolution/theme/absolution.css
Find

Code: Select all

#header {
   width: 100%;
   background: url("{T_THEME_PATH}/images/header.gif") repeat-x left top #DF013A ;
   -moz-box-shadow: 0 0 8px #011123;
   -webkit-box-shadow: 0 0 8px #011123;
   box-shadow: 0 0 8px #011123;   
}


Replace with

Code: Select all

#header {
   height: 400px;
   width: 100%
   display: inline-block;
       padding: 9px;
       border-left:27px solid transparent;
       border-right:27px solid transparent;
       background-image: url("{T_THEME_PATH}/images/Test_header_L.png"),
          url("{T_THEME_PATH}/images/Test_header_M.png"),
          url("{T_THEME_PATH}/images/Test_header_R.png");
       background-repeat: no-repeat, repeat-x, no-repeat;
       background-position: left top, left top, right top;
       background-origin: border-box,padding-box, border-box;
       background-clip: border-box,padding-box, border-box;
}


Upload your header image into themes/images

Big thanks to Scott for the help
Goblin Market
Registered User
Posts: 9
Joined: Fri Jan 04, 2013 6:40 am
Contact:

Re: Modify Header

by gt500 » Sun Feb 10, 2013 9:18 am

i have tried what you said, but its not working for me

what happens in the left and mid image align perfect, but ther right picture sits under the mid repeat and you only see a little bit of the right logo

any help woulb be good. ie to see what you have done with overall header and absolution.css file. and a link to your site would be great to see a demo

Thanks
gt500
Registered User
Posts: 143
Joined: Thu Jun 12, 2008 11:35 am
Contact: