We value your feedback.
Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!
COURSE of the MONTH
12 days, 22 hours left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
Solved
Why is this CSS code not working in a template
Posted on 2011-03-07
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
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
-
10
8
2
20 Comments
Active 4 days ago
Do you have a site that we can see this on? From reading the code it appears there is something else going on.
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;
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;
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.
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.
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.
Active 4 days ago
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.
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.
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.
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.
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.
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>
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.
Rather than copy pasting my code which is only a small section of your template and is meant to illustrate how you would add editable regions to a cell alone, you might want to use design view to remove the editable and repeating regions and add them back in after selecting the table cell. That should prevent the worst of the errors or at least get DW to prompt you as to what the problem is.
The overall point is valid though. If you remove the editable region from the cell holding the button, that code will now replicate across the child pages. Debugging your entire template is not within the scope of this question and it's not something I can really do from here anyway.
The overall point is valid though. If you remove the editable region from the cell holding the button, that code will now replicate across the child pages. Debugging your entire template is not within the scope of this question and it's not something I can really do from here anyway.
Featured Post
We value your feedback.
Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS.
Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn the basics of jQuery including how to code hide show and toggles.
Reference your jQuery libraries:
(CODE)
Include your new external js/jQuery file:
(CODE)
Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month12 days, 22 hours left to enroll
777 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.