Support ⇒ Themes ⇒ [solved] Cardinal Theme displays differently other browsers ⇒ Community Forums ⇒ CPG Dragonfly™ CMS
Forum IndexThemes

[solved] Cardinal Theme displays differently other browsers Reply to topic

Go to page 1, 2 Next

I have no idea about the coding for themes, I have a problem where the bg_header.jpg looks different on different systems using different browsers.

I am using a mac with ff and it looks fine but when i use the latest ie the image starts to repeat it's self. when i use an older version of ie the image is to big and you can't see the full image.

Any ideas how to fix it. I am using Cardinal theme for DF 9.2.1.2.

I also would like to center the image, any Ideas on how to do that.

www.cofscouts.org.au

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
unix / Apache 2.2.15 / MySQL 5.0.92 / PHP 5.3.8/ CMS 9.4.0.0


For the repeat problem Change: /yourtheme/style/style.css line 127 .head1 { background: url("../images/bg_header.jpg") repeat-x scroll 0 0 #FFFFFF; height: 80px; width: 100%; }
to .head1 { background: url("../images/bg_header.jpg"); background-repeat: no-repeat; background-position: center; background-color: #FFFFFF; height: 80px; width: 1182px; } }


and /yourtheme/templates/header.html remove

<td class="head2"><a href="index.php"><object width="360" height="80" id="logo" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"><param value="themes/wsg_Cardinal/images/logo.swf" name="movie"><param value="false" name="menu"> <param value="best" name="quality"><param value="transparent" name="wmode"><param value="#AEBFCC" name="bgcolor"><embed width="360" height="80" name="logo" bgcolor="#AEBFCC" wmode="transparent" quality="best" menu="false" src="themes/wsg_Cardinal/images/logo.swf"></object></a></td>

and i would recommend editing the image it self to be no more then 1024px in width.

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Multiple Setups


Thanks for the quick reply.
Found and done the first piece of the code and re-sized the image.
But I can't seem to find the second part of the code in the header .html

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
unix / Apache 2.2.15 / MySQL 5.0.92 / PHP 5.3.8/ CMS 9.4.0.0


my header.html look like this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="{S_TEXTDIR}" lang="{S_LANGCODE}"> <head> {S_HEADER_TAGS} <link rel="stylesheet" type="text/css" href="{THEME_PATH}/style/style.css" /> <!-- IF S_MAIN_MENU or S_ADMIN_CSSMENU --> <link rel="stylesheet" type="text/css" href="{THEME_PATH}/style/cpgmm.css" /> <!-- ENDIF --> {CSS_IE} </head> <body> <!-- IF S_ADMIN_MENU --> <div id="adminmenu">{S_ADMIN_MENU}</div> <!-- ENDIF --> <table cellspacing="0" cellpadding="0" width="95%" align="center" border="0"> <tbody> <tr> <td class="lefttd" width="10"><img src="{THEME_PATH}/images/spacer.gif" width="10" height="10" alt="" /></td> <td width="100%"> <table border="0" width="100%" cellspacing="0" cellpadding="0"> <tr> <td> <table class="headtable"> <tr> <!-- IF S_FLASH --> <td class="head2"><a href="{U_MAININDEX}">{S_FLASH}</a></td> <!-- ELSE --> <td class="head2"><a href="{U_MAININDEX}"><img src="{THEME_PATH}/images/{S_LOGO}" alt="{S_SITENAME}" title="{S_SITENAME}" /></a></td> <!-- ENDIF --> <td class="head1" align="center" width="100%">{S_BANNER}</td> </tr> </table> </td> </tr> <tr> <td> <!-- Welcome and Clock row --> <table border="0" width="100%" cellspacing="0" cellpadding="0"> <tr> <td width="10">{G_LEFTIMAGE}</td> <td><img src="{THEME_PATH}/images/spacer.gif" width="1" height="1" alt="" /> <!-- IF S_IS_USER -->{S_WELCOME} <!-- ELSE -->Welcome Guest! Please <a href="/index.php?name=Your_Account&amp;file=register">Register</a> or <a href="/index.php?name=Your_Account">Login</a> <!-- ENDIF --> </td> <td align="right"><script language="javascript" type="text/javascript" src="{THEME_PATH}/systemclock.js"></script></td> <td align="right" width="10">{G_RIGHTIMAGE}</td> </tr> </table> </td> </tr> <!-- IF S_MAIN_MENU --> <!-- Display new CSS/DHTML drop-down menu --> <tr> <td class="headmenu"> <table class="cssmenu"> <tr> <!-- Adjust width below to move Menu left or right --> <td><img src="{THEME_PATH}/images/spacer.gif" width="140" height="1" alt="" /></td> <td class="cssmenutd"><div id="menu">{S_MAIN_MENU}</div></td> </tr> </table> <table class="tbl"> <tr> <td class="tbll"><img src="{THEME_PATH}/images/forums/spacer.gif" alt="" width="8" height="4" /></td> <td class="tblbot"><img src="{THEME_PATH}/images/forums/spacer.gif" alt="" width="8" height="4" /></td> <td class="tblr"><img src="{THEME_PATH}/images/forums/spacer.gif" alt="" width="8" height="4" /></td> </tr> </table> </td> </tr> <!-- ELSE --> <!-- Display Classic top menu --> <tr> <td> <table border="0" width="100%" cellspacing="1" cellpadding="0" class="forumline"> <tr class="navmenu"> <td align="center" width="15%" class="row2"><a href="{U_MAININDEX}"> <img src="{THEME_PATH}/images/blocks/CPG_Main_Menu/icon_home.gif" width="20" height="20" alt="" /><br /> {S_HOME}</a></td> <!-- IF S_DOWNLOADS --> <td align="center" width="15%" class="row2"><a href="{U_DOWNLOADS}"> <img src="{THEME_PATH}/images/blocks/CPG_Main_Menu/icon_downloads.gif" width="20" height="20" alt="" /><br /> {S_DOWNLOADS}</a></td><!-- ENDIF --> <!-- IF S_FORUMS --> <td align="center" width="15%" class="row2"><a href="{U_FORUMS}"> <img src="{THEME_PATH}/images/blocks/CPG_Main_Menu/icon_forums.gif" width="20" height="20" alt="" /><br /> {S_FORUMS}</a></td><!-- ENDIF --> <td align="center" width="15%" class="row2"><a href="{U_MY_ACCOUNT}"> <img src="{THEME_PATH}/images/blocks/CPG_Main_Menu/icon_profile.gif" width="20" height="20" alt="" /><br /> {S_MY_ACCOUNT}</a></td> <!-- IF S_GALLERY --> <td align="center" width="15%" class="row2"><a href="{U_GALLERY}"> <img src="{THEME_PATH}/images/blocks/CPG_Main_Menu/icon_themes.gif" width="20" height="20" alt="" /><br /> {S_GALLERY}</a></td><!-- ENDIF --> <!-- IF S_NEWS --> <td align="center" width="15%" class="row2"><a href="{U_NEWS}"> <img src="{THEME_PATH}/images/blocks/CPG_Main_Menu/icon_newfaq.gif" width="20" height="20" alt="" /><br /> {S_NEWS}</a></td><!-- ENDIF --> <td align="center" width="15%" class="row2"><a href="{U_ADMININDEX}"> <img src="{THEME_PATH}/images/blocks/CPG_Main_Menu/icon_extras.gif" width="20" height="20" alt="" /><br /> {S_ADMIN}</a></td> </tr> </table> <table class="tbl"> <tr> <td class="tbll"><img src="{THEME_PATH}/images/forums/spacer.gif" alt="" width="8" height="4" /></td> <td class="tblbot"><img src="{THEME_PATH}/images/forums/spacer.gif" alt="" width="8" height="4" /></td> <td class="tblr"><img src="{THEME_PATH}/images/forums/spacer.gif" alt="" width="8" height="4" /></td> </tr> </table> </td> </tr> <!-- ENDIF --> <tr> <td> <img src="{THEME_PATH}/images/spacer.gif" width="10" height="5" alt="" /> </td> </tr> <tr> <td> <table class="maintable" width="100%"> <tr> <!-- IF S_LEFTBLOCKS --> <td class="mainside" id="pe600" {B_L_VISIBLE} style="padding-left: 5px"> <!-- BEGIN leftblock --> <div class="blockhead"> <img align="left" alt="Toggle Content" title="Toggle Content" id="pic{leftblock.S_BID}" src="{leftblock.S_IMAGE}.gif" onclick="blockswitch('{leftblock.S_BID}');" style="cursor:pointer" /> <img src="{THEME_PATH}/images/spacer.gif" width="1" height="1" alt="" /> {leftblock.S_TITLE} </div> <div class="blockcontent" id="pe{leftblock.S_BID}" {leftblock.S_VISIBLE}> {leftblock.S_CONTENT} </div> <table class="tbl"> <tr> <td class="tbll"><img src="{THEME_PATH}/images/forums/spacer.gif" alt="" width="8" height="4" /></td> <td class="tblbot"><img src="{THEME_PATH}/images/forums/spacer.gif" alt="" width="8" height="4" /></td> <td class="tblr"><img src="{THEME_PATH}/images/forums/spacer.gif" alt="" width="8" height="4" /></td> </tr> </table><br /> <!-- END leftblock --> </td> <!-- ENDIF --> <td class="main"> <!-- IF IMPORTANT_MESSAGE --> <center><span style="font-size: 12px; color: #FF0000">{IMPORTANT_MESSAGE}</span></center><br /> <!-- ENDIF --> <!-- IF PAGE_TITLE --> <div class="pagetitle">{PAGE_TITLE}</div> <table class="tbl"> <tr> <td class="tbll"><img src="{THEME_PATH}/images/forums/spacer.gif" alt="" width="8" height="4" /></td> <td class="tblbot"><img src="{THEME_PATH}/images/forums/spacer.gif" alt="" width="8" height="4" /></td> <td class="tblr"><img src="{THEME_PATH}/images/forums/spacer.gif" alt="" width="8" height="4" /></td> </tr> </table><br /> <!-- ENDIF --> <!-- BEGIN messageblock --> <table class="tbt"> <tr> <td class="tbtl"><img src="{THEME_PATH}/images/forums/spacer.gif" width="22" height="22" alt="" /></td> <td class="tbtbot"><font size="3"><b>{messageblock.S_TITLE}</b></font></td> <td class="tbtr"><img src="{THEME_PATH}/images/forums/spacer.gif" alt="" width="124" height="22" /></td> </tr> </table> <div class="table1"> <div class="content" >{messageblock.S_CONTENT}</div><br /> <div align="center"> <!-- IF S_CAN_ADMIN --> [ {messageblock.S_OUTPUT} - {messageblock.S_REMAIN} - <a href="{messageblock.U_EDITMSG}">{messageblock.S_EDIT}</a> ] <!-- ELSE --> {messageblock.S_DATE} <!-- ENDIF --> </div> </div> <table class="tbl"> <tr> <td class="tbll"><img src="{THEME_PATH}/images/forums/spacer.gif" alt="" width="8" height="4" /></td> <td class="tblbot"><img src="{THEME_PATH}/images/forums/spacer.gif" alt="" width="8" height="4" /></td> <td class="tblr"><img src="{THEME_PATH}/images/forums/spacer.gif" alt="" width="8" height="4" /></td> </tr> </table><br /> <!-- END messageblock --> <!-- BEGIN centerblock --> <table class="tbt"> <tr> <td class="tbtl"><img src="{THEME_PATH}/images/forums/spacer.gif" width="22" height="22" alt="" /></td> <td class="tbtbot"><font size="3"><b>{centerblock.S_TITLE}</b></font></td> <td class="tbtr"><img src="{THEME_PATH}/images/forums/spacer.gif" alt="" width="124" height="22" /></td> </tr> </table> <div class="table1">{centerblock.S_CONTENT}</div> <table class="tbl"> <tr> <td class="tbll"><img src="{THEME_PATH}/images/forums/spacer.gif" alt="" width="8" height="4" /></td> <td class="tblbot"><img src="{THEME_PATH}/images/forums/spacer.gif" alt="" width="8" height="4" /></td> <td class="tblr"><img src="{THEME_PATH}/images/forums/spacer.gif" alt="" width="8" height="4" /></td> </tr> </table><br /> <!-- END centerblock -->

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
unix / Apache 2.2.15 / MySQL 5.0.92 / PHP 5.3.8/ CMS 9.4.0.0


I apologize, I was tired, just got off work when I posted that reply. I posted the generated code instead of the source.

Change
<tr> <!-- IF S_FLASH --> <td class="head2"><a href="{U_MAININDEX}">{S_FLASH}</a></td> <!-- ELSE --> <td class="head2"><a href="{U_MAININDEX}"><img src="{THEME_PATH}/images/{S_LOGO}" alt="{S_SITENAME}" title="{S_SITENAME}" /></a></td> <!-- ENDIF --> <td class="head1" align="center" width="100%">{S_BANNER}</td> </tr>

to
<tr><td class="head2"><a href="{U_MAININDEX}"><img src="{THEME_PATH}/images/{S_LOGO}" alt="{S_SITENAME}" title="{S_SITENAME}" /></a></td></tr>

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Multiple Setups


Thanks again for the reply,
But it has not had the desired effect. There is no image now and it just says
"Central Oak Flats Scout Group" in text?

Please help

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
unix / Apache 2.2.15 / MySQL 5.0.92 / PHP 5.3.8/ CMS 9.4.0.0


Got the image back "logo.gif" was missing. But it is not centered, will a simple html center tag work here?

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
unix / Apache 2.2.15 / MySQL 5.0.92 / PHP 5.3.8/ CMS 9.4.0.0


change head1 in style.css to
.head1 { height: 80px; width: 1182px; text-align: center; }
Attachment: shot0195.png
Description
Filesize 77.25 KiB
Viewed 1 Time(s)
You are not allowed to view/download this attachment

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Multiple Setups

Last edited by Dizfunkshunal on Mon Oct 24, 2011 8:34 am; edited 1 time in total


Thanks again and no worries, please take all the time you need.

Thanks alot.

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
unix / Apache 2.2.15 / MySQL 5.0.92 / PHP 5.3.8/ CMS 9.4.0.0


This hasn't seemed to have centered on my browser.

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
unix / Apache 2.2.15 / MySQL 5.0.92 / PHP 5.3.8/ CMS 9.4.0.0

Last edited by macuserau on Mon Oct 24, 2011 10:52 am; edited 1 time in total


hmm, I can't find a browser where it doesn't work - problem is in your browser/ cache.

A little overlap at the top but that's the height.

DonationsPro for DragonflyCMS & SMF

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):


oh sorry about that will reset it and recheck it

The logo.gif is still not centered. Thanks for trying though.

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
unix / Apache 2.2.15 / MySQL 5.0.92 / PHP 5.3.8/ CMS 9.4.0.0


I'm sure Diz will adjust that - he's done a pretty good job so far.

DonationsPro for DragonflyCMS & SMF

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):


Thanks, it seems to have worked in his screen shot, not sure why it hasn't worked for me though?

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
unix / Apache 2.2.15 / MySQL 5.0.92 / PHP 5.3.8/ CMS 9.4.0.0


Sorry i thought I added this above. Let this be a lesson. lol not enough sleep makes many errors in function (brain)

<tr><td class="head2"><a href="{U_MAININDEX}"><img src="{THEME_PATH}/images/{S_LOGO}" alt="{S_SITENAME}" title="{S_SITENAME}" /></a></td></tr>

change the head2 to head1

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Multiple Setups

All times are UTC
Go to page 1, 2 Next


Jump to: