?
Solved

Why is this CSS code not working in a template

Posted on 2011-03-07
20
Medium Priority
?
407 Views
Last Modified: 2012-05-11
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.png) repeat-x;
      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
0
Comment
Question by:cindysei
  • 10
  • 8
  • 2
20 Comments
 
LVL 12

Expert Comment

by:Chad Haney
ID: 35065037
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;
0
 

Author Comment

by:cindysei
ID: 35066079
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.
0
 

Author Comment

by:cindysei
ID: 35066116
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.
0
Technology Partners: We Want Your Opinion!

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!

 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 35066177
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.  
0
 

Author Comment

by:cindysei
ID: 35066214
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?
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 35066313
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.
0
 
LVL 12

Expert Comment

by:Chad Haney
ID: 35070809
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.
0
 

Author Comment

by:cindysei
ID: 35071497
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
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 35071582
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.
0
 

Author Comment

by:cindysei
ID: 35071846
done - you can go to that link now:

http://www.iris.ca/test.html
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 35071895
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.
0
 

Author Comment

by:cindysei
ID: 35072160
perfect! - another stupid question - how do I make that part of template uneditable so it will appear on the pages it links to?
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 35072555
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.
0
 

Author Comment

by:cindysei
ID: 35072683
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--> - but now button disappears.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 35072766
>> 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

<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">&nbsp;Address
      &amp; 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">&nbsp;</td>
    <td width="160" valign="top">&nbsp;</td>
  </tr>
  <tr>
    <td valign="top">&nbsp;</td>
    <td width="160" valign="top">&nbsp;</td>
  </tr>
</table>

Open in new window


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.
0
 

Author Comment

by:cindysei
ID: 35072878
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.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 35074164
>> 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.


<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">&nbsp;Address
      &amp; 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">&nbsp;</td>
    <td width="160" valign="top">&nbsp;</td>
  </tr>
  <tr>
    <td valign="top">&nbsp;</td>
    <td width="160" valign="top">&nbsp;</td>
  </tr>
</table>

Open in new window

0
 

Author Comment

by:cindysei
ID: 35074358
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.
0
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 2000 total points
ID: 35074404
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.  
0
 

Author Closing Comment

by:cindysei
ID: 35074624
was very thorough in working through problem.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
Suggested Courses

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question