Jump to content
jagipson

[Solved] Nested Columns Code

Recommended Posts

jagipson

@Andrew @Simon

 

I was wondering on your old documentation for DMS you supply the code for a Nested Column:

  1. <div class="row">
  2. <div class="span4">4</div>
  3. <div class="span8">8
  4. <div class="row-fluid">
  5. <div class="span6 zmb">6</div>
  6. <div class="span6 zmb">6</div>
  7. </div>
  8. </div>
  9. </div>

You don't explain how to do this in Platform 5 Besides <div class="row"> </div>

Whats the appropriate code for a nested section in Platform 5.

Share this post


Link to post
Share on other sites
jagipson

This shows the grid code:

The basic grid system consists of a 12-column grid. To employ it simply wrap the columns in a div with class of pl-row.

Never explains how to add a nested column.

 

@Aires

Share this post


Link to post
Share on other sites
Ray

It does right after:columns.png

Here's code with those classes applied:  

<div class="pl-row">
  <div class="pl-col-lg-3 pl-col-sm-4 pl-col-xs-6">Column</div>
  <div class="pl-col-lg-3 pl-col-sm-4 pl-col-xs-6">Column</div>
  <div class="pl-col-lg-3 pl-col-sm-4 pl-col-xs-6">Column</div>
  <div class="pl-col-lg-3 pl-col-sm-4 pl-col-xs-6">Column</div>
</div>

 

Share this post


Link to post
Share on other sites
jagipson

@Ray

@Simon 

@Andrew @Danny

I want a NESTED Column

Completely understand how to make a 4 column, but it never shows how to add a nested column.

<div class="pl-row">

This is wrapped in a 6 column and it has 2 columns inside
  <div class="pl-col-lg-3 pl-col-sm-4 pl-col-xs-6">Column</div>
  <div class="pl-col-lg-3 pl-col-sm-4 pl-col-xs-6">Column</div>

Stops here


  <div class="pl-col-lg-3 pl-col-sm-4 pl-col-xs-6">Column</div>
  <div class="pl-col-lg-3 pl-col-sm-4 pl-col-xs-6">Column</div>
</div>

 

DMS 2 you supply the code and it looks like this:

  1. <div class="row">
  2. <div class="span4">4</div>
  3. <div class="span8">8
  4. <div class="row-fluid">
  5. <div class="span6 zmb">6</div>
  6. <div class="span6 zmb">6</div>
  7. </div>
  8. </div>
  9. </div>
SEE ATTACHEMENT I WANT A NESTED COLUMN 

Screen Shot 2017-08-28 at 12.04.57 PM.png

Edited by jagipson (see edit history)

Share this post


Link to post
Share on other sites
Ray

Here's the same DMS sample code but with platform 5 classes:

 

<div class="pl-row">
  <div class="pl-col-xs-4">4</div>
  <div class="pl-col-xs-8">8
    <div class="pl-row">
      <div class="pl-col-xs-6">6</div>
      <div class="pl-col-xs-6">6</div>
    </div>
  </div>
</div>

 

Share this post


Link to post
Share on other sites
jagipson

Thats the code I thought was correct. See link below with your code:

https://matts-development-jeffgipson.c9users.io/page-layouts

There is no css on the site. Only way to get this to have no gap is to remove the following:

<div class="pl-row" style="color: white;">
  <div class="pl-col-xs-4" style="background: red;">4</div>
  <div class="pl-col-xs-8" style="background: blue">8
    <div class="pl-row">
      <div class="pl-col-xs-6" style="background: yellow;">6</div>
      <div class="pl-col-xs-6" style="background: teal;">BIG CAP ON RIGHT????</div>
    </div>
  </div>
</div>

OVERRIDE STYLES

<div class="pl-row" style="color: white; margin: 0;">
  <div class="pl-col-xs-4" style="background: red;">4</div>
  <div class="pl-col-xs-8" style="background: blue; padding: 0;">8
    <div class="pl-row" style="margin: 0;">
      <div class="pl-col-xs-6" style="background: yellow; padding: 0;">6</div>
      <div class="pl-col-xs-6" style="background: teal; padding: 0;">No Cap Now...</div>
    </div>
  </div>
</div>

 

You have to remove the margin of the row and the padding of each column. Or is that wrong?

 

@Ray @Simon @Andrew

Screen Shot 2017-08-29 at 9.20.42 AM.png

Share this post


Link to post
Share on other sites
Ray
  •  
  • This should get rid of the right in margin nested columns  
[class*='pl-col-'] > div {
	max-width: none;
}
  • as for the padding/margin issues, I recommend adding custom classes to handle this
.nopadding{
	padding: 0!important;
}

.nomargin{
	margin: 0!important;
}

 

Will look into implementing something more versatile for platform.

Share this post


Link to post
Share on other sites
jagipson

Sounds good. I had this code before but wasn't sure if you had something in the system that automatically changed everything and I was just missing it. 

 

Thanks for the help.

 

Matt

@Ray

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • DanatTLFN
      By DanatTLFN
      Site URL: thelocalfilmnetwork.com
      DMS Firmware: 2.2.1
      Wordpress: 4.5.1
      --------------------------------------
      Ticket Reference: 
       
      At the bottom of this post, there is a CSS only option that I have implemented into my site. It looks brilliant, and I am super grateful for that addition to the thread. The only issue I am having is that the code he provides does not include all of the styling options for the button itself.
      My question is, how might I go about editing the styling of the button i.e. shadows, every element of the coloring, and border colors?
      No big deal if it's not easy to fix. Happy to provide any further information if necessary.
      Kind regards,
      Dan
      P.S. I have opened up the button in Google Dev window with Inspect and start editing it there, but it looks like there are some areas of the code that are connected to an external source (most likely bootstrap) and therefore I can't seem to edit it as much as I would like.
    • Bakushan
      By Bakushan
      Hello everyone!

      I have searched the forums for the answer to this, and cannot find the answer.

      My client's site is here. http://diamond-jim.com/

      Currently when you click the banner at the top, it just takes you back to the home page.

      We would like for when you click the banner for it to call a number, since a majority of the visitors to the site are on mobile. I know this is possible, and have the code to do it, but I dont know where to put the code.

      I am aware of where the custom code input is for the childtheme in Pagelines, but do not know how to properly format the code to be a phone number (or any link I wish for that matter) instead of the default home page link.
       
      Any help is appreciated. Thank you so much!

      -Jared
    • redstate
      By redstate
      I'm trying to double-space the content in a Highlight and make it flush left. Where do I put the code? I've tried Custom Less/CSS and Styling Classes but neither seems to work. Is this the right code?
       
      p
      {    
           text-indent: 3em;    
           line-height: 2.5 em;
      }
       
      You can see my Highlight below the RevSlider at www.americansendingabuse.org. Do I need to make the Highlight taller so the content will better fit?
    • allanlove
      By allanlove+
      Hi
       
      I am building a new site and the client wants to have a different background image on each of the main pages, not just in a section, but applied to the entire page. This used to be easy in the old Pagelines but not so much in the new DMS.
       
      I wonder if someone could give me the custom css to use indicating which bits need to be unique for each page and also how I apply that code to the page itself? How do I apply a different class for each page of the site?
       
      I only have a very basic understanding of code so please go easy on me!!!
       
      Thanks
       
      Allan 
       
       
    • outtareach
      By outtareach
      I put some java snippet in a text box and now the page isnt loading but I cannot get in to remove the code.  Any suggestions here?
×