Gahela User Guide Visual CSS Designer
Welcome To Gahela
About
Quick Tour
Getting Started
Academy
Web Site Builder
Custom Pages
Modules, Apps & Extensions
Users & Registration
Email
SEO - Search Engine Optimzation
Administration Section
Localization
Forms
Framework
Creating A Module
Tools
Maintenance
Web Hosting

Visual CSS Designer

In web design, often elements overlap, or are children of other elements.  This makes it difficult to see exactly how all items fit together in a web page.  When selecting the Visual CSS Design tool you can view the entire layout of your page.  This includes the core Gahela responsive structure, and all child HTML elements.

 
editor-tree-view.png

In the image above you can see the logo was selected, and you can view how it was built into the page.  In this case there was:

1.  A header group
2.  A panel child of this group called logo.tpl panel
3.  A layer in this panel to include this HTML for the logo image.

In the left hand side you can select any element on the page, and then change the design for the selected element on the right.  As you make changes. the page will be automatically updated, so that you can view them in real-time.