cindysei
asked on
Why is this CSS code not working in a template
My colleague has asked me to put a button into a web page template. I want to put the button into an empty table column/row. The button appears in the template in the table column, but not on the pages the template applies to (even though it goes through the process of updating the pages in Dreamweaver). Also, for some reason, the font style is lost in button - it should be Arial but it's coming in as a Times or something. I'm a beginner web designer so all this is new to me. Here's the HTML code that I copied and pasted into my web page template table column:
<a class="small blue awesome" href="http://iris.ca/storelist.html">Schedule an eye exam</a>
Here's the CSS code that appears in the external style sheet that page links to:
/* New CSS Buttons */
.awesome, .awesome:visited {
background: #222 url(/images/alert-overlay.
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
}
.awesome:hover
{ background-color: #111; color: #fff; text-decoration: none; }
.awesome:active
{ top: 1px; text-decoration: none; color: #fff; }
.small.awesome, .small.awesome:visited
{ font-size: 11px; padding: color: #fff; }
.awesome, .awesome:visited,
.medium.awesome, .medium.awesome:visited
{ font-size: 13px; color: #fff; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
.large.awesome, .large.awesome:visited
{ font-size: 14px; padding: 8px 14px 9px; color: #fff; }
.blue.awesome, .blue.awesome:visited
{ background-color: #2daebf; color: #fff; }
.blue.awesome:hover
{ background-color: #007d9a; color: #fff; }
Is there something else I have to add? Thanks, Cindy
<a class="small blue awesome" href="http://iris.ca/storelist.html">Schedule an eye exam</a>
Here's the CSS code that appears in the external style sheet that page links to:
/* New CSS Buttons */
.awesome, .awesome:visited {
background: #222 url(/images/alert-overlay.
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
}
.awesome:hover
{ background-color: #111; color: #fff; text-decoration: none; }
.awesome:active
{ top: 1px; text-decoration: none; color: #fff; }
.small.awesome, .small.awesome:visited
{ font-size: 11px; padding: color: #fff; }
.awesome, .awesome:visited,
.medium.awesome, .medium.awesome:visited
{ font-size: 13px; color: #fff; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
.large.awesome, .large.awesome:visited
{ font-size: 14px; padding: 8px 14px 9px; color: #fff; }
.blue.awesome, .blue.awesome:visited
{ background-color: #2daebf; color: #fff; }
.blue.awesome:hover
{ background-color: #007d9a; color: #fff; }
Is there something else I have to add? Thanks, Cindy
ASKER
Hi - here is the link to the web page that uses the template. I want to add the "ask IRIS doctor" button (to the right of the store hours - third column of table):
http://iris.ca/storepages/627page.html
I'm not sure if it's exactly Arial font but it's supposed to be sans serif - right now it's showing as Times or something.
http://iris.ca/storepages/627page.html
I'm not sure if it's exactly Arial font but it's supposed to be sans serif - right now it's showing as Times or something.
ASKER
I just realized that the link in HTML should be or will be a link to a php document and that the text in the button will be "Ask an IRIS Doctor" not "Schedule an eye exam" but I don't think that matters regarding code. Sorry if this was confusing.
Right now there is no link there at all, so it's hard to test. Can you put the relevant HTML back in your page there and let us know when it is ready to view?
Usually CSS behaves unexpectedly due to conflicts with other CSS declarations higher up in the cascade.
Usually CSS behaves unexpectedly due to conflicts with other CSS declarations higher up in the cascade.
ASKER
I don't want to make it live - but I will send you the code tomorrow when I'm at work but I just thought - could it be that the part where I want to put the button is an editable part of template and I need to make it uneditable for it to show up in my other pages template is applied to?
The code doesn't do us all that much good. Can you publish a test page instead?
>> I want to put the button is an editable part of template and I need to make it uneditable for it to show
>> up in my other pages template is applied to
Yes. If you make changes to an editable area of a DW template, it will only show up in future child pages from that template. Existing pages will be unaffected.
>> I want to put the button is an editable part of template and I need to make it uneditable for it to show
>> up in my other pages template is applied to
Yes. If you make changes to an editable area of a DW template, it will only show up in future child pages from that template. Existing pages will be unaffected.
The page you sent us loads the awesome class just fine. From what you are saying it sounds like your iris.css isnt getting loaded properly on the template pages.
Oh and FYI you are loading iris.css twice on the page you sent us.
Oh and FYI you are loading iris.css twice on the page you sent us.
ASKER
Attached is the test page template with the button - it appears on template but won't appear on the pages it's applied to. And again, the button isn't a Sans serif font which is what it should be. How can I fix this as well as make the button appear on the pages template is applied?
Where should I delete the extra iris.css?
http://www.iris.ca/templates/storepage_test.dwt
Where should I delete the extra iris.css?
http://www.iris.ca/templates/storepage_test.dwt
Cindy,
We can't see a .dwt file in the browser, it returns as Page Not Found.
Do me a favor, just make a new page based on the template, call it test.html and publish it with the button code. So the address would be:
http://www.iris.ca/test.html
No search engine will find it and we will then have everything we need.
>> as make the button appear on the pages template is applied?
As above, you need to publish the button in a non-editable area in the .dwt file. That will make it appear on all child pages when you update them with the new template code.
We can't see a .dwt file in the browser, it returns as Page Not Found.
Do me a favor, just make a new page based on the template, call it test.html and publish it with the button code. So the address would be:
http://www.iris.ca/test.html
No search engine will find it and we will then have everything we need.
>> as make the button appear on the pages template is applied?
As above, you need to publish the button in a non-editable area in the .dwt file. That will make it appear on all child pages when you update them with the new template code.
ASKER
Perfect.
To fix the font, just change line 343 in iris.css to:
.blue.awesome, .blue.awesome:visited {
background-color: #2DAEBF;
color: #FFFFFF;
font-family: Arial;
}
Also, remove one of the lines from the head section:
<link href="iris.css" rel="stylesheet" type="text/css" />
It appears both above and below the block of javascript and is unnecessary in both places. One or the other is fine.
To fix the font, just change line 343 in iris.css to:
.blue.awesome, .blue.awesome:visited {
background-color: #2DAEBF;
color: #FFFFFF;
font-family: Arial;
}
Also, remove one of the lines from the head section:
<link href="iris.css" rel="stylesheet" type="text/css" />
It appears both above and below the block of javascript and is unnecessary in both places. One or the other is fine.
ASKER
perfect! - another stupid question - how do I make that part of template uneditable so it will appear on the pages it links to?
In the .dwt file, there is a line that looks like this:
<!-- InstanceEndEditable -->
That defines the end of the editable region. Just make sure the button code is outside of that region. You may have to tweak the beginning block as well so you don't break a container tag in the process.
<!-- InstanceEndEditable -->
That defines the end of the editable region. Just make sure the button code is outside of that region. You may have to tweak the beginning block as well so you don't break a container tag in the process.
ASKER
I really don't understand. In Dreamweaver, how can I just make that one table row/column not editable? I put the code after <!--InstanceEndEditable-->
>> In Dreamweaver, how can I just make that one table row/column not editable?
It's not easy given your page structure. This is a drawback of using templates and tables for design because each of those elements is rather inflexible.
But since this is a footer and the content presumbably is not going to change page by page, why are there editable regions at all? Just remove the editable region code and the repeating entry codes and just have
The only time you use an Editable Region is for content that will change on a page-by-page basis. If the content is static, like a header, navbar, or footer, don't put it into an Editable Region.
It's not easy given your page structure. This is a drawback of using templates and tables for design because each of those elements is rather inflexible.
But since this is a footer and the content presumbably is not going to change page by page, why are there editable regions at all? Just remove the editable region code and the repeating entry codes and just have
<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="157" height="74" rowspan="3" align="left" valign="top"><span class="airmileslink style27"> Address
& Hours </span> </td>
<td width="212" valign="top" class="addressstore"> 805 West Pender<br />
Vancouver, BC<br />
V5C 1K6<br />
<br />
Ph: 604.681.7202<br />
Fx: 604.681.5267<!-- InstanceEndEditable --></td>
<td width="160" valign="top">
<p class="addressstore">Mon - Thurs: 9am - 6pm<br />
Fri - Sat: 9am - 10pm<br />
Sun: Closed </p>
</td>
<td width="271"><a class="medium blue awesome" href="http://iris.ca/askiris.php">Ask An IRIS Doctor</a> </td>
</tr>
<tr>
<td valign="top"> </td>
<td width="160" valign="top"> </td>
</tr>
<tr>
<td valign="top"> </td>
<td width="160" valign="top"> </td>
</tr>
</table>The only time you use an Editable Region is for content that will change on a page-by-page basis. If the content is static, like a header, navbar, or footer, don't put it into an Editable Region.
ASKER
Ok - I replaced the code you gave and it came up with a "Inconsistant Region Name" message box saying "OurServices" <Not resolved>. What does that mean?
BTW - I thought I had to keep this table editable because there are many store pages with different addresses and hours.
BTW - I thought I had to keep this table editable because there are many store pages with different addresses and hours.
>> Ok - I replaced the code you gave and it came up with a "Inconsistant Region Name" message box saying "OurServices" <Not resolved>. What does that mean?
It means that there is an open template tag somewhere and I missed it. Hard to de-template stuff in a text editor. Line 10 above still has some template code that shouldn't be there. Sorry about that.
>> BTW - I thought I had to keep this table editable because there are many store pages with different addresses and hours.
Yeah, I didn't realize how you were doing it until I looked at the site again. The better method would be to make each table cell editable and not the overall table if you absolutely have to do it this way. Personally, I would have used a database and pulled out the various info by query but different strokes for different folks.
It means that there is an open template tag somewhere and I missed it. Hard to de-template stuff in a text editor. Line 10 above still has some template code that shouldn't be there. Sorry about that.
>> BTW - I thought I had to keep this table editable because there are many store pages with different addresses and hours.
Yeah, I didn't realize how you were doing it until I looked at the site again. The better method would be to make each table cell editable and not the overall table if you absolutely have to do it this way. Personally, I would have used a database and pulled out the various info by query but different strokes for different folks.
<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="157" height="74" rowspan="3" align="left" valign="top">
<span class="airmileslink style27"> Address
& Hours </span> </td>
<td width="212" valign="top" class="addressstore">
<!-- InstanceBeginEditable name="Store Address" -->
805 West Pender<br />
Vancouver, BC<br />
V5C 1K6<br />
<br />
Ph: 604.681.7202<br />
Fx: 604.681.5267</td>
<td width="160" valign="top">
<!-- InstanceBeginEditable name="Store Hours" -->
<p class="addressstore">Mon - Thurs: 9am - 6pm<br />
Fri - Sat: 9am - 10pm<br />
Sun: Closed </p>
<!-- InstanceEndEditable -->
</td>
<td width="271"><a class="medium blue awesome" href="http://iris.ca/askiris.php">Ask An IRIS Doctor</a> </td>
</tr>
<tr>
<td valign="top"> </td>
<td width="160" valign="top"> </td>
</tr>
<tr>
<td valign="top"> </td>
<td width="160" valign="top"> </td>
</tr>
</table>ASKER
well, you know what you're doing - unfortunately, I don't. I've copied and replaced your code into my template - it's not working - it comes in with the code into my actual page - it's like there's no more table.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
was very thorough in working through problem.
As far as the font goes I don't see any spot in your code declaring Arial, if its not inherited then .awesome would need font-family:arial;