Zip file as Static Resource ( CSS Styling )

6:06 AM

I finally realized what a blunder i have made by hardcoding the URL of images in my CSS file. Everytime i move my code from one instance to another the URL keeps on changing and i have to manually edit each and every URL.....

But i found out that there was a very very easy way out there... Thanks to the community forums

This is the way you have to use CSS in your visualforce pages..

Step 1: Create a zip file of the CSS file with the Associated images..

Example: If you have a CSS called mystylings.css and all images used in the CSS are inside a folder called "Images", then create a folder containing both "mystylings.css" and "Images" folder... Suppose you name the folder as "mystylings"...

Create a zip file of the folder "mystylings"...

No need to change the image URL as i have mentioned here.

Suppose you name the zip file as "stylings.zip".

Step 2: Now upload this zip file as it is in Static Resources. Name the resource as "stylings" for example.

Step 3: Now you can access the "mystylings.css" file in your visualforce page as below.....

<apex:stylesheet value="{!URLFOR($Resource.stylings,'mystylings/mystylings.css')}"/>
Note that we have specified mystylings/mystylings.css ... This is because we created a folder called "mystylings" and the file "mystylings.css" resides inside this folder....

That's it and you are done... You can move your Visualforce Page with CSS across environments without changing the CSS

9 comments

  1. Thanks for this post. what if I have to change the image, do I have to create and upload zipfile again?

    ReplyDelete
  2. Yes.. You will have to change the zip file and upload again.. Thanks for your comment

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. ok if i have to access image like in Image folder there is a image called logo.png and exact path is
    ( mystylings/Image/logo.png)
    then is this a right ???

    ( )

    i did it but not able to to get image name logo

    ReplyDelete
  5. "!URLFOR($Resource.stylings,'mystylings/Images/logo.png')}" width="20" height="20"

    ReplyDelete
  6. Thanks a lot for the post :)

    hope I can get more solutions from you.

    ReplyDelete
  7. Thanks a lot, very useful article.

    ReplyDelete
  8. i am used same code my images are not show in page

    ReplyDelete