× Got a CSS, HTML or webdesign question? Ask it here!

Disappearing CSS

2 years 3 months ago #14263 by kevins
Hello all,

I'm working on custom skin for my site and I'm using an external custom css file that's uploaded through the FCKeditor on the Customize Template CSS. My problem is that the CSS changes don't always show up on the site after updating the file. I can view the source css file through the browser and see the correct code but it's like it is only reading the older css code. Sometime the whole site will revert back to and earlier version of the css. It makes it extremely frustrating to test css changes when they sometime work and sometimes don't. This can reveal itself when viewing in different browsers...i.e. The site can look different in Chrome than it does in Firefox and yet different again in Safari. I have tried all combinations of clearing cache and hard refreshing the page to no avail.

I can load the css file from an external url it I don't experience this problem. But that causes issues with any secured pages loading a non-secure source file. It just strange that the code will show up in the css file on the server but only parts of it get loaded into the live site. Is it possible that this an issue with a server cache or something? Any help would be appreciated as I'm at my wits end, what should take a matter of minutes easily turns into hours.

Thanks!

Please Log in or Create an account to join the conversation.

2 years 3 months ago #14264 by ccruz
Hey kevins, thanks for checking on this. We are checking into some possible issues with server caching. We'll keep you posted on the status.

-Cris

Please Log in or Create an account to join the conversation.

2 years 3 months ago #14265 by giftswp
Cris,

I didn't know that it was possible to customize a web site by uploading a CSS file to the server instead of overriding the CSS code on the Customized Website CSS area, is this new?

Ruben
The one that does not ask, does not learn

Please Log in or Create an account to join the conversation.

2 years 3 months ago #14266 by brenden
Hi,

You have always been able to upload files to to your site and then just link to them. So that could be a CSS file or even JS file.

Cheers,

Senior Product Manager
Wilcom - Sydney, Australia



Please Log in or Create an account to join the conversation.

2 years 3 months ago #14267 by giftswp
I knew you could do that with images and JS, but didn't know about CSS, how do you link a CSS file?

Ruben
The one that does not ask, does not learn

Please Log in or Create an account to join the conversation.

2 years 3 months ago #14270 by brenden
Upload the file then add the tag in the <head> </head> section of your custom HTML:

i.e.
<link type="text/css" rel="Stylesheet" media="screen" href="/uploads/10537813/File/yourfile.css">

Cheers,

Senior Product Manager
Wilcom - Sydney, Australia



Please Log in or Create an account to join the conversation.

2 years 3 months ago #14271 by giftswp
I see...

isn't easier to just override it in the Customized Template CSS area? or what is better or different by uploading it?


Thanks

Ruben
The one that does not ask, does not learn

Please Log in or Create an account to join the conversation.

2 years 3 months ago #14272 by brenden
Each to their own really :) You can as you say just use our editor and do it online. Some like the color coding of using an editor so will chose to do it offline and then upload. The net result is the same so it really comes down to personal preferences.

Cheers,

Senior Product Manager
Wilcom - Sydney, Australia



The following user(s) said Thank You: giftswp

Please Log in or Create an account to join the conversation.

2 years 3 months ago - 2 years 3 months ago #14279 by kevins
I would also add that using an external css file can be more efficient. If you use the CSS override area you need to copy the whole set of CSS and make the changes to individual elements for it to work. With an external css file, as long as it's loaded last, you can effectively only override specific elements. For example, I'm working on changing the color picker. So instead of this:

div.color_picker div.header {
background: url(/uploads/11305107/File/images/cp-header.png) 0 0 no-repeat;
background-size: 297px 26px;
display: block;
height: 26px;
}

You can do this:
div.color_picker div.header {
background: url(/uploads/11305107/File/images/cp-header.png) 0 0 no-repeat;
background-size: 297px 26px;
}


Using an external editor not only provides color coding but it's also easier to find things when your CSS file starts getting really long. If the CSS override page had a proper text editor, i.e. you could tab and had numbered lines, I'd be more apt to use it.

