2

I have just started working with ruby on rails properly like for a week and now I have started working on RefineryCMS, I followed the official guide and created a demo application and got to know the interface and the CMS itself a little bit, now I am trying to create a proper site using RefineryCMS. The first thing I wanted to do was to change the appearance of the default homepage, hence I override it and added my own HTML that I have and replaced the default layout that worked fine to some extent. Now the problem is I had style sheet associated with my HTML, as I am new to this CMS I cannot find a way to properly link my style sheets/ override my style sheets associated with the home page. I have followed the official documentation but was unable to get through the idea of how to override the stylesheets, I have followed other various links as well.

Can someone please guide me to a tutorial where there is a stepwise explanation regarding how to do that, or even better a stepwise detailed tutorial for newbies like me to get started with the RefineryCMS, I have spent hours but still have found a proper way, maybe I havent been looking or googling the right question because I am new to this CMS i.e. "How do I properly link my overridden HTML in refineryCMS to its corresponding stylesheets also to the corresponding images and javascript files"

I would really appreciate any sort of help to get me going. Thank you.

Hassan
  • 111
  • 1
  • 14

1 Answers1

3

Thanks for using Refinery. There are two ways to do this, but really the first one is my preference.

The easy and recommended way, using CSS selectors:

First, check out the getting started guide's section on "styling views".

Now, just create an asset file for the home page, let's call it app/assets/stylesheets/home.css.scss. To that, we can add nested styles under the following ID selector. I've added background: red; so that you can see an immediate result:

body#home-page {
  background: red;
}

This is the way that I would recommend adding CSS for templates.

For the non-recommended, complicated way that requires extra assets and adding to the precompile list:

First, see the overriding views guide.

Now, with the refinery/pages/home.html.erb template that you will have, you can link to a stylesheet:

<% content_for :stylesheets, stylesheet_link_tag('home') %>

The stylesheet should now be linked in the <head> section of the page and you should be able to add CSS that just relates to the home page by creating the app/assets/stylesheets/home.css.scss file and applying it in the same way as the first section:

body#home-page {
  background: red;
}

Note that because this is in the same directory as the manifest file application.css it will automatically get included for all templates, too, and so this is more complicated. It also requires you to add to the precompile list in config/application.rb:

config.assets.precompile += %w(home.css)
parndt
  • 1,873
  • 11
  • 13
  • what if i have an entirely different html.erb file and css written according to it? i.e. i already the html of the site generated along with its CSS, all I want is to put them together as they are in refinery using rails – Hassan Aug 10 '14 at 18:31
  • thank u very much sir this information did help me to get started, but as stated in the above comment in my case I should go with the second method?? If yes then what are the possible disadvantages of it? – Hassan Aug 11 '14 at 07:51
  • You can use the second approach happily; you just have to add your asset files to the precompile list if you use them directly as mentioned in my answer – parndt Aug 11 '14 at 22:41
  • Hassan: How'd you go? – parndt Aug 16 '14 at 08:50
  • I did work a bit then I thought to myself is CMS really necessary for the job as i have existing HTMLS and CSS attached to them, I am converting the necessary required HTML tags to ruby tags, can u guide me a bit in that regard? – Hassan Aug 17 '14 at 06:50
  • 1
    That's a separate question, if my answer helped you with your first query can you please mark it as accepted? You'd want to use the CMS if you have a customer who wants to be able to update some of the content of your webpage after it's in production. If you intend to make all changes to text and images then it's probably easiest not to use a CMS. – parndt Aug 18 '14 at 07:36