UI.X 2

Component Defintions and Locations

In UI.X we have introduced some new terminology in regards to naming the larger macro components. This was done to ensure clarity in the language used to describe our style properties, especially for positional style properties where you want to move something around. Below are a list of terms commonly use to describe components and their locations.

Main Component Names

Logo Block - The bar in the header that is the default location for logo. Known as Logo Block in XenForo 1In XenForo 2, this is sometimes referred to vaguely as "header", hence the clarification in our documentation.

Sub Navigation - The bar in the header below the main navigation that houses the sub navigation links. XenForo referes to this bar both as "sub navigation" as we as "section links." For the purpose of consistency, we refer to it only as the sub navigation.

Main Locations

1. Header: Refers to everything above the content, the top third, typically for navigation, logo, important links, search and the like.
2. Content: Refers to everything that is content-sensitive, and is the middle part of the page. Breadcrumbs, titles, call to actions, and of course the main piece of content (ie: thread, profile, page, etc.).
   1. MainContainer: Refers to the div wrapping both the main content as well as the sidebar.
      1. MainContent: Refers to the page content excluding any sidebars.
      2. MainSidebar: Refers to the main XenForo sidebar where widgets are typically inserted.
3. Footer: Refers to the bottom third of the page, where you typically find legal information, copyrights, quick links, and other meta information about the site.

Sub-locations

• Before and After: Refers to the position inside of the Main Location, but outside of the chrome or "padding, border, background, etc. of the component".
• Above and Below: Refers to the position inside of the Main Location AND inside the chrome. So for example, if you have a large footer, this would be inside the visual part of the footer section (if it had a background, it too would be on top of the background).

Diagram

We have a diagram to explain the differences in the structure. This system again is so you can for the most part put any widget or component anywhere, and this is a consistent method we use so you can rely on accuracy when you place your components.