Move left column into header?

[maddocks]

Hi is it possible to move the left bar into the header like this:

TO:

http://img130.imageshack.us/img130/2881/aftersr7.gif

Thanks

Maddocks

[found it]

It is possible but you would have to skillfully match up the header file with that of the portal....

It would also be nice to place the integramod copyrights back into the footer of your site....as you did agree to this when you downloaded the software

[maddocks]

Sorry, removed the wrong thing, is that ok?

Maddocks

[found it]

Sorry, removed the wrong thing, will put them in right away!

No problem

[maddocks]

Right, i am going to crack on with this header thing. All i think i need to do is align the header to the right and make it like 80% smaller.

[maddocks]

Hi,

can you think how to do it, i have done this so far, http://www.pchwforum.com

Maddocks

[Teelk]

http://www.witchhunters.ca

Something like that? Here's my overall_header.tpl for that... try playin' with it...

Code: Select all

<DOCTYPE><mod><if><script></script><style>#html, #body    {font-size: x-small;               }.leftMenu div.item {width:115px;overflow:hidden;}.leftMenu td.item {width:115px;}.leftMenu div.rcitem {width:130px;overflow:hidden;}.leftMenu td.rcitem {width:130px;}td.item {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='templates/fisubice/images/fillblock.png');}.tl {display: block;height:80px;width:10%;}.tl {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='templates/fisubice/images/bblock.png');}.t {height:80px;}.t {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='templates/fisubice/images/msie/t.png');}.tr {display: block;height:80px;width:45px;}.tr {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='templates/fisubice/images/msie/tr.png');}.l {width:45px;}.l {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='templates/fisubice/images/msie/l.png');}.r {width:45px;}.r {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, enabled=true, sizingMethod=scale, src='templates/fisubice/images/msie/r.png');}.br {height:70px;width:45px;}.br {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='templates/fisubice/images/msie/br.png');}.b {height:70px;}.b {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='templates/fisubice/images/msie/b.png');}.bl {height:70px;width:45px;}.bl {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='templates/fisubice/images/msie/bl.png');}  td.citem {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='templates/fisubice/images/msie/cfillblock.png');}td.ctl {display: block;height:80px;width:75px;}.ctl {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src='templates/fisubice/images/cblock.png');}.ct {height:80px;}.ct {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='templates/fisubice/images/msie/ct.png');}.ctr {display: block;height:80px;width:75px;}.ctr {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image, src='templates/fisubice/images/msie/ctr.png');}.cl {width:75px;}.cl {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='templates/fisubice/images/msie/cl.png');}.cr {width:75px;}.cr {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='templates/fisubice/images/msie/cr.png');}.cbr {height:70px;width:75px;}.cbr {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image, src='templates/fisubice/images/msie/cbr.png');}.cb {height:70px;}.cb {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='templates/fisubice/images/msie/cb.png');}.cbl {height:70px;width:75px;}.cbl {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image, src='templates/fisubice/images/msie/cbl.png');}  td.rcitem {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='templates/fisubice/images/msie/cfillblock.png');}td.rctl {display: block;height:80px;width:45px;}.rctl {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src='templates/fisubice/images/bcblock.png');}.rct {height:80px;}.rct {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='templates/fisubice/images/msie/ct.png');}.rctr {display: block;height:80px;width:45px;}.rctr {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='templates/fisubice/images/msie/ctr.png');}.rcl {width:45px;}.rcl {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='templates/fisubice/images/msie/cl.png');}.rcr {width:45px;}.rcr {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='templates/fisubice/images/msie/cr.png');}.rcbr {height:70px;width:45px;}.rcbr {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='templates/fisubice/images/msie/cbr.png');}.rcb {height:70px;}.rcb {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='templates/fisubice/images/msie/cb.png');}.rcbl {height:70px;width:45px;}.rcbl {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='templates/fisubice/images/msie/cbl.png');}.sitelinks {height:20px;width:100%;display:block;}.sitelinks { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='templates/fisubice/images/msie/tbox.png');}  .post { background: transparent;font-size:11px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='templates/fisubice/images/msie/tbox.png')}.button ,.liteoption,.catbutton,.mainoption{ background: transparent;font-size:11px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='templates/fisubice/images/msie/tbox.png')}.post2 { background: transparent;font-size:11px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='templates/fisubice/images/msie/tbox.png')}  .row4{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='templates/fisubice/images/fillblock.png');}.row8{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='templates/fisubice/images/fillblock.png');}th {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='templates/fisubice/images/tdpic.png'); height:27px}.caption { width:auto; }td.item {  }div.item {  }  img.oldBrowser {display: block;}  </style><endif><endif><SCRIPT> var win = null; function Gk_PopTart(mypage,myname,w,h,scroll) {   LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;   TopPosition = (screen.height) ? (screen.height-h)/2 : 0;   settings = 'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable';   win = window.open(mypage,myname,settings); } </SCRIPT>  <SCRIPT> var win = null; function Trophy_Popup(mypage,myname,w,h,scroll) {   LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;   TopPosition = (screen.height) ? (screen.height-h)/2 : 0;   settings = 'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable';   win = window.open(mypage,myname,settings); } </SCRIPT><BEGIN>  <script></script><script></script>  <END><BEGIN><script></script><script></script>  <END>  </head>  <BEGIN>  <body>  <END>  <BEGIN>  <body>  <END><BEGIN>  <body>  <END>  <BEGIN>  <body>  <END><BEGIN>     <table>     <tr>     <td><span><b>{L_BOARD_DISABLE}</b></span></td>     </tr>    </table><END><Start><Banners><table><tr><td><table><BEGIN><tr><td><div>{BANNER_1_IMG}</div></td></tr><END><BEGIN><tr><td><div>{BANNER_2_IMG}</div></td></tr><END></table></td><td><table><BEGIN><tr><td><div>{BANNER_3_IMG}</div></td></tr><END><BEGIN><tr><td><div>{BANNER_4_IMG}</div></td></tr><END></table></td><td><table><BEGIN><tr><td><div>{BANNER_5_IMG}</div></td></tr><END><BEGIN><tr><td><div>{BANNER_6_IMG}</div></td></tr><END></table></td></tr></table><End><End>{QBARS}<IFRAME><Alternate></IFRAME><a></a><table><tr><td><table><tr><td>{PORTAL_HEADER}<td><table><tr>     <td>     <div>{SITE_DESCRIPTION} :: {PAGE_TITLE}</div><div>{SITE_DESCRIPTION} :: {PAGE_TITLE}</div></td></tr><tr>     <td>     </td>     <td>     </td>     <td>     </td>     <td>     </td></tr><tr>     <td>     </td></tr><tr>     <td>         {QMENUS}     </td></tr></table><BEGIN><table>   <tr>     <td><span> {L_LW_EXPIRE_REMINDER}</span></td>   </tr></table><END><BEGIN><table><tr><td>{BANNER_16_IMG}</td></tr></table><END><table><BEGIN><tr><td> </td><td> </td><td> </td><td> </td><td> </td></tr><END><BEGIN><tr><td> </td><td> </td><td> </td><td> </td><td> </td></tr><END><BEGIN><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><END><tr> <td><BEGIN><form><table>    <tr>       <td><span>Welcome</span></td>    </tr>        <tr>       <td>       <img></td>       <td><table><tr>       <td><b>{L_LOGIN}to Eve Mainframe</b></td></tr><tr><td><input>{L_USERNAME}:  </td><td><input></td></tr><tr><td>{L_PASSWORD}:  </td><td><input></td></tr><BEGIN><tr><td><input>{L_REMEMBER_ME}</td></tr><END><tr><td><input></td></tr></td></tr></table>         <td>       <div><span><b>Join the Fight!</b></span></div>       <div><br><span>{L_REGISTER_NEW_WHUNTER}</span></div>       <div><br><span>Having trouble logging into the site?<br>Or just curious about something?<br><a>Visit our Helpdesk.</a></span></div>       </td>    </tr> </table></form><br><END></td>

[maddocks]

Hi,

how do i make my block backgrounds slightly transparent, like 50% opacity. Because, with photoshop it only allows me to make it 100% transparent or 0% transparent.

Maddocks

[maddocks]

does anyone know how to do the above, like i said i can only make it either 100% transparent or no transparent. I want it liek 40% opaque, any ideas?

[Teelk]

You'll have to use png files for transparency like that. Export your image from Photoshop to Imageready, set the layer transparency there and then save as .png

From there it gets more complicated. Firefox, Opera and other browsers will display the proper transparency automatically. Internet Explorer on the other hand does not.

For images in the HTML that are in an <img> tag you can use a javascript png fix.

For background images you'll need to apply the IE filter Alphaimageloader in css in your overall_header.tpl file.

Code: Select all

<if><if> <style> .classname{filter]><endif>

The <if><if> and <endif><endif> are used to tell the browser to only use these css classes if your browser is IE5.x to IE6.x. IE BETA 7 will be able to process the png's alpha transparency inherently.