Differences
This shows you the differences between two versions of the page.
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:// | ||
+ | |||
+ | |||
+ | |||
+ | 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 " | ||
+ | |||
+ | |||
+ | |||
+ | [[http:// | ||
+ | * **Variables**. With [[http:// | ||
+ | * **Color Functions**. LESS allows you to use [[http:// | ||
+ | * **Comments**. It's hard to tell one rule from another without good [[http:// | ||
+ | * **More**. A lot more exists in [[http:// | ||
+ | |||
+ | |||
+ | |||
+ | 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' | ||
+ | - 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/ | ||
+ | |||
+ | |||
+ | |||
+ | Cyrious' | ||
+ | |||
+ | |||
+ | |||
+ | [[code_formatcss|code format" | ||
+ | |||
+ | |||
+ | |||
+ | //Default Theme Settings | ||
+ | |||
+ | |||
+ | |||
+ | // Variables | ||
+ | |||
+ | |||
+ | |||
+ | // -------------------------------------------------- | ||
+ | |||
+ | |||
+ | |||
+ | // Colors | ||
+ | |||
+ | |||
+ | |||
+ | // | ||
+ | |||
+ | |||
+ | |||
+ | //## Gray and brand colors for use across Bootstrap. | ||
+ | |||
+ | |||
+ | |||
+ | @gray-base: | ||
+ | |||
+ | |||
+ | |||
+ | @gray-darker: | ||
+ | |||
+ | |||
+ | |||
+ | @gray-dark: | ||
+ | |||
+ | |||
+ | |||
+ | @gray: | ||
+ | |||
+ | |||
+ | |||
+ | @gray-light: | ||
+ | |||
+ | |||
+ | |||
+ | @gray-lighter: | ||
+ | |||
+ | |||
+ | |||
+ | @brand-primary: | ||
+ | |||
+ | |||
+ | |||
+ | @brand-success: | ||
+ | |||
+ | |||
+ | |||
+ | @brand-info: | ||
+ | |||
+ | |||
+ | |||
+ | @brand-warning: | ||
+ | |||
+ | |||
+ | |||
+ | @brand-danger: | ||
+ | |||
+ | |||
+ | |||
+ | @theme-background: | ||
+ | |||
+ | |||
+ | |||
+ | @first-color: | ||
+ | |||
+ | |||
+ | |||
+ | @second-color: | ||
+ | |||
+ | |||
+ | |||
+ | @third-color: | ||
+ | |||
+ | |||
+ | |||
+ | //Default ODEC Settings | ||
+ | |||
+ | |||
+ | |||
+ | @ODECpageColor: | ||
+ | |||
+ | |||
+ | |||
+ | @ODECtextColor: | ||
+ | |||
+ | |||
+ | |||
+ | @ODECwidgetColor: | ||
+ | |||
+ | |||
+ | |||
+ | @ODECwidgetTextColor: | ||
+ | |||
+ | |||
+ | |||
+ | @ODECwellColor: | ||
+ | |||
+ | |||
+ | |||
+ | @ODECwellTextColor: | ||
+ | |||
+ | |||
+ | |||
+ | @ODECbleedWarning: | ||
+ | |||
+ | |||
+ | |||
+ | //Default Tours Settings | ||
+ | |||
+ | |||
+ | |||
+ | @stepBGcolor: | ||
+ | |||
+ | |||
+ | |||
+ | @stepBGimage: | ||
+ | |||
+ | |||
+ | |||
+ | @stepTitleColor: | ||
+ | |||
+ | |||
+ | |||
+ | @stepContentColor: | ||
+ | |||
+ | |||
+ | |||
+ | // Scaffolding | ||
+ | |||
+ | |||
+ | |||
+ | // | ||
+ | |||
+ | |||
+ | |||
+ | //## Settings for some of the most global styles. | ||
+ | |||
+ | |||
+ | |||
+ | // Background color for ``. | ||
+ | |||
+ | |||
+ | |||
+ | @body-bg: | ||
+ | |||
+ | |||
+ | |||
+ | // Global text color on ``. | ||
+ | |||
+ | |||
+ | |||
+ | @text-color: | ||
+ | |||
+ | |||
+ | |||
+ | // Global textual link color. | ||
+ | |||
+ | |||
+ | |||
+ | @link-color: | ||
+ | |||
+ | |||
+ | |||
+ | // Link hover color set via `darken()` function. | ||
+ | |||
+ | |||
+ | |||
+ | @link-hover-color: | ||
+ | |||
+ | |||
+ | |||
+ | // Link hover decoration. | ||
+ | |||
+ | |||
+ | |||
+ | @link-hover-decoration: | ||
+ | |||
+ | |||
+ | |||
+ | // Typography | ||
+ | |||
+ | |||
+ | |||
+ | // | ||
+ | |||
+ | |||
+ | |||
+ | //## Font, line-height, | ||
+ | |||
+ | |||
+ | |||
+ | @font-family-sans-serif: | ||
+ | |||
+ | |||
+ | |||
+ | @font-family-serif: | ||
+ | |||
+ | |||
+ | |||
+ | // Default monospace fonts for ``, ``, and ``. | ||
+ | |||
+ | |||
+ | |||
+ | @font-family-monospace: | ||
+ | |||
+ | |||
+ | |||
+ | @font-family-base: | ||
+ | |||
+ | |||
+ | |||
+ | @font-size-base: | ||
+ | |||
+ | |||
+ | |||
+ | @font-size-large: | ||
+ | |||
+ | |||
+ | |||
+ | @font-size-small: | ||
+ | |||
+ | |||
+ | |||
+ | @font-size-h1: | ||
+ | |||
+ | |||
+ | |||
+ | @font-size-h2: | ||
+ | |||
+ | |||
+ | |||
+ | @font-size-h3: | ||
+ | |||
+ | |||
+ | |||
+ | @font-size-h4: | ||
+ | |||
+ | |||
+ | |||
+ | @font-size-h5: | ||
+ | |||
+ | |||
+ | |||
+ | @font-size-h6: | ||
+ | |||
+ | |||
+ | |||
+ | // Unit-less `line-height` for use in components like buttons. | ||
+ | |||
+ | |||
+ | |||
+ | @line-height-base: | ||
+ | |||
+ | |||
+ | |||
+ | // Computed " | ||
+ | |||
+ | |||
+ | |||
+ | @line-height-computed: | ||
+ | |||
+ | |||
+ | |||
+ | // By default, this inherits from the ``. | ||
+ | |||
+ | |||
+ | |||
+ | @headings-font-family: | ||
+ | |||
+ | |||
+ | |||
+ | @headings-font-weight: | ||
+ | |||
+ | |||
+ | |||
+ | @headings-line-height: | ||
+ | |||
+ | |||
+ | |||
+ | @headings-color: | ||
+ | |||
+ | |||
+ | |||
+ | < | ||
+ | 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' | ||
+ | || @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 " | ||
+ | || | ||
+ | || @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/ | ||
+ | || @ODECtextColor || Color of Regular Text in Image/ | ||
+ | || @ODECwidgetColor || Color of Settings Widgets Background in Image/ | ||
+ | || @ODECwidgetTextColor || Color of Settings Widgets Text in Image/ | ||
+ | || @ODECwellColor || Color of Widget Collapsible Components Background in Image/ | ||
+ | || @ODECwellTextColor || Color of Widget Collapsible Components Text in Image/ | ||
+ | || @ODECbleedWarning || Color of Warning Text in Image/ | ||
+ | Example of Variable Overrides: | ||
+ | {{:: | ||
+ | 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:// | ||
+ | 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. | ||