SportsEngine Community Forum
Register Latest Topics
 
 
 


Reply
  Author   Comment  
docnzok

Moderator
Registered:
Posts: 45
Reply with quote  #1 
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.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>  

jclem

Junior Member
Registered:
Posts: 2
Reply with quote  #2 
Thank you for this tip - it was very helpful for a layout I wanted to do.
coyote4444

Junior Member
Registered:
Posts: 2
Reply with quote  #3 
Where do I find the option to Modify the Page Head?

I don't see it anywhere in my page/options.
loren

Avatar / Picture

Community Manager
Registered:
Posts: 213
Reply with quote  #4 
Hi Coyote,

This is a site setting that needs to be turned on by us on the back end. I just did that for you, so you should be all set.

Now, when you click on the Options tab at the top of a page, you should see the Edit <HEAD> Code link.

- Loren

coyote4444

Junior Member
Registered:
Posts: 2
Reply with quote  #5 
Thank you! Thank you! Thank you!  I thought I was going crazy and just not seeing what should have been obvious!!!
loren

Avatar / Picture

Community Manager
Registered:
Posts: 213
Reply with quote  #6 
Glad to help!
kathleen rehm

Junior Member
Registered:
Posts: 1
Reply with quote  #7 
I'm not seeing the "Edit Header Code" or tab element.  please help!
loren

Avatar / Picture

Community Manager
Registered:
Posts: 213
Reply with quote  #8 
Hi Kathleen,

It looks like that setting is turned on for your site and that you do have ability to see the Edit Head Code link.

Just look under the Options tab at the top of any page.

- Loren 
kwynne71

Junior Member
Registered:
Posts: 3
Reply with quote  #9 
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?
crashkobra

Junior Member
Registered:
Posts: 4
Reply with quote  #10 
Can I get access to add header tabs?
loren

Avatar / Picture

Community Manager
Registered:
Posts: 213
Reply with quote  #11 
I'm not sure what you mean by header tabs. Could you provide a bit more information? Thanks!

- Loren
Previous Topic | Next Topic
Print
Reply

Quick Navigation: