Snitz Forums 2000
Snitz Forums 2000
Home | Profile | Register | Active Topics | Members | Search | FAQ
Username:
 Password:
Save Password
Forgot your Password?

 All Forums
 Help Groups for Snitz Forums 2000 Users
 Help: General / Classic ASP versions(v3.4.XX)
 CSS Issue		  New Topic
 Printer Friendly
Author Previous Topic Topic Next Topic  

Carefree
Advanced Member

Philippines
4207 Posts
Posted - 18 February 2016 :  07:33:09  Show Profile  Reply with Quote
I know this code SHOULD work when inserted into the header style section, but the hover and active aspects are being ignored.


	Response.Write	".btn {color:" & strHeadFontColor & "; padding:0px 3px 1px 3px; border:1px solid " & strTableBorderColor & "; text-shadow:0px 1px 1px #000; font-weight:normal; text-decoration:none; border-radius:25px; -webkit-border-radius:25px; box-shadow:3px 1.5px 1.5px rgba(96,96,96, 0.6); background:" & strPopUpTableColor & "; background-image:url(" & strImageURL & strHeadCellImage & "); background-size:100% 100%;}" & vbNewLine & _
		".btn:hover {background-color: " & strHeadCellColor & "; cursor: pointer;}" & vbNewLine & _
		".btn:active {background-color: " & strCategoryCellColor & "; box-shadow: 0 5px rgba(134,134,134, 0.8); transform: translateY(4px);}" & vbNewLine

HuwR
Forum Admin

United Kingdom
20584 Posts
Posted - 18 February 2016 :  12:02:07  Show Profile  Visit HuwR's Homepage
does it look as though it is being written correctly into the header ?
MVC .net dev/test site | MVC .net running on Raspberry Pi
Go to Top of Page

Carefree
Advanced Member

Philippines
4207 Posts
Posted - 18 February 2016 :  13:00:21  Show Profile
Yes. Here's the extract:


