1. I searched Google: "css blog template":
2. I selected this CSS template (http://www.free-css.com/free-css-templates/page207/saturn) and downloaded to my local hard drive:
3. I created a new directory html and I unzipped the downloaded file to the new directory:
mkdir ~/html
cp ~/Downloads/Saturn Free Website Template - Free-CSS.com.zip ~/html
cd ~/html
unzip Saturn Free Website Template - Free-CSS.com.zip -d
4. Copy all the CSS files from the template to app/assets/stylesheets directory:
cp ~/html/Saturn HTML Template/css ~/gettingstarttedwithrails/app/assets/stylesheets
5. Copy all the image files from the template to app/assets/images directory:
cp ~/html/Saturn HTML Template/img ~/gettingstarttedwithrails/app/assets/images
6. I did my experiment first on the welcome view. I renamed the index.html.erb file. Then, I copied the index.html file from the template to my Ruby on Rails project:
mv ~/gettingstarttedwithrails/app/views/welcome/index.html.erb index_original.html.erb
cp ~/html/Saturn HTML Template/index.html ~/gettingstarttedwithrails/app/views/welcome/index.html.erb
7. I edited the app/views/welcome/index.html.erb using the Brackets editor. I changed the path of all CSS files to /assets/css/:
<head>8. Finally, I still needed to do some "fine tuning" to the index.html.erb file to make the web template to fit the purpose of of my blog.
...
<link rel="stylesheet" href="/assets/css/kube.min.css" />
<link rel="stylesheet" href="/assets/css/font-awesome.min.css" />
<link rel="stylesheet" href="/assets/css/custom.min.css" />
...
</head>
This is what I called the "fast track" method to "copy and paste" a web template to my Ruby on Rails project. Although I still need to do many codings in HTML, the appearance of the website is much more professional looking without spending a lot of time to start from scratch. Another advantage is that I can quickly changed the theme of my Rails project by downloading another CSS template to my Rails server. By the way, I found that the background image in the CSS file will be overrided (re-written) by the Rails framework. I am finding some "work around" to overcome the background image "white-out" problem.
No comments:
Post a Comment