docnzok Posted April 19, 2016 Share Posted April 19, 2016 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 More sharing options...
jclem Posted April 24, 2016 Share Posted April 24, 2016 Thank you for this tip - it was very helpful for a layout I wanted to do. Link to comment Share on other sites More sharing options...
coyote4444 Posted May 22, 2016 Share Posted May 22, 2016 Where do I find the option to Modify the Page Head? I don't see it anywhere in my page/options. Link to comment Share on other sites More sharing options...
SportsEngine Staffer Posted May 22, 2016 Share Posted May 22, 2016 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 Link to comment Share on other sites More sharing options...
coyote4444 Posted May 23, 2016 Share Posted May 23, 2016 Thank you! Thank you! Thank you! I thought I was going crazy and just not seeing what should have been obvious!!! Link to comment Share on other sites More sharing options...
SportsEngine Staffer Posted May 23, 2016 Share Posted May 23, 2016 Glad to help! Link to comment Share on other sites More sharing options...
kathleen rehm Posted June 22, 2016 Share Posted June 22, 2016 I'm not seeing the "Edit Header Code" or tab element. please help! Link to comment Share on other sites More sharing options...
SportsEngine Staffer Posted June 29, 2016 Share Posted June 29, 2016 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 Link to comment Share on other sites More sharing options...
kwynne71 Posted March 1, 2017 Share Posted March 1, 2017 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 More sharing options...
crashkobra Posted June 14, 2017 Share Posted June 14, 2017 Can I get access to add header tabs? Link to comment Share on other sites More sharing options...
SportsEngine Staffer Posted June 14, 2017 Share Posted June 14, 2017 I'm not sure what you mean by header tabs. Could you provide a bit more information? Thanks! - Loren Link to comment Share on other sites More sharing options...
htek37 Posted November 1, 2017 Share Posted November 1, 2017 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 More sharing options...
SportsEngine Staffer Posted November 2, 2017 Share Posted November 2, 2017 @htek37 - PM'd you. Link to comment Share on other sites More sharing options...
Tim Hobgood Posted January 3, 2018 Share Posted January 3, 2018 Would it be possible to turn on my "Edit Header Code" option? What information would you need to do so? Cheers, Tim Tim Hobgood Link to comment Share on other sites More sharing options...
Tim Hobgood Posted January 3, 2018 Share Posted January 3, 2018 Would it be possible to get the "Edit Header Code" option turned on? What information would you need to do so? Cheers, Tim Tim Hobgood Link to comment Share on other sites More sharing options...
Rob Bedeaux Posted January 3, 2018 Share Posted January 3, 2018 Hi Tim, Was able to find you. You should be good. thanks, -rob Rob Bedeaux (he/him/his)Director, Partnerships & Symphony MarketingE rob.bedeaux@nbcuni.comNBC SPORTS NEXT & FANDANGO Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.