Solved

Why is this CSS code not working in a template

Posted on 2011-03-07
20
372 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
 
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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
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 500 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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

760 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now