StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>If we create different style-sheets for each theme and while making small change, then we need to make the same change in all the style-sheets. It will be really a head-ache. Alternate way is to use SASS concepts (mixins).</p> <p>Add in your Gemfile</p> <pre><code>gem 'sass-rails' </code></pre> <p>then </p> <pre><code>bundle install </code></pre> <p>Now you need to have your css styles in one SCSS file. <strong>basic_styles.scss</strong></p> <pre><code>$font_color: #565656; $font-size: 13px; $success-color: #088A08; $error-color: #B40404; @mixin basic_styles($dark_color,$light_color,$bullet_image) { .footer { background-color: rgba($dark_color,0.9); color: $light_color; text-align: center; position: fixed; bottom:0; left:0; width: 100%; height: 15px; border-top: 1px solid lighten($dark_color, 9%); padding-left: 10px; padding-right: 10px; font-size: $font_size - 2; } h3,hr,a,input { color: $dark_color; } h3 { margin-top: 2px; margin-bottom: 2px; } hr { border-color: lighten($dark_color, 30%) -moz-use-text-color #FFFFFF; border-left: 0 none; border-right: 0 none; border-style: solid none; border-width: 1px 0; } .btn { background-color: $dark_color; border-color: darken($dark_color, 15%); border-radius: 4px 4px 4px 4px; border-style: solid; border-width: 1px; color: #FFFFFF; cursor: pointer; display: inline-block; line-height: 18px; padding: 3px 10px 3px 10px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); vertical-align: middle; } .btn:hover { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 0px 2px 1px lighten($dark_color, 10%); -webkit-box-shadow: 0px 0px 2px 1px lighten($dark_color, 10%); box-shadow: 0px 0px 2px 1px lighten($dark_color, 10%); } .success { color: $success-color; } .error { color: $error-color; } } </code></pre> <p>Then you can create any number of themes. For Example <strong>Theme_Blue.scss</strong></p> <pre><code>@import "basic_styles"; $dark_color: #08c; $light_color: #FFFFFF; $bullet_image: 'bullet_blue.png'; @include basic_styles($dark_color,$light_color,$bullet_image); </code></pre> <p>Now in your html </p> <pre><code><%= stylesheet_link_tag "Theme_Blue" %> </code></pre> <p>will use the all the css classes specified in <strong>basic_styles.scss</strong> with blue colors.</p> <p>You can add any number of Theme files like <strong>Theme_Blue.scss</strong>. And change to </p> <pre><code><%= stylesheet_link_tag current_user.theme %> </code></pre> <p>In this way, you need to modify only the <strong>basic_styles.scss</strong> for any modifications.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload