Avatar of cindysei
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.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
CSSHTMLAdobe Dreamweaver

Avatar of undefined
Last Comment
cindysei

8/22/2022 - Mon
Chad Haney

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;
cindysei

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

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.
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
Jason C. Levine

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

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?
Jason C. Levine

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.
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Chad Haney

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

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
Jason C. Levine

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.
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
cindysei

ASKER
done - you can go to that link now:

http://www.iris.ca/test.html
Jason C. Levine

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

ASKER
perfect! - another stupid question - how do I make that part of template uneditable so it will appear on the pages it links to?
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Jason C. Levine

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

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--> - but now button disappears.
Jason C. Levine

>> 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.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
cindysei

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.
Jason C. Levine

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

cindysei

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.
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
ASKER CERTIFIED SOLUTION
Jason C. Levine

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
cindysei

ASKER
was very thorough in working through problem.