The FE CSS Builder or Front End CSS Builder has been updated and improved for Dynamik Website Builder v2.0 and Genesis Extender v1.7
These are the slides I used in this FE CSS Builder video tutorial…
This is the script from the FE CSS Builder video guide…
In this video I’m just going to explain about the changes Eric has made to the FE CSS Builder in Dynamik 2.0 and Genesis Extender 1.7. Most of the features of the editor still work in the same way as before.
- First I go to: Dynamik > Custom > Activate Front-end CSS Builder
- Tick the box and then save my changes.
- I now get the “Click to view front end” option. So I click the link and view the front end of my website.
After I click the view front end link, I see my website as a site visitor would see it
But there are two new icons on the right hand side of the page. These icons are new to Dynamik 2.0 and Extender 1.7.
The bottom icon is a map icon. This is a simple toggle switch to show or hide the hooks used on this page. This hook map makes it easy for me to decide where to add widget areas or hook boxes. I just find the position I want to place my widget area and note the name of that hook.
The top icon is a code icon, it looks like two angle brackets.
When I click the code icon, a text box opens where I can paste custom CSS code.
The FE CSS Builder code edit box has two states
- A plain text box where you paste custom code. And…
- A code builder with a comprehensive set of code building tools.
Using the code editor…
- I click the code icon to open the code editor.
- I now see a simple text box that I can paste CSS code inside.
- There are three icons in the top right corner of this text box.
- A square with four arrows.
- A paint brush.
- A magnifying glass.
The most important icon is the paint brush icon, and l’ll use that in a minute.
The square icon with four arrows is just a convenient way to snap the box back to it’s original size if you ever drag to make it larger.
The magnifying glass search icon just opens a tool tip telling you that you can use Ctrl+F to search the code you’ve written.
Now we’re left with the paint brush icon. And this is the one we’ll use the most.
When I click the paint brush icon, the simple text box changes into a fully featured code editor.
After I click the paint brush icon to open the full feature code editor, I see two more icons.
I see a code button that looks like two angle brackets, this toggles back to FE CSS Builder’s plain text code box.
The other button is a group of four tiny squares. Clicking the four tiny squares toggles on or off the edit icons inside your web page. These icons inside the web page also have a paint bush on them.
When you click to select one of the paint brush edit icons inside the web page, the corresponding selector will appear in the code editor drop down list.
This is the top level selector for that general area. For instance, if I click the paint brush icon in the header area. The header selector will appear in the code editor drop down list.
Finding selectors in FE CSS Builder
Now I want to use FE CSS Builder to find the actual selector that controls the specific element I want to style.
I click to open the drop down list. All selectors in the header area are in this list. I hover over the different elements in this drop down list. As I hover, the corresponding element in the header is highlighted with a pale green overlay.
When the element I want to style lights up, I click to choose that selector. Then I press the little print button to print that specific selector in the code box.
I can now use the code editing tools to add properties and values to my selector.
Saving your code changes
When I’ve written my code using the FE CSS Builder I…
- Click the copy to clip board button.
- Click the angle bracket code button to open the custom CSS code box.
- Paste my code.
- Then I click the Save Changes button.