video: layouts & CSS

  • inside a site, we can rearrange the pages tree
  • for example we move the "newsList" page as a subpage of "projectsList"
  • as a result OOOGUI rearranges navigation in all site pages
  • now "news" is a subpage of "projects"
  • put things backward by moving "news" as a subpage of "home"
  • we also can change ordering of sibling pages
  • now we'll see how to modify layout of divs inside a page
  • for each page we have a "content" view that represents the way divs compose the page
  • and a "structure" view that represents the tree of the page divs
  • in the structure view we can move divs inside the page
  • each generated page is provided with descriptive CSS class names for each visible element
  • so it's enough to inspect an element, read its CSS classes
  • and modify them in the included CSS editor
  • after editing, just "submit" and test in frontend
  • by modifying the CSS file only, you can change almost everything on the frontend
  • note that OOOGUI generated pages include and use jQuery
  • in OOOGUI a div could be a container, or a module. if it's a module, it has an associated .tpl file
  • by modifying a .tpl file of a module we can change the html of the view, not only the CSS
  • the generated smarty code uses descriptive variables names, so that should be easy find what to change
  • here we move the "date" and "hour" of a news above its "title"
  • and enclose them in a table
  • that's how looks our .tpl after modify
  • now we want to make the news title bigger
  • by combining page structure, CSS and .tpl files, you can completely redefine the layout of your site
 

languages