Differences

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

Link to this comparison view

customized_themes [2019/01/27 09:38] (current)
Line 1: Line 1:
 + 
 +
 +
 +
 +Cyrious Online supports extensive customization of the website theme. This allows you to change the color and fonts to match your corporate look, and to do similarly for each customer website.
 +
 +
 +
 +{{::​default_theme.png_width600?​nolink&​|}}
 +
 +
 +
 +<​html><​div style="​margin-left:​ 20px;">​ Warning: Cyrious hired a professional design agency to design the default template. For the purpose of illustration,​ some of the color illustrations you are about to see below may be offensive to your color senses. We apologize for any discomfort this may cause. </​div></​html>​
 +
 +
 +
 +Theme Inheritance ​
 +
 +
 +
 +Until you set up otherwise, your websites will use the default Cyrious theme and your your primary business image will be displayed in the top left of the page.
 +
 +
 +
 +You can override the theme for your business, which will apply to all websites, or for an individual website. When a customer or employee website loads, it looks for a theme in this order:
 +  * If the website has a custom theme, that theme is used.
 +  * If not, but the business has a custom theme, the business'​ theme is used.
 +  * If not, then the default theme is used.
 +
 +
 +
 +Theme Components ​
 +
 +
 +
 +Colors ​
 +
 +
 +
 +The basic color theme is made up of several different groups of colors. These colors, and their function, are described below.
 +
 +
 +
 +{{::​theme_color_selections_2.png?​nolink&​|}}
 +
 +
 +
 +||~ Color Name ||~ Use ||
 +|| Background Color || Outer Page Background, shows behind header and in open spaces. ||
 +|| Primary Color || Background of top navigation bar and product menu. Background color of primary buttons. ||
 +|| Secondary Color || Text and image color for main toolbar on left. Color for background of additional section headers (My Cart, Top Selling Items, etc.) and section outline. ||
 +|| Tertiary Color || Color of search results (e.g., product listing), drop-down buttons. ||
 +|| Page Color || Background color of context area. ||
 +|| Text Color || Color for most content displayed. ||
 +|| Well Color || Color for surrounding certain sections to provide a visual offset (e.g., Search, Product Category bar) ||
 +|| Button Color || Color for background on non-primary buttons and drop-down buttons. ||
 +These values are illustrated here.
 +
 +
 +
 +{{::​themes_example_marked_up.png_width600?​nolink&​|}}
 +
 +
 +
 +Some **sample themes** can be found on [[sample_themes]].
 +
 +
 +
 +Fonts 
 +
 +
 +
 +You may change the font used in the Cyrious Online website. Because fonts must reside locally, however, the users local device must have that font for it to be displayed. For this reason, Cyrious Online (and the web in general) use the idea of Font Priorities to determine which font you want to use. The first font will be used if found, otherwise the browser will look to the second. If it also isn't found, the third, and then the fourth.
 +
 +
 +
 +{{::​font_priority.png?​nolink&​|}}
 +
 +
 +
 +Header HTML 
 +
 +
 +
 +By default, Cyrious Online puts your logo and business information in the **header section**, or top left, of the page.
 +
 +
 +
 +{{::​header_html.png?​nolink&​|}}
 +
 +
 +
 +You can override the contents of the HTML header by inserting your own HTML code in this section.
 +
 +**Notes**:
 +  * If you put anything in this section, it will //replace// the Cyrious default. You must include the heading image yourself if you want to include it.
 +  * Cyrious Support does not assist with HTML customization. This requires a skilled web programmer.
 +  * You may not insert any javascript or other code into the HTML code. All unauthorized tags will be automatically converted to  tags upon save.
 +  * See [[linking_to_products_images_and_other_assets]] for additional information on inserting files and links.
 +
 +
 +
 +The Cyrious Online default header HTML code is equivalent to:
 +
 +
 +
 +[[code_formathtml4strict|code format"​html4strict"​]]
 +
 +
 +
 +  ​
 +
 +
 +
 +    ​
 +
 +
 +
 +      ​
 +
 +
 +
 +    ​
 +
 +
 +
 +    Your Business Name
 +
 +
 +
 +  ​
 +
 +
 +
 +<​code>​
 +Notes:
 +  - In order to paste HTML code into the editor, you must first click the **** icon to switch the editor into HTML mode.  Otherwise, the editor will take everything you paste literally (and not treat it as HTML).
 +  - You must also **mark as Published** any image you reference in order for customers to be able to access it.
 +Message HTML 
 +The message HTML shows immediately below or to the right of the header (depending upon screen width). This space is often used for frequently changing short messages.
 + See [[linking_to_products_images_and_other_assets]] for additional information on inserting files and links.
 +Promotion HTML 
 +The promotional HTML shows immediately above the product listing on the home page.  It is most frequently used for larger banner information.
 + See [[linking_to_products_images_and_other_assets]] for additional information on inserting files and links.
 +Advanced Theme Options ​
 +See also [[customized_css]].
 +LESS Overrides ​
 +Cyrious Online uses LESS to generate the CSS used for your webpage. If you are familiar with Bootstrap and LESS, you can directly adjust the LESS values here. Do not adjust any LESS values directly unless you are familiar with both of these.
 +A reference of LESS functions is available [[http://​lesscss.org/#​reference|at this site.]]
 +CSS Overrides ​
 +Any CSS values you enter in this section override all other settings used in Cyrious Online. This section is intended for use only by a web designer fluent in CSS.
 +One common example of using CSS is to change the size of the header logo.  The size of the logo is limited in CSS, but you can change the maximum size by overriding the CSS using the following code.  (Note: The logo size may still be a limiting factor if it is smaller than the size you want.)
 +[[code_formatcss|code|Code format"​CSS"​]]
 +
 +
 +
 +.restrict-size.header-image * img {
 +
 +
 +
 +max-height: 250px;
 +
 +
 +
 +max-width: 250px;
 +
 +
 +
 +margin-left:​ 10px;
 +
 +
 +
 +}
 +
 +
 +
 +[[code|Code]]
 +
 +
 +
 +References ​
 +
 +
 +
 +Created : {$creationdate}
 +
 +
 +
 +Revision : {$revisiondate}
 +
 +
 +
 +Links
 +
 +
 +
 +<​html><​div style="​margin-left:​ 20px;">​ [[customized_css]] </​div></​html>​
 +
 +
 +
 +<​html><​div style="​margin-left:​ 20px;">​ [[sample_themes]] </​div></​html>​
 +
 +
 +
 +<​html><​div style="​margin-left:​ 20px;">​ [[include_pagepage_componentbacklinks|include page""​ component"​backlinks"​]] </​div></​html>​
  
  • customized_themes.txt
  • Last modified: 2019/01/27 09:38
  • (external edit)