Jump to content
Sign in to follow this  
christopher_a

Tables

Recommended Posts

christopher_a    0
christopher_a

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!

Share this post


Link to post
Share on other sites
Rob    547
Rob

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:  http://coding.smashingmagazine.com/2008/08/13/top-10-css-table-designs/

 

Alternatively, we have a Grid system which is like a table. That may be found here: http://demo.pagelines.me/tools/

  • Like 1

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
christopher_a    0
christopher_a

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?

Share this post


Link to post
Share on other sites
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
christopher_a    0
christopher_a

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?

Share this post


Link to post
Share on other sites
Rob    547
Rob

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


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

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

Sign in to follow this  

  • Similar Content

    • burkeproperties
      By burkeproperties
      Hello,
       
      I have inserted some tables into my site but can't get the border to show. I would like the border color to be visible but can't get it to work. Here is the link to the page I am working on: http://proto.burkeproperties.com/condominiums/library-square/availability/. The content on the right side of the page is the content where the border doesn't show up. If any one can help me that would be great. Thank you!.
       
      Emily
      Marketing Coordinator
      Burke Properties 
    • mtaus
      By mtaus+
      I've installed a widget for a job listing service and I'm trying to add some basic styles to change font size, font-family and the table width by adding the following JS to a media section:
       
      <script type='text/javascript' src='https://www.smartrecruiters.com/img/script/smartWidget/smart_widget.js'> </script> <script type='text/javascript' class='job_widget'> widget({ "searchField":"", "company_code":"ABODO", "bg_color_widget":"#ffffff", "bg_color_headers":"#ffffff", "bg_color_links":"#99ccff", "txt_color_headers":"#292929", "txt_color_job":"#3d3d3d", "bg_color_even_row":"#ffffff", "bg_color_odd_row":"#f7f7f7", "custom_css_url":"https://www.smartrecruiters.com/img/style/smartWidget/smart_widget.css", "auto_width":"auto", "auto_height":"auto", "number":"on", "job_title":"true", "location":"true" }); </script> I've added this Custom Code panel:
       
      .srJobList .srJobListJobEven .srJobListJobOdd * {width:100%; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:14px;}  The table is located here: http://blog.abodo.com/careers/   I can't get these style changes to stick. Any suggestions would be appreciated.  
    • Toby
      By Toby
      Hi, I am working with Jigoshop and I have noticed that the table and forms do not play well with the 'responsive' element of DMS.
       
      Here is what my cart looks like on iPhones (the white is off screen.)
       
      http://postimg.org/image/px076xtfn/
       
      Here is how the checkout form is displayed on iPhones
       
      http://postimg.org/image/v5eorce2h/
       
       
      If you would like to see the CSS or check the code here is the link:
       
      www.recomatt.com.au
       
       
      Thanks in advance for the help :)
    • jonthompson
      By jonthompson
      I need to decrees some margins on a box I have been building. 
       
      here is a visual: http://screencast.com/t/DbCr3nxYT
       
      here is a link: http://refined.huntersfairwaysothebysinternationalrealty.com/benefits/
       
      I set it as password protected, or I think it should be, so here is the link: hfsir
       
      please help
    • mitzelumir
      By mitzelumir
      so I have a flash animation in a widget to make it a banner, I decided to make the banner smaller and put some information beside it and put it in a table so it would work, there was some odd spacing going on so I put some style coding to fix it but now there is odd spacing at the bottom of the table.
       
      http://ctlinternational.ca/wp/
       
      here is my code: 

      <table>
      <tr>
      <td style="position:relative;bottom:200px;"><h3>Home</h3>CTL Business Group Limited was established in 2007. We have offices in Calgary, Canada and Taipei, Taiwan. Our professional staffs and partners provide practical business management experiences to the clients.</td>
      <td align="right">[swfobject]263[/swfobject]</td>
      </tr>
      </table>
       
×