Resource Files
In this blog we will go through the DesignBais (RD) resources files with an example.
Prerequisites
Complete the Hello World exercise to build a responsive design web site at http://localhost/dbnetrd.
Our developer tools are at: http://localhost/dbnetrd?ac=dev
The web site's physical folder is at: c:\inetpub\wwwroot\dbnetrd
Complete the exercise in blog Work folders, URLs, Files and Organisation
Objectives
- Observe the location of res (resource) folders
- Create your own theme (css) file
- Amend your demo-hello page and your theme file to change the HTML H3 heading colour to red.
Location of Resource Files
DesignBais creates a resource folder for each work folder that you create. The resource folder associated with our "demo" work folder is:
c:\inetpub\wwwroot\dbnetrd\res\demo\
Each resource folder contains four subfolders:
The css folder includes a number of css files (e.g. blue.css, green.css etc.). In DesignBais these are called "theme" files (or css files).
Note browser's caching!!
Please note that browsers aggressively cache css files amongst other file types. In order to be able to see your changes to your style sheets (css files), we recommend that you open Chrome's developer tools (F12), select the Network tab and tick "Disable cache". For the rest of this exercise, please keep the Chrome developers tool open.
Change the heading style
Create new theme file
In Windows, open your folder: c:\inetpub\wwwroot\dbnetrd\res\demo\css
Copy the file blue.css and paste as demo.css in the same folder.
Now we have c:\inetpub\wwwroot\dbnetrd\res\demo\css\demo.css as our theme file.
Select your page theme
Navigate to http://localhost/dbnetrd?ac=dev and open your Responsive Design Form Designer.
Check the bottom left corner to make sure that your work space is /demo. Otherwise, set your work folder to /demo.
Menu > File > Properties, select "demo" from the Theme dropdown and OK to close.
Your page theme has now been set to "demo".
Click the HTML text "Hello" on the page and press CTRL+Q to edit. Click the word "Hello" set its format to "Heading 3" (corresponds to H3 in HTML code).
Press CTRL+S to save and then CTRL+L to publish this page.
Edit the CSS file to change the style of "Heading 3"
Open c:\inetpub\wwwroot\dbnetrd\res\demo\css\demo.css in Notepad, scroll to the end and add these lines:
h3{
color:red;
}
Save the file and close.
Test Point
In a new Chrome browser TAB, make sure that Chrome developer tools are open (F12) and navigate to http://localhost/dbnetrd?dbpage=demo-hello
Press CTRL+F5 to refresh the page. You should see the word Hello in red colour.
Deployment to live (production) web server
When you deploy your website to another webserver (e.g. live, production) the "demo" folder is the only folder that you should worry about copying from your development server. This folder includes all stylesheets, fonts, images and other resources that you need in getting the "demo" running on your production server.
Other Resource Folders
We'll go through the remaining resource folders (fonts, images and meta) in our other blogs.