Differences

This shows you the differences between two versions of the page.

Link to this comparison view

customized_css_bootstrap_3 [2019/01/27 09:38]
customized_css_bootstrap_3 [2019/01/27 09:38] (current)
Line 1: Line 1:
 +Customizing your CSS 
 +
 +
 +
 +What is CSS 
 +
 +
 +
 +CSS is a specialized language for web layout and design. In modern web design, the information (content) is stored in HTML page. The layout and display of that information is stored in a separate document called a Cascading Style Sheet, or CSS for short. For some neat examples of how the same content can appear radically different by changing only the CSS, check out the [[http://www.csszengarden.com|CSS Zen Gardens]] page.
 +
 +
 +
 +Most formatting in Cyrious Online is accomplished through the CSS page(s). If you want to change the colors, fonts, size, menu, etc. - those settings are all controlled by the CSS.
 +
 +
 +
 +CSS files contain rules, such as "make all Heading 1 tags use a font 24px tall". If you have several CSS files, they may contain rules about the same thing. In this case, the language of CSS says the **last rule defined wins**. Cyrious Online uses this aspect to make your job easier. Cyrious Online sets all the default CSS rules - you only have to rewrite the ones that you want different.
 +
 +
 +
 +What is LESS 
 +
 +
 +
 +The CSS "language" has some limitations, chief among them is that every CSS rule must be stand-alone. While this makes the web browsers job easier, web programmers want to be able to define and group things together. They want to use variables to define their colors and fonts that are used through the CSS. They want to do simple math and color operations. Unfortunately, CSS doesn't do any of these things.
 +
 +
 +
 +[[http://lesscss.org|LESS]] is a CSS "superset". This means CSS is valid in LESS, but it adds new features, primarily
 +  * **Variables**. With [[http://lesscss.org/#-variables|variables]], you can define your primary color, secondary color, font, etc. in one place (usually at the top) and use them in all the CSS rules.
 +  * **Color Functions**. LESS allows you to use [[http://lesscss.org/#-functions|functions]] to modify colors and a lot of other things.
 +  * **Comments**. It's hard to tell one rule from another without good [[http://lesscss.org/#-comments|comments]].
 +  * **More**. A lot more exists in [[http://lesscss.org|LESS]], but these are the highlights.
 +
 +
 +
 +Who Should Make These Changes 
 +
 +
 +
 +Conceptually CSS is simple, but in practice it requires considerable experience to use. Cyrious has tried to make it easy to implement color scheme changes by modifying the LESS file, but working with the LESS file still requires a certain web acumen that takes time to develop. If you do not have prior experience working on CSS, Cyrious recommends you work with someone that does.
 +
 +
 +
 +How Cyrious Online Chooses Which CSS to Use 
 +
 +
 +
 +Cyrious Online uses the following logic for deploying CSS files.
 +  - The first CSS file is always Cyrious Online's default file. This ensures the default behavior is implemented.
 +  - Next Cyrious Online determines which (if any) customized CSS file to add. Because this file will occur after the default, it's CSS settings will override any similar settings in the default.
 +    * If the storefront has customized CSS, this file is used.
 +    * If the storefront CSS is empty, the storefront group is checked. If it has customized CSS, this file is used.
 +    * If the storefront and storefront group CSS are empty, the business is checked. If it has customized CSS, this file is used.
 +    * If there is no customized CSS, no additional file is used.
 +
 +
 +
 +Where to Make Changes 
 +
 +
 +
 +In order to make changes CSS, go the settings page of the business/storefront group/storefront to be modified. Go to the theme tab. At the bottom of the page click "Advanced Configuration". Two fields will appear, one for LESS variables and the other for CSS customizations. Place your custom CSS here.
 +
 +
 +
 +Cyrious' Default CSS/LESS 
 +
 +
 +
 +[[code_formatcss|code format"css"]]
 +
 +
 +
 +//Default Theme Settings
 +
 +
 +
 +// Variables
 +
 +
 +
 +// --------------------------------------------------
 +
 +
 +
 +// Colors
 +
 +
 +
 +//
 +
 +
 +
 +//## Gray and brand colors for use across Bootstrap.
 +
 +
 +
 +@gray-base:              #000;
 +
 +
 +
 +@gray-darker:            lighten(@gray-base, 13.5%); // #222
 +
 +
 +
 +@gray-dark:              lighten(@gray-base, 20%);   // #333
 +
 +
 +
 +@gray:                   lighten(@gray-base, 33.5%); // #555
 +
 +
 +
 +@gray-light:             lighten(@gray-base, 60%);   // #999
 +
 +
 +
 +@gray-lighter:           lighten(@gray-base, 90%); // #eee
 +
 +
 +
 +@brand-primary:         #375a7f;
 +
 +
 +
 +@brand-success:         #00bc8c;
 +
 +
 +
 +@brand-info:            #3498DB;
 +
 +
 +
 +@brand-warning:         #F39C12;
 +
 +
 +
 +@brand-danger:          #E74C3C;
 +
 +
 +
 +@theme-background:      @gray-darker; //;#2c3e50;
 +
 +
 +
 +@first-color:           @brand-primary;
 +
 +
 +
 +@second-color:          @gray-light;
 +
 +
 +
 +@third-color:           @first-color;
 +
 +
 +
 +//Default ODEC Settings
 +
 +
 +
 +@ODECpageColor:         @body-bg;
 +
 +
 +
 +@ODECtextColor:         @text-color;
 +
 +
 +
 +@ODECwidgetColor:       contrast(@second-color, darken(@second-color, 25%), lighten(@second-color, 25%), 25%);
 +
 +
 +
 +@ODECwidgetTextColor:   #FFFFFF;
 +
 +
 +
 +@ODECwellColor:         @well-bg;
 +
 +
 +
 +@ODECwellTextColor:     contrast(@ODECwellColor, darken(@ODECwellColor, 45%), lighten(@ODECwellColor, 45%));
 +
 +
 +
 +@ODECbleedWarning:      orange;
 +
 +
 +
 +//Default Tours Settings
 +
 +
 +
 +@stepBGcolor: #216487;
 +
 +
 +
 +@stepBGimage: linear-gradient(#2b83b0, #216487);
 +
 +
 +
 +@stepTitleColor: white;
 +
 +
 +
 +@stepContentColor: #f5f5f5;
 +
 +
 +
 +// Scaffolding
 +
 +
 +
 +//
 +
 +
 +
 +//## Settings for some of the most global styles.
 +
 +
 +
 +// Background color for ``.
 +
 +
 +
 +@body-bg:               #fff;
 +
 +
 +
 +// Global text color on ``.
 +
 +
 +
 +@text-color:            @gray-dark;
 +
 +
 +
 +// Global textual link color.
 +
 +
 +
 +@link-color:            @brand-primary;
 +
 +
 +
 +// Link hover color set via `darken()` function.
 +
 +
 +
 +@link-hover-color:      darken(@link-color, 15%);
 +
 +
 +
 +// Link hover decoration.
 +
 +
 +
 +@link-hover-decoration: underline;
 +
 +
 +
 +// Typography
 +
 +
 +
 +//
 +
 +
 +
 +//## Font, line-height, and color for body text, headings, and more.
 +
 +
 +
 +@font-family-sans-serif:  "Source Sans Pro", Calibri, Candara, Arial, sans-serif;
 +
 +
 +
 +@font-family-serif:       Georgia, "Times New Roman", Times, serif;
 +
 +
 +
 +// Default monospace fonts for ``, ``, and ``.
 +
 +
 +
 +@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
 +
 +
 +
 +@font-family-base:        @font-family-sans-serif;
 +
 +
 +
 +@font-size-base:          15px;
 +
 +
 +
 +@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
 +
 +
 +
 +@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px
 +
 +
 +
 +@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
 +
 +
 +
 +@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
 +
 +
 +
 +@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
 +
 +
 +
 +@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
 +
 +
 +
 +@font-size-h5:            @font-size-base;
 +
 +
 +
 +@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px
 +
 +
 +
 +// Unit-less `line-height` for use in components like buttons.
 +
 +
 +
 +@line-height-base:        1.428571429; // 20/14
 +
 +
 +
 +// Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
 +
 +
 +
 +@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px
 +
 +
 +
 +// By default, this inherits from the ``.
 +
 +
 +
 +@headings-font-family:    @font-family-base;
 +
 +
 +
 +@headings-font-weight:    300;
 +
 +
 +
 +@headings-line-height:    1.1;
 +
 +
 +
 +@headings-color:          inherit;
 +
 +
 +
 +<code>
 +What the Variables Do 
 +||~ Variable Name ||~ Result ||
 +|| @brand-primary || Sets the main color for navbar, badges, progress bars, labels, etc ||
 +|| @brand-success || Sets the success color for navbar, badges, progress bars, labels, etc ||
 +|| @brand-info || Sets the info color for navbar, badges, progress bars, labels, etc ||
 +|| @brand-warning || Sets the warning color for navbar, badges, progress bars, labels, etc ||
 +|| @brand-danger || Sets the dangercolor for navbar, badges, progress bars, labels, etc ||
 +||   ||   ||
 +|| @theme-background || Sets the background color of the entire bage (the HTML body tag's background-color property) ||
 +|| @first-color || Sets the primary color of your theme (used in many places) ||
 +|| @second-color || Sets the secondary color of your theme (used in many places) ||
 +|| @third-color || Sets the tertiary color of your theme (used in many places) ||
 +||   ||   ||
 +|| @body-bg || Sets the background color inside the application's content module. Usually set to white, this will be the background of most of the content. ||
 +|| @text-color || Sets the default color of normal text in the application ||
 +|| @link-color || Sets the default color of link text in the application ||
 +|| @link-hover-color || Sets the default color of link text when the mouse hovers over the link ||
 +|| @link-hover-decoration || Sets the style of the link text. Use "none" to have no decoration, "underline" to have underlined links, etc. ||
 +||   ||   ||
 +|| @font-family-base || Sets the primary font family to be used throughout the application ||
 +Modifying the Online Designer Theme  \\ The online designer has a separate set of LESS variables to control its theme. These are described in the table below and the effects of changing them are shown in the screenshot. \\ ||~ Name ||~ Use ||~ Default Value ||
 +|| @ODECpageColor || Color of Page Background in Image/Artwork Editor || @pageColor ||
 +|| @ODECtextColor || Color of Regular Text in Image/Artwork Editor || @textColor ||
 +|| @ODECwidgetColor || Color of Settings Widgets Background in Image/Artwork Editor || contrast(@second-color, darken(@second-color, 28%), lighten(@second-color, 28%)); ||
 +|| @ODECwidgetTextColor || Color of Settings Widgets Text in Image/Artwork Editor || #FFFFFF; ||
 +|| @ODECwellColor || Color of Widget Collapsible Components Background in Image/Artwork Editor || @wellBackground ||
 +|| @ODECwellTextColor || Color of Widget Collapsible Components Text in Image/Artwork Editor || contrast(@ODECwellColor, darken(@ODECwellColor, 38%), lighten(@ODECwellColor, 38%)) ||
 +|| @ODECbleedWarning || Color of Warning Text in Image/Artwork Editor || orange ||
 +Example of Variable Overrides:
 +{{::odectheming.jpg_width1329_height664?nolink&|}}
 +Converting LESS to CSS 
 +When you update the CSS/LESS block on the Themes tab, Cyrious Online will automatically generate the CSS file(s) that are used for your storefront. You don't need to do anything manually. However, if you decide you want to do more, you can always experiment and compile your own LESS to CSS online at the [[http://less2css.org|LESS live test center]].
 +If you are a developer, you can download the source code for LESS and build your own compiler. Most IDEs (development environments) can be set up to automatically convert the LESS to CSS upon compile, eliminating the need to do this manually.
  
  • customized_css_bootstrap_3.txt
  • Last modified: 2019/01/27 09:38
  • (external edit)