.btn {color:#FFFFFF; padding:0px 3px 1px 3px; border:1px solid #000000; text-shadow:0px 1px 1px #000; font-weight:bold; text-decoration:none; border-radius:25px; -webkit-border-radius:25px; box-shadow:3px 1.5px 1.5px rgba(96,96,96, 0.6); background:#84A97D; background-image:url(images/themes/Green/bgt.png); background-size:100% 100%;}
.btn:hover {color:#FFFFFF; background-color: " style="background-image:url(images/themes/Green/bgt.png); background-size:100% 100%;"; cursor: pointer; font-weight:bold;}
.btn:active {color:#EEEEEE; background-color: " style="background-image:url(images/themes/Green/bgr.png); background-size:100% 100%;"; font-weight:bold; box-shadow:0 5px rgba(134,134,134, 0.8); transform:translateY(4px);}


That didn't work, so I tried another. Same result. Button is fine, hover and active do not do anything.


.btn {color:#FFFFFF; padding:0px 3px 1px 3px; border:1px solid #000000; text-shadow:0px 1px 1px #000; font-weight:bold; text-decoration:none; border-radius:25px; -webkit-border-radius:25px; box-shadow:3px 1.5px 1.5px rgba(96,96,96, 0.6); background:#84A97D; background-image:url(images/themes/Green/bgt.png); background-size:100% 100%;}
.btn:hover {color:#FFF; background-image:url(images/themes/Green/bgt.png); background-size:100% 100%; cursor: pointer; font-weight:bold;}
.btn:active {color:green; background-color:#FFF; font-weight:bold; box-shadow:0 5px rgba(134,134,134, 0.8); transform:translateY(4px);}
Go to Top of Page

HuwR
Forum Admin

United Kingdom
20584 Posts
Posted - 18 February 2016 :  13:52:59  Show Profile  Visit HuwR's Homepage
your hover style does not appear do anything different to your base style?

what element are you trying to style, it may not support :active
MVC .net dev/test site | MVC .net running on Raspberry Pi
Go to Top of Page

Carefree
Advanced Member

Philippines
4207 Posts
Posted - 18 February 2016 :  15:41:19  Show Profile
Trying to style submit buttons and they do support :active. Neither the hover nor the active has any effect whatsoever. On another site I wrote, the same type of code works exactly the way I intended; the only difference being colors.
Go to Top of Page

HuwR
Forum Admin

United Kingdom
20584 Posts
Posted - 18 February 2016 :  16:19:17  Show Profile  Visit HuwR's Homepage
what I meant was in the example you posted
these two styles are identical, so nothing would happen when you hover over the button

.btn {color:#FFFFFF; padding:0px 3px 1px 3px; border:1px solid #000000; text-shadow:0px 1px 1px #000; font-weight:bold; text-decoration:none; border-radius:25px; -webkit-border-radius:25px; box-shadow:3px 1.5px 1.5px rgba(96,96,96, 0.6); background:#84A97D; background-image:url(images/themes/Green/bgt.png); background-size:100% 100%;}
.btn:hover {color:#FFF; background-image:url(images/themes/Green/bgt.png); background-size:100% 100%; cursor: pointer; font-weight:bold;}

Other than that it appears to work fine in a simple test page, so it must be something else that is breaking it or prevent the style being applied
MVC .net dev/test site | MVC .net running on Raspberry Pi
Go to Top of Page

Carefree
Advanced Member

Philippines
4207 Posts
Posted - 18 February 2016 :  18:07:41  Show Profile
I got it working on full-sized pages; but popup pages are another issue. Issue was in another function which stylized header cells if enabled.

Here's an example of the html output of a popup page which doesn't work the way it should. All the coloring for everything BUT the buttons is working. The buttons (btn class) work properly if I switch the header (with identical CSS lines) and open in full page.


<html>

<head>
<title>Modular Snitz Beta</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="copyright" content="This forum code is (C) 2000-16 Michael Anderson, Pierre Gorissen, Huw Reddick and Richard Kinser, non-Forum related code is (C) 2016.">
<script type="text/javascript" src="http://ff.kis.scr.kaspersky-labs.com/1B74BD89-2A22-4B93-B451-1C9E1052A0EC/main.js" charset="UTF-8"></script><script type="text/javascript" src="./media/media.js"></script><link rel="stylesheet" href="./media/mediaboxAdvBlack.css" type="text/css" media="screen" /><script src="./media/mootools-1.2.4-core.js" type="text/javascript"></script><script src="./media/mediaboxAdv-1.1.6.js" type="text/javascript"></script><style><!--
a:link    {color:#585721;text-decoration:underline}
a:visited {color:#808060;text-decoration:underline}
a:hover   {color:#800000;text-decoration:underline}
a:active  {color:#B9B9A4;text-decoration:underline}
.spnSearchHighlight {background-color:#FFFF00}
.spnMessageText a:link    {color:#585721;text-decoration:underline}
.spnMessageText a:visited {color:#B8860B;text-decoration:underline}
.spnMessageText a:hover   {color:#FF0000;text-decoration:underline}
.spnMessageText a:active  {color:#FF0000;text-decoration:underline}
.item1    {background-color:" style="background-image:url(images/themes/Olive-Bright/bgt.png); background-size:100% 100%;"; background-image:URL(http://localhost/forum/images/menuitemhot_bg.png); background-repeat:repeat-x; border-radius:5px 5px 0 0;}
.item2    {background-color:" style="background-image:url(images/themes/Olive-Bright/bgt.png); background-size:100% 100%;"; background-image:URL(http://localhost/forum/images/menuitemhot_bg.png); background-repeat:repeat-x; border-radius: 5px 5px 0 0;}
.item3    {background-color:" style="background-image:url(images/themes/Olive-Bright/bgt.png); background-size:100% 100%;"; background-image:URL(http://localhost/forum/images/menuitemhot_bg.png); background-repeat:repeat-x; border-radius: 0px 0px 5 5;}
CODE, .cpp-inline {color:#990000; font-family:Verdana, Arial, Helvetica; } 
PRE, .cpp-pre {background-color:#D8D9B3;padding: 7pt; font-family:Verdana, Arial, Helvetica; font-size:3; color:#000000; 
	white-space:pre; width:98%;} 
.cpp-comment {color:#006633; } 
.cpp-literal {color:#CC0000; } 
.cpp-keyword {color:#0000FF; } 
.cpp-preprocessor {color:#0000FF;} 
.xml-tag {color:#AA4400 } 
.xml-bracket { color:#0000FF } 
.xml-comment { color:#008800} 
.xml-cdata { color:#AA0088 } 
.xml-attribute-name{ color:#FF0000 } 
.xml-attribute-value{color:#0000FF} 
.scrollcode {height:200px; width:650px; overflow:auto; background-color:#D8D9B3; color:#000000; border:thin solid #000000;}
.btn {color:#FFFFFF; padding:0px 3px 1px 3px; border:1px solid #000000; text-shadow:0px 1px 1px #000; font-weight:bold; text-decoration:none; border-radius:25px; -webkit-border-radius:25px; box-shadow:3px 1.5px 1.5px rgba(96,96,96, 0.6); background:#AEAC6E; background-image:url(images/themes/Olive-Bright/bgt.png); background-size:100% 100%;}
.btn:hover {color:#000000; background:#D8D9B3; background-image:url(images/transparent.png); background-size:100% 100%; cursor: pointer; font-weight:bold;}
.btn:active {color:#B9B9A4; background:#C2BD8B; background-image:url(images/themes/Olive-Bright/bgr.png); background-size:100% 100%; font-weight:bold; box-shadow:0 5px rgba(134,134,134, 0.8); transform:translateY(4px);}
input.radio {background:#AEAC6E;color:#000000}
--></style>
<script language="JavaScript" type="text/javascript">
<!-- hide from JavaScript-challenged browsers
function openWindow3(url) {
	popupWin = window.open(url,'new_page','width=400,height=450,scrollbars=yes')
}
// done hiding -->
</script>
</head>

<body bgColor="#D8D9B3" text="#000000" link="#585721" aLink="#B9B9A4" vLink="#808060" onLoad="window.focus();">

<table width="100%" height="100%" align="center">
  <tr>
    <td align="center" valign="middle">
    <div align="center">
    <font face="Verdana, Arial, Helvetica" size="3">
      <p align="center"><font face="Verdana, Arial, Helvetica" size="3"><b>Category/Forum Order Configuration</b></font></p>
      <form action="admin_config_order.asp" method="post" id="Form1" name="Form1">
      <input type="hidden" name="Method_Type" value="Write_Configuration">
      <input name="NumberCategories" type="hidden" value="3">
      <table style="border-radius: 25px; padding-top:20px; padding-left:10px; padding-right:10px; padding-bottom:10px; box-shadow:10px 5px 5px rgba(96,96,96, 0.8);" bgcolor="#AEAC6E" cellspacing="0" cellpadding="0" align="center">
        <tr>
          <td bgcolor="#000000">
            <table border="0" cellspacing="1" cellpadding="4">
              <tr>
                <td align="center" bgcolor="" style="background-image:url(images/themes/Olive-Bright/bgt.png); background-size:100% 100%;"" nowrap valign="top"><b><font face="Verdana, Arial, Helvetica" size="3" color="#FFFFFF">Category/Forum</font></b></td>
                <td align="center" bgcolor="" style="background-image:url(images/themes/Olive-Bright/bgt.png); background-size:100% 100%;"" nowrap valign="top"><b><font face="Verdana, Arial, Helvetica" size="3" color="#FFFFFF">Order</font></b></td>
              </tr>
<input name="NumberForums3" type="hidden" value="1"> 
              <tr>
                <td bgcolor="" style="background-image:url(images/themes/Olive-Bright/bgr.png); background-size:100% 100%;"" align="left"><font face="Verdana, Arial, Helvetica" size="3" color="#FFFFFF"><b>Entertainment</b></font></td>
                <td bgcolor="" style="background-image:url(images/themes/Olive-Bright/bgr.png); background-size:100% 100%;"" align="center">
                <input name="SortCatID1" type="hidden" value="3">
                <select name="SortCategory1">
                	<option value="1" selected>1</option>
                	<option value="2">2</option>
                	<option value="3">3</option>
                </select></td>
              </tr>
              <tr>
                <td bgcolor="#D8D9B3" align="left"><font face="Verdana, Arial, Helvetica" size="3" color="#000000"><b><img src="images/icon_blank.gif" width="18" height="18" border="0" alt="" title="" hspace="0" align="absmiddle" /> Literature</b></font></td>
                <td bgcolor="#D8D9B3" align="center">
                <input name="SortCatID1SortForumID1" type="hidden" value="10">
                <select name="SortCat1SortForum1">
                	<option value="1" selected>1</option>
                </select></td>
              </tr>
<input name="NumberForums1" type="hidden" value="5"> 
              <tr>
                <td bgcolor="" style="background-image:url(images/themes/Olive-Bright/bgr.png); background-size:100% 100%;"" align="left"><font face="Verdana, Arial, Helvetica" size="3" color="#FFFFFF"><b>Snitz Forums 2000</b></font></td>
                <td bgcolor="" style="background-image:url(images/themes/Olive-Bright/bgr.png); background-size:100% 100%;"" align="center">
                <input name="SortCatID2" type="hidden" value="1">
                <select name="SortCategory2">
                	<option value="1" selected>1</option>
                	<option value="2">2</option>
                	<option value="3">3</option>
                </select></td>
              </tr>
              <tr>
                <td bgcolor="#D8D9B3" align="left"><font face="Verdana, Arial, Helvetica" size="3" color="#000000"><b><img src="images/icon_blank.gif" width="18" height="18" border="0" alt="" title="" hspace="0" align="absmiddle" /> Announcements</b></font></td>
                <td bgcolor="#D8D9B3" align="center">
                <input name="SortCatID2SortForumID1" type="hidden" value="9">
                <select name="SortCat2SortForum1">
                	<option value="1" selected>1</option>
                	<option value="2">2</option>
                	<option value="3">3</option>
                	<option value="4">4</option>
                	<option value="5">5</option>
                </select></td>
              </tr>
              <tr>
                <td bgcolor="#D8D9B3" align="left"><font face="Verdana, Arial, Helvetica" size="3" color="#000000"><b><img src="images/icon_blank.gif" width="18" height="18" border="0" alt="" title="" hspace="0" align="absmiddle" /> Software Bugs</b></font></td>
                <td bgcolor="#D8D9B3" align="center">
                <input name="SortCatID2SortForumID2" type="hidden" value="7">
                <select name="SortCat2SortForum2">
                	<option value="1" selected>1</option>
                	<option value="2">2</option>
                	<option value="3">3</option>
                	<option value="4">4</option>
                	<option value="5">5</option>
                </select></td>
              </tr>
              <tr>
                <td bgcolor="#D8D9B3" align="left"><font face="Verdana, Arial, Helvetica" size="3" color="#000000"><b><img src="images/icon_blank.gif" width="18" height="18" border="0" alt="" title="" hspace="0" align="absmiddle" /> Sub-Forum 1</b></font></td>
                <td bgcolor="#D8D9B3" align="center">
                <input name="SortCatID2SortForumID3" type="hidden" value="8">
                <select name="SortCat2SortForum3">
                	<option value="1" selected>1</option>
                	<option value="2">2</option>
                	<option value="3">3</option>
                	<option value="4">4</option>
                	<option value="5">5</option>
                </select></td>
              </tr>
              <tr>
                <td bgcolor="#D8D9B3" align="left"><font face="Verdana, Arial, Helvetica" size="3" color="#000000"><b><img src="images/icon_blank.gif" width="18" height="18" border="0" alt="" title="" hspace="0" align="absmiddle" /> Testing Forums</b></font></td>
                <td bgcolor="#D8D9B3" align="center">
                <input name="SortCatID2SortForumID4" type="hidden" value="1">
                <select name="SortCat2SortForum4">
                	<option value="1">1</option>
                	<option value="2">2</option>
                	<option value="3" selected>3</option>
                	<option value="4">4</option>
                	<option value="5">5</option>
                </select></td>
              </tr>
              <tr>
                <td bgcolor="#D8D9B3" align="left"><font face="Verdana, Arial, Helvetica" size="3" color="#000000"><b><img src="images/icon_blank.gif" width="18" height="18" border="0" alt="" title="" hspace="0" align="absmiddle" /> Weblogs</b></font></td>
                <td bgcolor="#D8D9B3" align="center">
                <input name="SortCatID2SortForumID5" type="hidden" value="5">
                <select name="SortCat2SortForum5">
                	<option value="1">1</option>
                	<option value="2">2</option>
                	<option value="3">3</option>
                	<option value="4" selected>4</option>
                	<option value="5">5</option>
                </select></td>
              </tr>
<input name="NumberForums2" type="hidden" value="1"> 
              <tr>
                <td bgcolor="" style="background-image:url(images/themes/Olive-Bright/bgr.png); background-size:100% 100%;"" align="left"><font face="Verdana, Arial, Helvetica" size="3" color="#FFFFFF"><b>Admins and Moderators</b></font></td>
                <td bgcolor="" style="background-image:url(images/themes/Olive-Bright/bgr.png); background-size:100% 100%;"" align="center">
                <input name="SortCatID3" type="hidden" value="2">
                <select name="SortCategory3">
                	<option value="1">1</option>
                	<option value="2" selected>2</option>
                	<option value="3">3</option>
                </select></td>
              </tr>
              <tr>
                <td bgcolor="#D8D9B3" align="left"><font face="Verdana, Arial, Helvetica" size="3" color="#000000"><b><img src="images/icon_blank.gif" width="18" height="18" border="0" alt="" title="" hspace="0" align="absmiddle" /> Corrective Custody</b></font></td>
                <td bgcolor="#D8D9B3" align="center">
                <input name="SortCatID3SortForumID1" type="hidden" value="6">
                <select name="SortCat3SortForum1">
                	<option value="1">1</option>
                </select></td>
              </tr>
            </table>
          </td>
        </tr>
		<tr valign="middle">
			<td colspan="3" align="center" style="line-height:50%;"><br />                <input type="Submit" class="btn" name="submit" value="Submit" />
                <input type="Reset" class="btn" name="reset" value="Reset" />
				</td>
		</tr>
      </table>
      </form>
    <p align="center"><font face="Verdana, Arial, Helvetica" size="3"><a href="JavaScript:onClick=window.close()">Close Window</a></font></p>
    </font>
    </div>
    </td>
  </tr>
</table>
</body>
</html>
Edited by - Carefree on 19 February 2016 00:38:33
Go to Top of Page

HuwR
Forum Admin

United Kingdom
20584 Posts
Posted - 19 February 2016 :  07:26:35  Show Profile  Visit HuwR's Homepage
sorry carefree but the above example didn't work for me as a main page or a popup, there are errors in the style section which basically prevents it loading any styles

in the .itemX declarations you have " characters which break the styling.

Once I fixed the style section it worked as both main page or popup.
Go to Top of Page

Carefree
Advanced Member

Philippines
4207 Posts
Posted - 19 February 2016 :  09:22:47  Show Profile
Ahh - that was it and, since I have no idea what the .itemX pertained to, I just dumped them. Easier later to fix a tiny one rather than a big one. Thanks for the help again, HuwR.

Next big project is the plug-in panels, getting there.
Edited by - Carefree on 19 February 2016 09:25:52
Go to Top of Page
  Previous Topic Topic Next Topic  
 New Topic
 Printer Friendly
Jump To:
Snitz Forums 2000 © 2000-2021 Snitz™ Communications Go To Top Of Page
This page was generated in 0.46 seconds. Powered By: Snitz Forums 2000 Version 3.4.07