Jump to content


Photo
- - - - -

Tables

table

  • Please log in to reply
7 replies to this topic

#1 christopher_a

christopher_a

    Advanced Member

  • Members
  • 35 posts
  • Country: Country Flag

Posted 12 February 2013 - 09:15 PM

Are there any built in table style options in Pagelines Framework?

 

If I was to use custom css for a table styling, would i use syntax similar to what's below?

 

In page:

 

<table id="table-name"></table>

 

Then in the Custom Code admin panel:

 

.table-name { }

 

 

Thanks!



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 12 February 2013 - 09:48 PM

Hi,

 

Actually, PageLines does not have any special table handling, but WordPress tends to handle tables a bit oddly. If specific CSS isn't added, they have all sorts of styling issues.

 

I recommend CSS tables instead of standard HTML.  Try this: 

Please Login or Register to see this Hidden Content

 

Alternatively, we have a Grid system which is like a table. That may be found here:

Please Login or Register to see this Hidden Content


  • kyuriz likes this

#3 christopher_a

christopher_a

    Advanced Member

  • Members
  • 35 posts
  • Country: Country Flag

Posted 12 February 2013 - 11:23 PM

OK, interesting!  Using nested grids, I can likely get the arrangement nailed down, but how about styling?

 

If I used a span4/span8 configuration, then a nested 4/8 on span 8, is there a way to put a border/background on the whole right side span8, including the nested 4/8 pans?



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 13 February 2013 - 12:25 AM

Wrap the whole thing inside a div with a unique class like <div class="mygridback">, then, create some CSS like

.mygridback {background-image:....}.  The custom CSS goes in Dashboard > PageLines > Site Options > Custom Code

 

That will let you place a background behind the whole group. Just remember to add the closing </div> at the end.



#5 christopher_a

christopher_a

    Advanced Member

  • Members
  • 35 posts
  • Country: Country Flag

Posted 13 February 2013 - 02:08 AM

Awesome!  That totally worked.  That demo page is very handy, had never seen it before.

 

 

Ok, I think I'm down to the last snafu...

 

I set up a grid with nested spans, in span 4 there's a list of text, in span8 there are single file audio players.  The players have a slightly different heigt than the text, so the 10 lines of text in the first column, are shorter than the ten columns of audio players.  I've tried adding style="line-height:26px" to the div classes, experimented with different values/font sizing and can get it close, but it still looks off.  I also tried wrapping each row's content into a separate nested grid.  That fixes the vertical issue, and each row is aligned horizontally, unfortunately this also puts double spacing between every row.  I'm guessing this is due to the theme's styling for grids.  Is there some way to achieve spacing sync between the 2 spans?



#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 13 February 2013 - 03:19 AM

Honestly, I'd have to see it to give you some guidance. 



#7 christopher_a

christopher_a

    Advanced Member

  • Members
  • 35 posts
  • Country: Country Flag

Posted 13 February 2013 - 05:04 AM

Thanks, here's the page: 

Please Login or Register to see this Hidden Content

 

If  you have any insight or advice, I would really appreciate it.



#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 13 February 2013 - 05:30 AM

The arrow graphic is your culprit.  It needs to be resized or replaced with one no higher than the oval image with the plus sign. That's what's pushing text apart.







Also tagged with one or more of these keywords: table