forum.coppermine-gallery.net
Support => cpg1.3.x Support => Older/other versions => cpg1.3 Themes/Skins/Templates => Topic started by: Anna on October 21, 2005, 01:14:11 am
-
So I customized the waterdrop theme and it looks great in firefox browser but awful in internet explorer.
IE: http://img472.imageshack.us/img472/361/galleryie4fg.jpg
Firefox: http://img472.imageshack.us/img472/9995/galleryf8ld.jpg
Anyone have an ideas on how this could be fixed?
-
post a link to your site instead of links to screenshots. The supporters have different browsers as well, there's little sense in looking just at screenshots without being able to see what you did.
-
http://www.thrill-threat.cjb.net/gallery/
-
there are several issues with your page: you have a JavaScript error, and you have
<MAP NAME="yea">
<AREA SHAPE=RECT COORDS="226,274,246,285" HREF="http://thrill-threat.cjb.net/gallery/">
<AREA SHAPE=RECT COORDS="252,270,281,285" HREF="http://thrill-threat.cjb.net/gallery/register.php">
<AREA SHAPE=RECT COORDS="285,271,308,284" HREF="http://thrill-threat.cjb.net/gallery/login.php?referer=%2Fgallery%2Findex.php">
<AREA SHAPE=RECT COORDS="313,272,338,284" HREF="http://thrill-threat.cjb.net/gallery/thumbnails.php?album=lastup&cat=0">
<AREA SHAPE=RECT COORDS="342,273,367,285" HREF="http://thrill-threat.cjb.net/gallery/search.php">
</MAP>
<!-- End of CSIM -->right after the </html> tag, which is bullsh*t
-
@Anna: If the Firefox version is the correct one, you should unhide the Powered by credit line.
-
No further support until you properly display the Powered by tag line.
-
oh, yes - I didn't notice that you hid this line. Do as suggested and put it back. Making in "invisible" by assigning the same text color as the backgrund equals removing it, which is a copyright violation. >:(
-
@Anna: If the Firefox version is the correct one, you should unhide the Powered by credit line.
That wasn't on purpose. I am still trying to fix the theme so everything is working properlly, and haven't exactly figured out how to make it show up.
-
there are several issues with your page: you have a JavaScript error, and you have <MAP NAME="yea">
<AREA SHAPE=RECT COORDS="226,274,246,285" HREF="http://thrill-threat.cjb.net/gallery/">
<AREA SHAPE=RECT COORDS="252,270,281,285" HREF="http://thrill-threat.cjb.net/gallery/register.php">
<AREA SHAPE=RECT COORDS="285,271,308,284" HREF="http://thrill-threat.cjb.net/gallery/login.php?referer=%2Fgallery%2Findex.php">
<AREA SHAPE=RECT COORDS="313,272,338,284" HREF="http://thrill-threat.cjb.net/gallery/thumbnails.php?album=lastup&cat=0">
<AREA SHAPE=RECT COORDS="342,273,367,285" HREF="http://thrill-threat.cjb.net/gallery/search.php">
</MAP>
<!-- End of CSIM -->right after the </html> tag, which is bullsh*t
Where should I put that then? I need the image map for my menu.
And for the coppermine link, I just put it in anycontent because I couldn't think of an easy way to unhide it since I liked my colors.
-
CSS - footer class. Unhide it.
-
CSS - footer class. Unhide it.
I put the link in the anycontent area instead. Because I am not sure exactly how to unhide it without changing all of my colors.
Unless you can tell me how to do it.
-
style.css - footer
Change the color.
-
style.css - footer
Change the color.
Ooo. ok. All fixed now. Sorry about that. I must have changed it accidently when I was customizing the gallery.
-
sure, only accidentally - not on purpose. Happens all the times. Happens to me as well. Even if you don't know your way around at all in html, you still find out how to accidentally mis-edit the footer class that isn't doing anything but determining the look of the "Powered by Coppermine" tag. How about saying something like "sorry"? Would make more sense instead of saying you edited it by accident, especially if you want support.
-
sure, only accidentally - not on purpose. Happens all the times. Happens to me as well. Even if you don't know your way around at all in html, you still find out how to accidentally mis-edit the footer class that isn't doing anything but determining the look of the "Powered by Coppermine" tag. How about saying something like "sorry"? Would make more sense instead of saying you edited it by accident, especially if you want support.
I honestly did do it by accident. I am not a freaking liar. When I was chaning the colors I wasn't paying attention to what the title of each section was. I just chose what color I wanted to change and went down the page replacing each one that matched with the new color. I am new at this so didn't exactly know what I was doing.There would be no reason I would try to hide it on purpose. I didn't even notice it was hidden till you pointed it out to me yesterday.
sjghssjdghsdjkg
And I DID say I was sorry. And I DID do it by accident since I was going through the thing pretty quickly. IF there is anything I hate more than anything else, it is being accused of something I didn't actually do.
-
FWIW, Anna did say she based the theme on water_drop. When I compared her version (from before) and water drop, it seemed the footer styles were unmodified. Since she insists it was an accident, I'd give her the benefit of the doubt, since it does seem like an oversight not to modify the footer section to account for her added black background.
-
OK, sorry, let's get back to the initial question then. You haven't removed the section
<MAP NAME="yea">
<AREA SHAPE=RECT COORDS="226,274,246,285" HREF="http://thrill-threat.cjb.net/gallery/">
<AREA SHAPE=RECT COORDS="252,270,281,285" HREF="http://thrill-threat.cjb.net/gallery/register.php">
<AREA SHAPE=RECT COORDS="285,271,308,284" HREF="http://thrill-threat.cjb.net/gallery/login.php?referer=%2Fgallery%2Findex.php">
<AREA SHAPE=RECT COORDS="313,272,338,284" HREF="http://thrill-threat.cjb.net/gallery/thumbnails.php?album=lastup&cat=0">
<AREA SHAPE=RECT COORDS="342,273,367,285" HREF="http://thrill-threat.cjb.net/gallery/search.php">
</MAP> - it's still after the </html> section. Edit http://www.thrill-threat.cjb.net/gallery/themes/water_drop/template.html, and replace everything with<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="{LANG_DIR}">
<head>
<title>{TITLE}</title>
<meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" />
<meta http-equiv="Pragma" content="no-cache" />
{META}
<link rel="stylesheet" href="themes/water_drop/style.css" />
<script type="text/javascript" src="scripts.js"></script>
<!-- $Id: template.html,v 1.4 2004/07/24 15:04:23 gaugau Exp $ -->
</head>
<body>
<table width="70%" height="100%" border="0" cellpadding="20" cellspacing="20">
<tr>
<td valign="top" bordercolor="#666666" bgcolor="#000000" style="border: 1px solid #ccd7e0; background-color: #000000;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" align="center">
<img src="http://img257.imageshack.us/img257/696/pmheader8sl.jpg" usemap="#yea" width="484" height="287" border="0" alt="" />
<br />
{LANGUAGE_SELECT_FLAGS}<br>{LANGUAGE_SELECT_LIST}
{THEME_SELECT_LIST}
</td>
</tr>
</table>
<img src="images/spacer.gif" width="1" height="15" /><br />
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top">
{ADMIN_MENU}
{GALLERY}
</td>
</tr>
</table>
</td>
</tr>
</table>
<map name="yea">
<area shape=rect coords="226,274,246,285" href="http://thrill-threat.cjb.net/gallery/">
<area shape=rect coords="252,270,281,285" href="http://thrill-threat.cjb.net/gallery/register.php">
<area shape=rect coords="285,271,308,284" href="http://thrill-threat.cjb.net/gallery/login.php">
<area shape=rect coords="313,272,338,284" href="http://thrill-threat.cjb.net/gallery/thumbnails.php?album=lastup&cat=0">
<area shape=rect coords="342,273,367,285" href="http://thrill-threat.cjb.net/gallery/search.php">
</map>
</body>
</html>However, that's so-called "mystery meat navigation". If I was to go to your page, I wouldn't find it logical to hover over an image that doesn't clearly show that it's meant to be used for page navigation. The text is much too small to be visible as navigation, I would have taken it as watermark. I guarantee that many users will leave your site just because they can't find the right spot.
Joachim
-
OK, sorry, let's get back to the initial question then. You haven't removed the section <MAP NAME="yea">
<AREA SHAPE=RECT COORDS="226,274,246,285" HREF="http://thrill-threat.cjb.net/gallery/">
<AREA SHAPE=RECT COORDS="252,270,281,285" HREF="http://thrill-threat.cjb.net/gallery/register.php">
<AREA SHAPE=RECT COORDS="285,271,308,284" HREF="http://thrill-threat.cjb.net/gallery/login.php?referer=%2Fgallery%2Findex.php">
<AREA SHAPE=RECT COORDS="313,272,338,284" HREF="http://thrill-threat.cjb.net/gallery/thumbnails.php?album=lastup&cat=0">
<AREA SHAPE=RECT COORDS="342,273,367,285" HREF="http://thrill-threat.cjb.net/gallery/search.php">
</MAP> - it's still after the </html> section. Edit http://www.thrill-threat.cjb.net/gallery/themes/water_drop/template.html, and replace everything with<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="{LANG_DIR}">
<head>
<title>{TITLE}</title>
<meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" />
<meta http-equiv="Pragma" content="no-cache" />
{META}
<link rel="stylesheet" href="themes/water_drop/style.css" />
<script type="text/javascript" src="scripts.js"></script>
<!-- $Id: template.html,v 1.4 2004/07/24 15:04:23 gaugau Exp $ -->
</head>
<body>
<table width="70%" height="100%" border="0" cellpadding="20" cellspacing="20">
<tr>
<td valign="top" bordercolor="#666666" bgcolor="#000000" style="border: 1px solid #ccd7e0; background-color: #000000;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" align="center">
<img src="http://img257.imageshack.us/img257/696/pmheader8sl.jpg" usemap="#yea" width="484" height="287" border="0" alt="" />
<br />
{LANGUAGE_SELECT_FLAGS}<br>{LANGUAGE_SELECT_LIST}
{THEME_SELECT_LIST}
</td>
</tr>
</table>
<img src="images/spacer.gif" width="1" height="15" /><br />
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top">
{ADMIN_MENU}
{GALLERY}
</td>
</tr>
</table>
</td>
</tr>
</table>
<map name="yea">
<area shape=rect coords="226,274,246,285" href="http://thrill-threat.cjb.net/gallery/">
<area shape=rect coords="252,270,281,285" href="http://thrill-threat.cjb.net/gallery/register.php">
<area shape=rect coords="285,271,308,284" href="http://thrill-threat.cjb.net/gallery/login.php">
<area shape=rect coords="313,272,338,284" href="http://thrill-threat.cjb.net/gallery/thumbnails.php?album=lastup&cat=0">
<area shape=rect coords="342,273,367,285" href="http://thrill-threat.cjb.net/gallery/search.php">
</map>
</body>
</html>However, that's so-called "mystery meat navigation". If I was to go to your page, I wouldn't find it logical to hover over an image that doesn't clearly show that it's meant to be used for page navigation. The text is much too small to be visible as navigation, I would have taken it as watermark. I guarantee that many users will leave your site just because they can't find the right spot.
Joachim
I tried the code and it still looks bad in Internet Explorer.
And I knew there was something I forgot to do. I was going to put "Navigation" in big text above it on the image, but I totally forgot. Haha. Thanks for the reminder.
-
in http://www.thrill-threat.cjb.net/gallery/themes/water_drop/template.html, find
<td valign="top" bordercolor="#666666" bgcolor="#000000" style="border: 1px solid #ccd7e0; background-color: #000000;">and replace with<td valign="top" style="border:1px solid #CCD7E0; background-color:#000000;">
-
in http://www.thrill-threat.cjb.net/gallery/themes/water_drop/template.html, find<td valign="top" bordercolor="#666666" bgcolor="#000000" style="border: 1px solid #ccd7e0; background-color: #000000;">and replace with<td valign="top" style="border:1px solid #CCD7E0; background-color:#000000;">
*le sigh*
Still not working.
-
how does
<!-- BEGIN FANWIRED CODE BLOCK -->
<script language="javascript">
//ad size
fanwired_width="468"; fanwired_height="60";
//ad colors DO NOT USE # in front of hexadecimal color codes
fanwired_link="0000FF"; fanwired_url="008000"; fanwired_text="000000"; fanwired_bg="FFFFFF"; fanwired_border="336699";
</script>
<script type="text/javascript" src="http://www.jethit.com/ad/dynamic/fanwired.js"></script>
<!-- END FANWIRED CODE BLOCK --><br>
Host: <a href="http://fanwired.com">Fanwired</a><br>get included? What modifications did you apply to the theme?
-
how does <!-- BEGIN FANWIRED CODE BLOCK -->
<script language="javascript">
//ad size
fanwired_width="468"; fanwired_height="60";
//ad colors DO NOT USE # in front of hexadecimal color codes
fanwired_link="0000FF"; fanwired_url="008000"; fanwired_text="000000"; fanwired_bg="FFFFFF"; fanwired_border="336699";
</script>
<script type="text/javascript" src="http://www.jethit.com/ad/dynamic/fanwired.js"></script>
<!-- END FANWIRED CODE BLOCK --><br>
Host: <a href="http://fanwired.com">Fanwired</a><br>get included? What modifications did you apply to the theme?
That part is in anycontent. And I had that in before I modfied the theme and it was fine.
The only modifications I made were the colors and the header.
Maybe something happened when I made the layout alligned to the left.
-
then disable it temporarily and see if your issues go away then. Remember to force-refresh the pages when you have disabled this stuff.
-
then disable it temporarily and see if your issues go away then. Remember to force-refresh the pages when you have disabled this stuff.
I undid the left align and it did nothing.
-
Ok, so I tried replacing the template and the theme.php to the original and it did nothing. When I replaced the style.css to the original the colors worked, so something is wrong with the style.css. Here it is:
body {
background: url("images/bg.gif");
background-color: #000000;
font-family: "verdana;
font-size : 9px;
color: #000000;
margin: 0px;
}
table {
font-size : 12px;
}
h1{
font-weight: normal;
font-size: 12px;
font-family: verdana;
text-decoration: none;
line-height : 120%;
color: #718ea5;
margin: 2px;
}
h2 {
font-family: verdana;
background-image : url(images/box_left_icon.gif);
background-repeat : no-repeat;
background-position : left;
padding-left : 18px;
font-size: 12px;
margin: 0px;
}
h3 {
font-weight: normal;
font-family: verdana;
font-size: 12px;
margin: 2px;
}
p {
font-family: verdana;
font-size: 100%;
margin: 2px 0px;
}
ul {
margin-left: 5px;
padding: 0px;
}
li {
margin-left: 10px;
margin-top: 4px;
margin-bottom: 4px;
padding: 0px;
list-style-position: outside;
list-style-type: disc;
}
.textinput {
font-family: verdana;
font-size: 100%;
border: 1px solid #D1D7DC;
padding-right: 3px;
padding-left: 3px;
}
.listbox {
font-family: verdana;
font-size: 100%;
border: 1px solid #D1D7DC;
vertical-align : middle;
}
.button {
font-family: verdana;
font-size: 100%;
border: 1px solid #ccd7e0;
background-image : url(images/button_bg.gif);
background-position : bottom;
}
.comment_button {
font-family: verdana;
font-size: 100%;
border: 1px solid #ccd7e0;
background-image : url(images/button_bg.gif);
background-position : bottom;
padding-left: 3px;
padding-right: 3px;
}
.radio {
font-family: verdana;
font-size: 100%;
vertical-align : middle;
}
.checkbox {
font-family: verdana;
font-size: 100%;
vertical-align : middle;
}
a {
color: #000000;
text-decoration: none;
font-size : 9px;
}
a:hover {
color: #000000;
text-decoration: none;
background-color: #EFA7C3;
font-size : 9px;
}
bblink a {
color: #000000;
text-decoration: none;
}
bblink a:hover {
color: #000000;
text-decoration: none;
}
.maintable {
border: 1px solid #ccd7e0;
background-color: #FFF;
margin-top: 1px;
margin-bottom: 1px;
}
.tableh1 {
font-family: verdana;
background : #FAD591 ;
color: #808080;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}
.tableh1_compact {
font-family: verdana;
background : #FAD591 ;
color: #808080;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}
.tableh2 {
background: #ffffff ;
color : #000000;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}
.tableh2_compact {
background: #ffffff ;
color : #000000;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}
.tableb {
background: #C7BDAB;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}
.tableb_compact {
background: #C7BDAB;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}
.tablef {
background: #ffffff ;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.album_stat {
font-size : 85%;
margin: 5px 0px;
}
.thumb_title {
font-weight : bold;
font-size: 80%;
padding: 2px;
display : block;
}
.thumb_caption {
font-size: 80%;
padding: 1px;
display : block;
}
.thumb_caption a {
text-decoration: none;
color: #000000;
}
.thumb_num_comments {
font-weight: normal;
font-size: 85%;
padding: 2px;
font-style : italic;
display : block;
}
.user_thumb_infobox {
margin-top: 1px;
margin-bottom: 1px;
}
.user_thumb_infobox th {
font-weight : bold;
font-size: 100%;
margin-top: 1px;
margin-bottom: 1px;
text-align : center;
}
.user_thumb_infobox td {
font-size: 85%;
margin-top: 1px;
margin-bottom: 1px;
text-align : center;
}
.user_thumb_infobox a {
text-decoration: none;
color: #000000;
}
.user_thumb_infobox a:hover {
color: #000000;
text-decoration: none;
}
.sortorder_cell {
background : #FAD591;
color: #808080;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 20px;
margin: 0px;
}
.sortorder_options {
font-family: verdana;
background : #FAD591;
color: #808080;
padding: 0px;
margin: 0px;
font-weight: normal;
font-size: 80%;
white-space: nowrap;
}
.navmenu {
font-family: verdana;
color: #808080;
font-weight: bold;
background : #FAD591;
border-style: none;
}
.navmenu img {
margin-top: 1px;
margin-right: 5px;
margin-bottom: 1px;
margin-left: 5px;
}
.navmenu a {
position: relative;
display: block;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
text-decoration: none;
color: #808080;
}
.navmenu a:hover {
background : #C7BDAB;
text-decoration: none;
color: #000000;
}
.admin_menu_thumb {
font-family: verdana;
font-size: 90%;
border: 1px solid #ccd7e0;
background-image : url(images/button_bg.gif);
background-position : bottom;
color: #000000;
font-weight: bold;
margin-top: 0px;
margin-bottom: 0px;
width: 85px;
}
.admin_menu_thumb a {
color: #000000;
text-decoration: none;
display: block;
position: relative;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 10px;
padding-right: 10px;
}
.admin_menu_thumb a:hover {
color: #000000;
text-decoration: none;
}
.admin_menu {
font-family: verdana;
font-size: 90%;
border: 1px solid #CCD7E0;
background-image : url(images/button_bg.gif);
background-position : bottom;
background-repeat: repeat-x;
background-color: #808080;
color: #000000;
margin-top: 0px;
margin-bottom: 0px;
text-align: center;
}
.admin_menu a {
color: #000000;
text-decoration: none;
display: block;
position: relative;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 2px;
padding-right: 2px;
}
.admin_menu a:hover {
color: #000000;
text-decoration: none;
}
.comment_date{
color : #5F5F5F;
font-size: 90%;
vertical-align : middle;
}
.image {
border-style: solid;
border-width:1px;
border-color: #000000;
margin: 2px;
}
.imageborder {
border: 1px solid #000000;
background-color: #808080;
margin-top: 30px;
margin-bottom: 30px;
}
.thumbnails {
background: #C7BDAB;
padding: 5px;
}
.footer {
font-size : 9px;
color: #ffffff;
}
.footer a {
text-decoration: none;
color: #ffffff;
}
.footer a:hover {
color: #ffffff;
text-decoration: none;
}
.statlink {
color: #808080;
}
.statlink a {
text-decoration: none;
color: #808080;
}
.statlink a:hover {
color: #808080;
text-decoration: none;
}
.alblink a {
text-decoration: none;
color: #000000;
}
.alblink a:hover {
color: #000000;
text-decoration: none;
}
.catlink {
display: block;
margin-bottom: 2px;
}
.catlink a {
text-decoration: none;
color: #000000;
}
.catlink a:hover {
color: #000000;
text-decoration: none;
}
.topmenu {
font-family: verdana;
line-height : 130%;
font-size : 110%;
}
.topmenu a {
color : #000000;
text-decoration : none;
}
.topmenu a:hover {
color : #000000;
text-decoration : none;
}
.img_caption_table {
border: none;
background-color: #808080;
width : 100%;
margin : 0px;
}
.img_caption_table th {
background: #D1D7DC ;
font-size : 100%;
color : #000000;
padding-top: 4px;
padding-right: 10px;
padding-bottom: 4px;
padding-left: 10px;
border-top : 1px solid #808080;
}
.img_caption_table td {
background: #C7BDAB;
padding-top: 6px;
padding-right: 10px;
padding-bottom: 6px;
padding-left: 10px;
border-top : 1px solid #808080;
}
.debug_text {
border: #BDBEBD;
background-color: #EFEFEF;
width : 100%;
margin : 0px;
}
.clickable_option {
border-bottom : 1px dotted blue;
cursor : hand;
}
.listbox_lang {
color: #000666;
background-color: #C7BDAB;
border: 1px solid #C7BDAB;
font-size: 80%;
font-family: verdana;
vertical-align : middle;
}
.debug_text {
border: #BDBEBD;
background-color: #EFEFEF;
width : 100%;
margin : 0px;
.clickable_option {
border-bottom : 1px dotted blue;
cursor : hand;
}
.listbox_lang {
color: #000000;
background-color: #D1D7DC;
border: 1px solid #D1D7DC;
font-size: 80%;
font-family: Arial, Helvetica, sans-serif;
vertical-align : middle;
}
-
Ok, I kind of put this off for awhile to work on other stuff.
I still need to figure out what is wrong though.
-
Ok, you can close this now. It FINALLY works. Heh.
Thanks to anyone who helped me out.