Provide an opportunity for including conference-specific CSS
There is currently no top-level selector for views that is conference-specific, so all conferences on one OSEM instance end up sharing all the same CSS. In order to allow individual conferences to have unique CSS, a class for the current conference is applied to the <body> tag, and an scss template provided with an example of conference-specific CSS.
This commit is contained in:
parent
8b12b1662d
commit
1241d21f93
5 changed files with 30 additions and 5 deletions
|
|
@ -20,4 +20,5 @@
|
|||
*= require selectize.bootstrap3
|
||||
*= require mastodon
|
||||
*= require bootstrap-select
|
||||
*= require conferences
|
||||
*/
|
||||
|
|
|
|||
13
app/assets/stylesheets/conferences.scss
Normal file
13
app/assets/stylesheets/conferences.scss
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
/* Apply CSS to views of a specific conference by encapsulating the style in
|
||||
* a body tag classed for the conference's short title.
|
||||
* See the example here for 'osemdemo'.
|
||||
* NOTE: when overriding existing CSS, it may be necessary to use !important to
|
||||
* bypass CSS specificity rules.
|
||||
*/
|
||||
|
||||
body.conference-osemdemo {
|
||||
// style here only applies when working with the 'osemdemo' conference.
|
||||
#header {
|
||||
background-color: #b58e73 !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
= javascript_include_tag "//cdn.transifex.com/live.js"
|
||||
|
||||
= yield(:head)
|
||||
%body
|
||||
%body{ class: ("conference-#{@conference.short_title}" if @conference) }
|
||||
= render 'layouts/navigation', conference: @conference
|
||||
-# Admin area
|
||||
- if controller.class.name.split("::").first=="Admin"
|
||||
Loading…
Add table
Add a link
Reference in a new issue