Questions and Answers

How do I collect points?

  • +4
    Chosen as best answer
  • +1
    Posted answer
  • +1
    Posted question
  • +1
    Thumb up
  • -1
    Thumb down
1

by Chufty Bill in Design about April 21, 2016 open - report

Css on individual pages

Hi guys.

I am familiar with SE and CSS.

What I need to know is how I go about using CSS on individual pages.

When I add a page, I can put on a HTML Rich Content Widget to format the page. But how do I add the CSS to this Widget? I need to be able to stylize individual pages. Where do I add new CSS files, and how do I link to them from the HTML BLock?

Thanks in advance

Chris

Answers: 2  •  Score 0  •  Views: 1075

2 Answers
Browse by
  • 3

    by alvaro about October 13, 2016

    Very easy, find the steps below:

     

    On a widgetized page:

     

    1. Go to Layout Editor

    2. Select the page you need to modify

    3. Drap & drop a html block above all blocks you have

    4. Add your css rules as below:

     

    <style>

        .rule 1 {}

        .rule 2 {}

    </style>

     

    On a non-widgetized page:

     

    1. Open your browser (Chrome, Safari, Explorer)

    2. Open the page you need to modify

    3. Right click on any part of the page and select "element inspector", or whatever the name is according to your browser

    4. In the inspector area, read the first lines and you will find the name of the page (i.e. for the Home page is <body id="global_page_user-index-home" class="layout_active_theme_ownergroup">)

    5. Go to your module or widget css file (in case it's a widget with no css file, just go to the css file of a module closer to the widget about functionality)

    6. Add your css rules as below:

     

        #global_page_user-index-home .rule 1 {}

        #global_page_user-index-home .rule 2 {}

     

    With either ways, you will be modifying only individual pages' style.

     

    Hope it helps :)

    • Score: 0
  • 3

    by Eduardo about August 5, 2016

    Chris, I think you can upload new css file to your server and just link it with html block.

     

    It's a quick and dirty workaround. Possibly there are better, more elegant options for that.

    • Score: 0
You must login to post an answer.