In Color and Style, you can manage Theme Color, Styles and their properties. In TOTO Theme, for every Theme, Text, Background, Foreground,Link, Forms, Short codes, Sliding Top, there is an isolated Color and Style which gives you the capacity to control: General, Link, Forms, Short codes, Sliding Top.
In theme panel go to TOTO → Theme Options → Colors & Styles:
There is a button Reset . By clicking it will help you to reset all settings which you have change and it will reset to theme defaults color & style options which are created by TOTO Theme.
Let Start with Colors & Styles:
General:
1.Theme Color:This option allows you to change the default theme color
2.Text Color:The text color property is used to set the color of the text. The text color is specified by using this option
3.Selection Background Color: By default, Selection Color is set to Automatic, which means that the color of the selected items are automatically set. But using this option you can set the Selection Background color
4:Selection Foreground Color:By default, Selected text Color is set , which means that the text color of the selected items are automatically set. But using this option you can set the Selection Foreground color
Link:
1.Link Color:This option defines the Color for normal unvisited link in your website or project.
2.Link Hover Color:When you roll the cursor over a link in your project, it is often referred to as “hovering” over the link. This option allow to customize the link color
3.Fancy Link Color:This option mention the Color for auto-animated link in your website or project.(Fancy Link means that if you roll your cursor on the link. The link will popup or rotate)
4.Fancy Link Hover Color:When you roll the cursor over a fancy link in your project, it is often referred to as “hovering” over the link. This option allow to customize the fancy link color
5.Fancy Link Hover Background Color:When you move the cursor over a auto-animated fancy link in your project.If you want to change the default background color of fancy link then you can set the background color using this option
6.Fancy Link Background:This option define the customize background color for fancy link
Forms:
1.Button Background Color:This option defines the button background color
2.Button Hover Background Color:When you roll the cursor over a button , it is often referred to as “hovering” over the button.By using this option you can change the button hover background color
3.Button Text Color:This option enhance the button text color
4.Button Hover Text Color:By using this option you can change your button hover text color
5.Button Border Color:This property allow you to change button border color
6.Button Hover Border Color:If you want to change the button border color while you hover the mouse then this can be done using this option
7.Button Hover Effect:This option allow you to give various effect while you hover the mouse over the button.Some of the effects are mention below:
- Effect Top to Bottom
- Effect Left to Right
- Effect Zoom Out
- Effect Zoom In
- Effect Slide
8.Button Border Width:It defines the border wideness for button (for eg: 1px, 2px, 3px, 4px,etc)
9.Input Text Color:Using this option you can change placeholder color to convey meaning or just bring attention to a particular field.
10.Input Background Color:The input background color property sets the background color of an element. The background of an input field is the total size of the element, including inside area and border (Tip: Use a background color and a text color that makes the text easy to read.
11.Input Border Color:This option enhance the border color for the input field.
12.Input On Focus Text Color:I have an input field, and the color of the text in it is black.When you click on this field, the black placeholding text dissapears.Any text inputted into this field, I want it to turn red.This is done by input on focus text color property
13.Input On Focus Background Color:This option change the on focus background color
14.Input On Focus Border Color:This property allow you to change the border color of on focus input field
15.Input Border Width:It defines the border wideness for input field (for eg: 1px, 2px, 3px, 4px,etc)
Short Codes:
1.Counter Icon Color:An icon is a glyph used to represent something else. With this option you can change the counter icon color
2.Accordion & Tabs Active Title Color:The accordion is a graphical control element comprising a vertically stacked list of items.A common example of an accordion is the Show/Hide operation of a box region, but extended to have multiple sections in a list. Tabs are generally used to break content into multiple sections that can be swapped to save space, much like an accordion.An active tab is the tab currently being used. (For example, if you have multiple tabs open in your browser since you’re reading this page, it would be considered the active tab).This property change allow you change the accordion & tabs active color
3.Blockquote Color:The blockquote element represents a section that is quoted from another source.Using this option you can change the color of quotation marks
4.Blockquote Background Color:It define the background color for blockquote section
Sliding Top:
1.Sliding Top Background Color:Sliding Widgets will help your to create a sliding panel dynamically where you can place any number of widget as you do for regular sidebar. You can setup the position anywhere at left, right, top or bottom.This option help you to change the background color of slider
2.Sliding Top Icon Color:This property allow you to change the slider top icon color