edited css file reverts back to original

stylecss.css edit problem

[stoppe]

Hi all, I just set up an online store and still learning a lot as I go along. Here's my problem: I want to change the price font color throughout the store and I believe it's in the stylecss.css file in the includes folder where I make the change. So I download the file and make the changes, then save. The strange thing is, once the edited file is uploaded to the server, the file reverts back to the original and all the changes I made to it have disappeared. Needless to say, there was no change in my website. I tried other ways, from deleting the orig. file and uploading new file (tried both edit inside ftp and outside as well), tried diff. ftp programs, cleared browser cache, etc. None worked. To add, there is no permissions set to my website so I can edit it any way I want.

I've asked other people but their suggestions haven't worked. There must be something in the files that's causing this happen. The question is, what? If any of you guys know the answer to this, or for any other possible suggestions that I can try, please do! Thanks so much to all...

[Setek]

This doesn’t sound like a CSS problem at all, rather a server problem… you should talk to your server admin about it.

[rocknbil]

To help you verify this, what program are you using to upload the files to your site? It should have some sort of error logging or reporting - you will get "permission denied" or "could not create file" if you are not the owner of the files.

[fireguy]

when you went to load the file, did you check 'overwrite' original file?

[stoppe]

1. I'm not sure if it's the server as I've called and spoken to tech support over there and seems to be no problem on their end.

2. I've used a couple of diff. ftp programs: coffecup direct ftp and my server's (zeus registry) own ftp client.

3. I am not getting any errors uploading/downloading whatsover. They seem to be working just fine.

4. I am the owner of the files, so no issue with permissions.

5. There's been a couple of times that I received "overwrite the existing file" but still the same unwanted results.

There are 4 total css files in the includes folder, I have changed the fonts codes in 2 files, stylev and stylecss. The other 2 I don't think I needed to. I'm not sure if I need to look at the other folders. All this is new to me. Just learning along.

[rocknbil]

There are only two things that come to me at the moment, and they are based on one question: how are you determining the files are not updating? Are you viewing source or some other method in the browser?

IE 6 and 7: I have seen situations time and time again where deleting cache will only work if you're not on the page you want to delete, especially IE 6. So if test.html had a linked style sheet, and I am on that page and delete the cache, it won't update the CSS. I have to navigate OFF the page, delete the cache, then reload it.

The other is the true location of the CSS being called from your pages versus where you're uploading it, this can often be confusing. Try uploading the file, then on your local computer, navigate to a different directory, download the file to that directory, and open it to verify it's taken your changes. If it has, maybe you're uploading to the wrong location.

stylev and stylecss

Tell me, are you able to see extensions on your files? These should be named stylev.css and stylecss.css.

[londrum]

view the source code of one of the pages. there should be a link to the relevant css file in the header. check that you are changing the same one.

is this online store a commercial package, or have you built it yourself? if it's a commercial package presumably it has some kind of admin feature where you can change the styles. if you change it there, does it update the file?
maybe you have to actually change it in there for it to stick. it might overwrite the file if it sees it has been changed by other means.

[stoppe]

rocknbil: After I upload the updated file, I download it once again to my computer to see if the changes stuck by just opening it via notepad. Prior to uploading, I make sure my changes are there.

Yes, I'm able to see the .css extensions to both stylev and stylecss.

I am using Firefox as my browser and I "think" I tried clearing the cache outside the page.

As far as the true location of these files, I believe I'm uploading them in the right folder. When I check the page source on my homepage, on line 14, I get this:
@import "http://www.#*$!#*$!xx.com/includes/stylecss.css"; {I put #*$!x in place of my site's name per rules here)

BTW, what does the "@import" above mean?

londrum: Thanks for suggesting to check the css file on the page source, which I did. See above.

The store is pre-built, but under admin control panel, I'm not able to make such changes there. So I either do this myself outside the admin panel or pay them! (totally not worth it; even though what I'm trying to change isn't necessary, I sure don't mind learning these things for future use).

[londrum]

there are two ways of linking to style sheets, through the <link> tag or through @import. but they both do the same thing.
can you see any more @import lines in the stylesheet itself?

[SilverLining]

Hi stoppe.

I want to change the price font color throughout the store and I believe it's in the stylecss.css...

Are you sure that the CSS file you are editing is responsible for the "price" color tags? There could be another style overriding this. The best way to check is by installing the Firebug extension for Firefox and inspecting the element. This will show you which style is being used on the element and which style(s) is/are overwritten.

[stoppe]

Hi guys!

londrum: on the homepage, I only see one @import line for stylecss.css. On the other pages, I see two: stylecss.css and stylev.css.

Silverlining: Thank you for sharing that Firebug extension! A really useful tool, now only if I can make my changes there :-p

So I installed it and checked and it confirms it that it is indeed the stylecss.css (and stylev.css in other pages) where I need to make the changes.

But what do you mean by "This will show you...which style(s) is/are overwritten." If you mean if I see my own changes there, then no, I don't. Instead of seeing #008000 which is my desired font color, I see the default #990011 instead.

[londrum]

copy some of the code onto here so we can see.

copy down the actual HTML that you are trying to change. and what you think are the relevant styles

[stoppe]

This is my edited stylecss.css, under prodprice I changed color to #008000:

