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

11 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. Yesterday when I renamed my zip file something happened and it was damamged.But fortunately in couple hours I found in google-cyclic redundancy repair zip.And it helped me very qucikly.It has free status as far as I know and can too works faster and recovers more documents, than other services.

    ReplyDelete
  4. Today I saw in the Internet an especial movie for me and downloaded it. But I was discouraged by reason of it was corrupted,exactly was corrupted zip archive with movie inside. But by good fortune I found in the Google a next software - zip repairing. To my surprise the software solved my issues for seconds and free of charge as far as I kept in mind.

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

    ReplyDelete
  6. 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
  7. "!URLFOR($Resource.stylings,'mystylings/Images/logo.png')}" width="20" height="20"

    ReplyDelete
  8. Thanks a lot for the post :)

    hope I can get more solutions from you.

    ReplyDelete
  9. Thanks a lot, very useful article.

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

    ReplyDelete

AD