Although the NGIN platform allows a lot of possibilities for arranging your page and placing elements where you need them, there are those 'occasions' that may require a custom configuration.
Lets create a 3 column layout container inside a single one by adding some code that will manipulate a Tab Element.
Step 1. [Create a blank page]
Step 2. [Create a new 2 column 50/50 layout container]
Step 3. [Modify the Page Head CSS]
Step 4. [Add a Tab Element to the page - ENSURE YOU SELECT THE NUMBER OF COLUMNS YOU NEED]
[NOTE THE Custom CSS Class]
Now you should have a 2 column (50/50) layout container, with a tab element providing a column layout in the left column.
[ NOTE THAT: You will not see the actual Tabs (They are hidden by the CSS code) and you will not see the content of the second tab. You will only see the content of the first tab. (This is why you need to make Tab #1 have the number of columns that you want to add) ]
Step 5. [Add content that you need to the columns]
That's it! There are obviously some very interesting possibilities that can be attained using this technique. This is another great example showing the flexibility of the NGIN platform.
Here is the CSS code that you need to add to your page to make it work.
Question
docnzok
Although the NGIN platform allows a lot of possibilities for arranging your page and placing elements where you need them, there are those 'occasions' that may require a custom configuration.
Lets create a 3 column layout container inside a single one by adding some code that will manipulate a Tab Element.
Step 1. [Create a blank page]
Step 2. [Create a new 2 column 50/50 layout container]
Step 3. [Modify the Page Head CSS]
Step 4. [Add a Tab Element to the page - ENSURE YOU SELECT THE NUMBER OF COLUMNS YOU NEED]
[NOTE THE Custom CSS Class]
Now you should have a 2 column (50/50) layout container, with a tab element providing a column layout in the left column.
[ NOTE THAT: You will not see the actual Tabs (They are hidden by the CSS code) and you will not see the content of the second tab. You will only see the content of the first tab. (This is why you need to make Tab #1 have the number of columns that you want to add) ]
Step 5. [Add content that you need to the columns]
That's it! There are obviously some very interesting possibilities that can be attained using this technique. This is another great example showing the flexibility of the NGIN platform.
Here is the CSS code that you need to add to your page to make it work.
<style>
.noTabs .tabbedElement .contentTabs { display: none; }
.layoutContainer .tabbedElement { margin-bottom: 0; }
.tabbedElement .layoutContainer { margin: 0 -20px 0 0; padding-bottom: 0; }
.tabbedElement .layoutContainer .pageElement { }
.tabbedElement .layoutContainer { margin: 0 -20px 0 0; padding-left: 0; }
</style>
Link to comment
Share on other sites
15 answers to this question
Recommended Posts
Archived
This topic is now archived and is closed to further replies.