.bestselling {color:#000066; text-decoration:underline ; font-weight:normal; font-family:Arial,Helvetica,sans-serif;}.catenav {color:#000066; text-decoration:none ; font-weight:normal; font-family:Arial,Helvetica,sans-serif;}.prodname {color:#000066; text-decoration:underline ; font-weight:500; font-family:Arial,Helvetica,sans-serif;}.prodprice {color:#008000 ; text-decoration:none ; font-weight:bold; font-family:Arial,Helvetica,sans-serif;}.notavailable_small {color:#CC0000; text-decoration:none; font-weight:normal; font-size:10px; font-family:Arial,Helvetica,sans-serif;}.merchheaderdefault_home { FONT-WEIGHT:bold; FONT-SIZE: 13pt; COLOR: #54647 6; BACKGROUND-COLOR: #dce1e7;font-family:Arial,Helvetica,sans-serif};.merchheaderdefault_home_dyn { FONT-WEIGHT:bold; FONT-SIZE: 13pt; COLOR: #595958; BACKGROUND-COLOR:#FFF7EA;

I hope this is enough?

[londrum]

what's the HTML code.
view the source code of your page and find the words that you are trying to change, then paste all that on here as well.

[stoppe]

Here is the HTML code:

<tr><td valign='center' align='center' height='90'><a href="http://www.-------.com/splproduct/0740748475.htm" target="_self" class="prodname"><img align=center src="http://ec1.images-@@@@.com/images/I/11AEC0PY7WL.jpg" border="0"></a></td></tr><tr><td valign=top align='center' class='prodprice'>$91.24</td></tr><tr><td valign='center' align='center'><a href="http://www.-------.com/splproduct/0740748475.htm" target="_self" class="prodname"><img align=center src="http://www.-------.com/images/imagescommon/addtocart_small.gif" border="0"></a></td></tr><tr><td valign=top align='center'><a href="http://www.-------.com/splproduct/0740748475.htm" target="_self" class="prodname"> The Complete Calvin and Hobbes (Calvin & Hobbes) </a></td></tr></table></td><td width="25%" valign="top"><table border="0" width="100%" align="center">
<tr><td valign='center' align='center' height='90'><a href="http://www.-------.com/splproduct/1596431520.htm" target="_self" class="prodname"><img align=center src="http://g-ec2.images-@@@.com/images/I/019gkyCrB9L.jpg" border="0"></a></td></tr><tr><td valign=top align='center' class='prodprice'>$11.36</td></tr><tr><td valign='center' align='center'><a href="http://www.-------.com/splproduct/1596431520.htm" target="_self" class="prodname"><img align=center src="http://www.-------.com/images/imagescommon/addtocart_small.gif" border="0"></a></td></tr><tr><td valign=top align='center'><a href="http://www.-------.com/splproduct/1596431520.htm" target="_self" class="prodname"> American Born Chinese </a></td></tr></table></td></tr></table></td></tr><tr><td><table width="95%" border="0" align="center"><tr>
<td colspan='4' class='merchheaderdefault_home_dyn'>
<table cellspacing=0 cellpadding=0 width='100%' border=0>

<tr>
<td><b><font class='merchheaderdefault_home_dyn'>Manga</font></b></td>
</tr>

[londrum]

stick this line right at the bottom of the stylesheet and see if it changes

td.prodprice { color: #008000!important; }

[Setek]

If you want to know if you’re uploading the file to the right spot, and the file is affecting it, rename the file to stylecss-test.css without updating the HTML to reflect the change.

If your site no longer has any styles, you’ll know it was the right file, and that it was being linked to the page correctly. If nothing changed, then that’s not the right CSS file.

After that, find out if it’s the right class by adding an

!important

rule to it (as suggested earlier by londrum.)

If that worked, remove the

!important

and see if it still works: if it doesn’t, your rule is being overwritten by another rule, something farther along in the CSS file, something with higher specificity, or something inline.

Use Firefox, highlight the bit of text in question, right-click and View Selection Source. Check if there is the class you were trying to hook, and if there is any affecting inline styles.

All part of trial and error :)

[edited by: Setek at 3:34 am (utc) on Sep. 3, 2007]

[stoppe]

Hey guys, I finally figured it out!

It wasn't just the stylecss.css and stlev.css files that I needed to change. I also needed to make the proper changes to the file css.php that is also in the includes folder.

I didn't work on this for a few days to clear my head s'why I didn't respond until now. Besides, I just re-started working on this just a little while ago and bam! For no reason I thought I'd look into that css.php file and that's what did it!

After several days of brain torture and asking around for help, I'm happy I got this thing finally resolved.

Thanks guys for all the help! I'll make sure to come back here again if I need any more....'night all.

[SilverLining]

...now only if I can make my changes there

When in Firebug, click the CSS tab and then 'Edit'. This will allow you to make CSS changes on the fly. (Also possible by going to HTML > Style tab. Just right click and select "New property") Though this does not affect your original CSS file, it is rather useful to know.

But what do you mean by "This will show you...which style(s) is/are overwritten."

All the styles applied to an element will be displayed when you inspect it with the Firebug extension. Styles which are overwritten will be displayed with a "dissecting" line.

[For example's sake]
When inspecting the .prodprice element, the a:hover will have a horizontal line throught the text, indicating it has been over written by another style e.g.:

a, 
a:link, 
a:visited, 
a:hover,
a:active {color: #FFFFFF; text-decoration: underline;}
a:hover .prodprice {color: #000000; text-decoration: none;}

Also, just to mention, you don't need to specify the font for each class. You could try adding this to the body tag. Unless you did this for a reason.

Great that you got it sorted!