Resources

No website would be complete without images, Javascript and CSS files. The LemonStand CMS engine provides you with a fully integrated resource manager that will allow you to quickly upload and create all the resource files you will need when creating the theme for your site. Any resources you add will be saved in a resources folder relative to the theme you are currently editing.

Let's go through the process of creating a CSS file to to be used with our Hello World! page under the default Zest theme.

Log in to the back-end of your store and click on the Editor link on the sidebar, then click on the Resources link in the Editor menu.

This will then open the Resources manager page.

Click on the CSS line item to access the CSS folder for the theme

Click on the + button to add a new file. Let's name it example.css

Copy the following CSS rule to the Content area:

.lemon-yellow
{
color:#ffcd24;    
}

Your example.css editing page should now look like the following:

Click Save & close to save our file. You will now see example.css in the list of files for the CSS directory.

Let's now open our Hello World! page and add the lemon-yellow class name to one of our elements. Click on the Pages menu item and then click into our Hello World! page.

Add our lemon-yellow class to the H1 element in the content area as follows:

<h1 class="lemon-yellow">Hello, World!</h1>

Click Save & close to confirm our change.

We now need to include a reference to our example.css file in the HEAD element of our site. To do this open the templates section under the Editor menu and then click into test-template. Underneath the TITLE tag add the following code:

<link rel="stylesheet" type="text/css" href="{{ 'css/example.css'|theme_resource }}">

You will notice a filter in the HREF element of the LINK tag, denoted by |theme_resource. This filter tells LemonStand to output the path to your resource file relative to the theme that is active. In this case it would be the Zest theme. So, when LemonStand generates the file path on output, it would look like the following:

<link rel="stylesheet" type="text/css" href="https://s3-us-west-2.amazonaws.com/ls-test-account-data/store-store-1-52dd6339c5ea9/themes/zest/resources/css/example.css?1390521798">

Your content area should now look like this: s

Hit Save & close to confirm our changes then navigate to the Hello World! page in your browser. As you can see our Hello, World! headline is now LemonStand yellow.