It does seem to be a server issue because everything looks good this morning. Thanks for looking into the potential server cache issue and for now I will simply use the override area as that seems to update without an issue.

UPDATE - It now appears that the CSS override area is having the same problem. I add the modified CSS directly from Chrome DevTools into the override area click save and continue editing or save and then clear local cache and hard refresh and there is no change in the website. This becomes extremely annoying when trying to fine tune the CSS of a site.
The following user(s) said Thank You: giftswp

Please Log in or Create an account to join the conversation.

2 years 3 months ago #14281 by giftswp
Kevin, thank you for your input.

By no means I consider my self an expert in coding, I'm learning along...

If you use the CSS override area you need to copy the whole set of CSS and make the changes to individual elements for it to work


As far as I know you can do this in the override CSS area too, you only enter what you're updating (changing) at the end of the CSS code text, referring to your example if the display and height elements don't need to be change then you just omit them, you would just enter the rest of it.

div.color_picker div.header {
background: url(/uploads/11305107/File/images/cp-header.png) 0 0 no-repeat;
background-size: 297px 26px;
}

Ruben
The one that does not ask, does not learn

Please Log in or Create an account to join the conversation.

2 years 3 months ago #14282 by brenden
Yep that is correct. CSS override also only needs the elements that are changing.

Cheers,

Senior Product Manager
Wilcom - Sydney, Australia



Please Log in or Create an account to join the conversation.

2 years 3 months ago #14283 by kevins

brenden wrote: Yep that is correct. CSS override also only needs the elements that are changing.


Interesting...I read the exact opposite in one of the help files, which is why I went the external file route. I did some experimenting toady and it seems that the CSS override area seems to have the same delay issues when making changes.

On a positive note whatever you guys did with the server cache has seemed to help...there is still a delay before css changes show up but it's not a bad as it has been previously.

Please Log in or Create an account to join the conversation.

2 years 3 months ago #14284 by ccruz
Hey kevins,

We had some pretty aggresive cache timing set against the /uploads/ directory. We've made an adjustment and reduced the cache time to 10 minutes for this directory.

If you are including any uploaded resources anywhere and want to see a change immediately you can do so by adding a parameter at the end of the url. Example: /uploads/12345678/File/yourfile.css?v=1 you could use this to track your versioning as well. Each time you make a change change the value of your parameter it will get your browser to pull in a new version rather than a cached one as the URL is slightly different.

-Cris
The following user(s) said Thank You: gjhoutepen, kevins

Please Log in or Create an account to join the conversation.

2 years 1 month ago #14800 by kevins
This is great! I've noticed a marked improvement over the last month or so. The versioning tip is very cool. Thanks!!!

Please Log in or Create an account to join the conversation.

Time to create page: 0.193 seconds
Powered by Kunena Forum

Latest from our blog

This Week in Catalog - May 18, 2018

This Week in Catalog - May 18, 2018 I have two big announcements to make in regards to the DecoNetwork catalogs. We read and listen to your complaints and suggestions. Recently, I...Read More

DecoNetwork 8 - Available Now!

DecoNetwork 8 - Available Now! After an incredible amount of work in design, development, and testing, DecoNetwork 8 is here! With version 8, we recommitted ourselves...Read More

This Week in Catalog: May 11, 2018

This Week in Catalog: May 11, 2018 Lately, we've been getting a lot of new products in each week. More than is typical. All those new products (mostly in the S&S Activewear...Read More

DecoNetwork 8 - Update 2 now available: SEO Improvements and more (+75 tasks implemented)

DecoNetwork 8 - Update 2 now available: SEO Improvements and more (+75  tasks implemented) DecoNetwork 8 was released just ten days ago, but we have already a second update (8.002) available for you with many improvements and fixes...Read More

This Week in Catalog: May 4, 2018

This Week in Catalog: May 4, 2018 Happy Star Wars Day to the fans out there. There was a lot going on this week with our official launch of Version 8. However, we did manage to...Read More