Stylization with help of Exspecto Style Customizer

Exspecto Style customizer gives unbelivable power in customizing Exspecto Theme elements.

Exspecto Customizer consist of such elements:

  1. Header buttons
  2. Selector field
  3. CSS options 
  4. Screen size sweetchers 

Screenshot_238

Header buttons:

  1. Element selector/Finder (1) – helps you to select element. Click on it and hover on element you want customize. Element will be rounded with border. Click on element to approve selection.
  2. Global options (2) – has two states (enabled/disabled). If enabled button is highlighted. Button helps to make selected element settings global for all wed site. CSS styling of element will be added to all Pages of web site.
  3. Save options (3) – helps to save all stilization that has been made during session of Exspecto Customizer. After saving Page will reload and all styles will be added to Page header.
  4. Close button (4) – closes Customizer

Screenshot_239

Selector field:

  1. CSS selector field (1) – in this field CSS selecto is shown. CSS selector is generated automatically.
  2. Select parent button (2) – helps to switch to parent selector to currently selected element. Helps to precisely customize Exspecto theme with stylization of elements that couldn’t be selected with hover selector. So if you can not select element you want to customize select element inside element you want to customize and press button (2) till you will not select element you want.
  3. Copy CSS selector (3) – copy text of CSS selector
  4. CSS Editor (4) – open editor to write custom CSS
  5. State buttons (5) – buttons switch between states of element

Screenshot_240

CSS options – grouped CSS options that gives power on selected element to be customized. Read more about CSS options you can here.
Screen size switchers – helps to switch between screen sizes. Options for each screen size is saved separately. In this case you can customize different screen separately. We call this Responsive Styling. If you haven’t set up settings for element in Tab or Mobile mode settings for Desktop mode will be used.

 

Contact Us