How to disable the .css file for an individual template???
 

Does anyone know how to disable the .css file for one .tpl file? I have created a head_nav.tpl, but the css file is formatting the text for me. If I remove the TD formatting from the .css , my nav bar looks like I want it to , but the rest of the document loses some formatting.

How can I use a .tpl file that does not rely on the skin1.css file ? THANKS!

Version 3.5.14

You really can't, since it is hard coded into home.tpl. Why not just apply a new style to items in head_nav.tpl to overwrite the style called from the TD?

Thanks for the quick reply. How do you call the seperate style sheet ? I have tried adding formatting to the .tpl file, but the skin1.css over-rides it. Is there a way to call a seperate style sheet from head_nav.tpl ?

Don't try to override the style sheet...simply add a new style to the stylesheet and add the formatting to the element you want to format. For example, say you have a line of text you want to appear different in your new template, let's call it link1. To apply a style, surround it with a span tag like this:

<span class="style1">link1</span>

You would then have to create a style1 class in skin1.css. Now the link1 text will appear using style1 formatting. That make sense?

OK, I didnt think of doing it that way , I was thinking I needed a new style sheet. I will try it like that thanks!

OK I tried that and it didnt work. The only way I can get the top bar how I want it to look is to remove the TD,TH, and P from the top part of the skin1.css. But, when I do that, the rest of the page is affected.

Here is my code for skin1.css


Here is the head_nav.tpl


As you can see if you visit the page, the top bar is not formatted nicely. Once I remove the TD, TH, and P from the top of the skin1.css , it makes my bar how I want it.......

Ok, you have the right concept, but you aren't quite there. Putting a span tag around the whole template isn't going to do it, you need to apply the styles to individual items. You also shouldn't be using <font> tags or using the 'background' tag, as those are depreicated tags and may not work correctly on newer browsers. Also, the way you have your images called is not quite right. Here's what you need to do:

1. Edit your topbar style to look like this:


2. Move your background image (barbg.gif) to the x-cart images folder, which is shop/skin1/images.

3. Now change the way you have the TD tags configured on your template to look like this one:


4. Get rid of the span tag you added to the template.

This will not only shrink the size of the code, but it will allow you to globally edit the template without having to edit each and every TD tag when you want to adjust the fonts or colors.

Let me know if that works for you.

I still think somehow the skin1.css is over-writing it. Here is what I have now

skin1.css


and for the head_nav.tpl I am just trying a small area for now


Some of the bad coding comes from me being lazy and using front page for some crude coding. Theoretically this should work like it is correct? Right now, the background is not showing up and the text is not formatted.....

Ok, just as a test, replace this:

<td class="TopBar" width="109">Home</td>

with this:

<td width="109"><span class="TopBar">Home</span></td>

If that works, we'll deal with the image background for the table cell as a seperate style.

First of all thanks for the help!

That didnt do anything, looks the same as before....

Maybe we are over-thinking this thing. Perhaps I should just use some sort of image map to just use a flat graphic and make it link that way ?

I originally tried to use a javascript but the skin1.css file interfered with that too ..

Any other ideas on this or should I just scrap it and try something else ?