Jump to content

Create Custom Layout Container


docnzok

Recommended Posts

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]

 

Step1.png

 

Step 3. [Modify the Page Head CSS]

 

Step2.png

 

Step 4. [Add a Tab Element to the page - ENSURE YOU SELECT THE NUMBER OF COLUMNS YOU NEED]

[NOTE THE Custom CSS Class]

 

step3.png

 

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) ]  

step4.thumb.png.3703bb13707860853476f325e65a0cf7.png

Step 5. [Add content that you need to the columns]

 

 

step6.png

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>  

Step1.thumb.png.f231dba841c71927fe9b3134d26f9f89.png

Step2.thumb.png.69fb01a641e7d764763745391195f555.png

step3.thumb.png.cb80a032a42381cdc948a32496c0242f.png

step6.thumb.png.0d80f703329b95ed4022b4aee9bbe303.png

Step1.thumb.png.944c859bdbaa0fa21d7ea670f46bb44f.png

Link to comment
Share on other sites

  • 4 weeks later...
  • 5 weeks later...
  • 8 months later...
Can someone explain the code snippet a bit? I'm especially curious about the three tabbedElement.layout container lines. Does each refer to one of the three tab elements that become the three column layout container? Or, are they telling the system how to format each tab? Is there a way to make it so the result in page element that gets added to those three columns is centered no matter what type of element is used?
Link to comment
Share on other sites

  • 3 months later...
  • 4 months later...

Apologies for opening an old post… but I am interested in trying to do something like the OP.

 

I am unable to however because I do not have access to the Header on the Custom HTML page element.

 

Any assistance would be greatly appreciated!

Link to comment
Share on other sites

  • 2 months later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...