function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
NMackeyNMackey 

Stylesheet as static resource not working

i'm trying to make a custom page to print a confirmation document of sorts and using my own stylesheet to do it.

 

I have uploaded a zip file containing confirmation_style.css and logo.jpg as a static resource called 'confirm' and am accessing my custom page via a custom button. 

 

The code I'm using inside the head tag of my page is:

 

 

<apex:stylesheet value="{!URLFOR($Resource.confirm, 'confirmation_style.css')}" />

 

 

But the rendered page is totally unstyled. A similar problem exists when trying to retrieve logo.jpg.

 

If I view the source of the page and try pasting the generated URL, I just get a page containing literally nothing. But then if I enter an arbitrary file name, I get the same result.

 

Am I missing some sort of permissions thing here? Can anyone give me some pointers?

 

Best Answer chosen by Admin (Salesforce Developers) 
aballardaballard

Are you sure that your zip file contains these resources with exactly the names you used?  Depending on the tool/os used to produce the zip file, some people have had problems with a root directory being created so the resource name was actually confirm/confirmation_style.css, not just confirmation_style.css.

 

Also, some older versions of various zip-file utilties seem to create file names with windows-style backslashes in the names, instead of the forward slashes expected by the zip-file specification.

 

All Answers

aballardaballard

Are you sure that your zip file contains these resources with exactly the names you used?  Depending on the tool/os used to produce the zip file, some people have had problems with a root directory being created so the resource name was actually confirm/confirmation_style.css, not just confirmation_style.css.

 

Also, some older versions of various zip-file utilties seem to create file names with windows-style backslashes in the names, instead of the forward slashes expected by the zip-file specification.

 

This was selected as the best answer
NMackeyNMackey

I created the zip file on a Mac using the built in archive tool. I re-downloaded the file and the contents were as expected but I'll try from a Windows machine and report back!

NMackeyNMackey

Thanks aballard. I resolved this by creating a new zipped folder in Windows and dragging and dropping my files into it, as opposed to using the context menu to zip the directory! My custom page looks all pretty now!

WesNolte__cWesNolte__c

As a tip to effectively working with stylesheets I suggest instead putting all your stylesheet code into a visualforce page or component. This makes changes much quicker to implement.

 

Wes

aballardaballard

putting the stylesheet code in the page or component instead of a static resource means you don't get any advantage from browser or other caching.   You styles have to be downloaded and processed every time you go to the page. 

 

It's fine for a few small, simple styles, but if you have a complicated stylesheet, you're better off with static resources.

NMackeyNMackey

I did the HTML and style for the page with an external editor anyway so I don't have to worry too much about keeping the static resource updated as I go.

 

That said, the stylesheet is far from complicated so I'll keep inline stylesheets in mind for later.

d3developerd3developer

The default archiving method on OS X adds the folder name to the reference inside the zip file when you zip a folder. If you select the files individually and choose add to archive they do not. If you need to know the reference to the files you can go to the command line and type in "unzip -l zipfilename.zip" and you will get the listing including the full reference.

WesNolte__cWesNolte__c

You can set caching on most elements within Visualforce pages including the page itself. You can also set the contenttype for pages to be CSS so it'll be treated as such a resource.

 

Building the look and feel in an external app is another good idea though ;)

 

If your stylesheets are simple enough and you don't need to archive them with other resources you can upload them as text files and you can edit these static resources directly from the IDE.

 

Wes

NMackeyNMackey

Thanks guys, you've all been really helpful!