WordPress.org

Ready to get started?Download WordPress

Forums

WP-Table Reloaded
[resolved] Too many tables CSS causing indexing issues (9 posts)

  1. mnorw
    Member
    Posted 2 years ago #

    Hi.

    First off, I want to thank you for all your work on the plugin -- it is excellent. I'm not sure what's better, the plugin itself or your support and answering all our questions.

    I recently downloaded this plugin and have created nearly 200 tables for my website, which turns out great. The problem, howver, is that most of those tables have CSS attached to them, which is causing a major indexing issue when it comes to the search engines, such as Google. Via webmaster tools, I am getting an error that I didn't receive before downloading the plugin that the "page is too long", likely because the page source is dominated by the CSS I inputed through the plugin. Apparently the length is 256KB and I am surpassing it.

    Is there a way to shorten the CSS for the plugin so my website doesn't appear too big in size and thus not cause indexing issues?

    It should be noted that most of the CSS for the nearly 200 tables created are almost identical but each of the styling for each of the different tables has about 10 or so sections of styling, so if you use that for about 200 tables, it adds up.

    For example, below is the styling I use for one of my tables, which is used for about 5 dozen other tables:

    .wp-table-reloaded-id-70 th, .wp-table-reloaded-id-70 .sorting {
    background-color: #FFFFFF!important;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    }

    .wp-table-reloaded-id-70 .sorting_asc, .wp-table-reloaded-id-70 .sorting_desc {
    background-color: #FFFFFF!important;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    }

    .wp-table-reloaded-id-70 .even td {
    background-color: #FFFFFF;
    }

    .wp-table-reloaded-id-70 .odd td {
    background-color: #ECECEC;
    }

    .wp-table-reloaded-id-70 .row-hover tr:hover td {
    background-color: #E7E7E7!important;
    }

    .wp-table-reloaded-id-70, .wp-table-reloaded-id-70 td, .wp-table-reloaded-id-70 th {
    border: none!important;
    border-collapse: collapse!important;
    border-spacing: 0px!important;
    }

    .wp-table-reloaded-id-70 {
    margin: 0px!important;
    padding-bottom: 0px;
    padding-top: 0px;
    }

    .wp-table-reloaded-id-70 .column-1 td {
    text-align:center;
    vertical-align:middle;
    }

    .wp-table-reloaded-id-70 .column-2 td {
    text-align:center;
    vertical-align:middle;
    }

    .wp-table-reloaded-id-70 td {
    vertical-align:middle;
    }

    .wp-table-reloaded-id-70 .odd td {
    background-color: #ECECEC;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    }

    .wp-table-reloaded-id-70 td {
    font-family: Arial;
    font-size: 11px;
    line-height: 17px;
    }

    .wp-table-reloaded-id-70 .even td {
    background-color: #FFFFFF;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    }

    ------------

    If I were to use the above styling for tables 70-150, for example, is there a way to combine the CSS of all of them in one CSS instead of repeating it over and over and just changing the table ID?

    I appreciate your help.

    http://wordpress.org/extend/plugins/wp-table-reloaded/

  2. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    Hi,

    thanks for your post.

    For this, the best option would be to use an "Extra CSS class", which can really help in reducing the amount of CSS. Please take a look at http://wordpress.org/support/topic/plugin-wp-table-reloaded-is-there-a-way-to-shorten-this-css where I explain how to use this.

    Another idea would then be to move the CSS to a file, and then load that in the "Custom CSS" textarea with a CSS @import command.

    Regards,
    Tobias

  3. q5sys
    Member
    Posted 2 years ago #

    I read the other link, however not having much previous experience with doing custom CSS work, can you give me a bit more of an example of what im adding to my stylesheet?
    I've got a similar situation with OP about having multiple tables that i need formated all the same way. On my site I will only have 2 types of tables. One is a generic table and all the vanilla settings work great. The other is a bit more specific and is where im running into an issue. I will have about 60 of the vanilla style tables, and several hundred of the fancy tables.

    reading the other link Im a bit confused the difference between what im putting in the style.css file versus in the 'custom CSS' field in wp-table reloaded.

    My situation is a bit eaiser than OPs... All I need to share amongst a few hundred different tables is:

    .wp-table-reloaded-id-6 .column-1 {
      width: 15px;
    }.wp-table-reloaded-id-6 .column-2 {
      width: 45px;
    }
    .wp-table-reloaded-id-6, .wp-table-reloaded-id-6 td, .wp-table-reloaded-id-6 th {
      border: none!important;
      border-collapse: collapse!important;
      border-spacing: 0px!important;
    }

    (once I figure out whats going on with the width problem Im having in my other post here)

  4. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    Hi,

    thanks for your post.

    As you have two different styles, where one of them is the default styling, you'll basically just need one "Extra CSS class" for the fancy style tables, for example

    wp-table-reloaded-fancy-style

    Just put that into the "Extra CSS class" field on the "Edit" screen for each table that shall get the fancy styling.
    In your "Custom CSS" code, you can then use this Extra CSS class, instead of the individual table classes. So, your code would become

    .wp-table-reloaded-fancy-style .column-1 {
      width: 15px;
    }.wp-table-reloaded-fancy-style .column-2 {
      width: 45px;
    }
    .wp-table-reloaded-fancy-style,
    .wp-table-reloaded-fancy-style td,
    .wp-table-reloaded-fancy-style th {
      border: none!important;
      border-collapse: collapse!important;
      border-spacing: 0px!important;
    }

    The difference between putting the CSS into the "style.css" or the "Custom CSS" textarea on the "Plugin Options" screen of WP-Table Reloaded basically is caching. style.css has advantages here. However, in the "Custom CSS" textarea, the code is easier to maintain, as it will for example be safe when the theme is changed or updated.
    As your CSS code will likely be rather short, putting it in the "Custom CSS" textarea should be the better option for now.

    Regards,
    Tobias

  5. mathijsbok
    Member
    Posted 2 years ago #

    Hi Tobias,

    when ik do the instructions like above, the extra CSS takes also the CSS of the order CSS code.

    [CSS moderated as per the Forum Rules. Please just post a link to your site.]

    .wp-table-reloaded-overzicht takes also the row 4-12 of .wp-table-reloaded. Do you know how that happends ???

    Regards,
    Mathijs

  6. mathijsbok
    Member
    Posted 2 years ago #

    He uses this code :

    .wp-table-reloaded .row-1 td {
       font-weight: bolder!important;
    }
    
    .wp-table-reloaded .row-2 td {
       font-weight: bolder!important;
    }

    also at :

    .wp-table-reloaded-overzicht .row-43 td {
       font-weight: bolder!important;
    }
    
    .wp-table-reloaded-overzicht .row-44 td {
       font-weight: bolder!important;
    }

    In the CSS of wp-table-reloaded-overzicht row 1 and 2 are also Bold. But i didn't edit that in the CSS.

  7. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    Hi,

    this probably happens, because .wp-table-reloaded is a class of all tables, including those that have the extra CSS class .wp-table-reloaded-overzicht.
    So, to make this really safe, you might need to introduce another extra CSS class, for those tables that don't have one yet.
    Or, you could try to make the commands of the .wp-table-reloaded-overzichtmore important, by appending the !important keyword after each command.

    Regards,
    Tobias

  8. mathijsbok
    Member
    Posted 2 years ago #

    Hi Tobias,

    i renamed .wp-table-reloaded to .wp-table-reloaded-uitslag
    Now it al works. I only have to put that into the "Extra CSS class" field on the "Edit" screen for each table that shall get the styling for it.

    Thanks for all.

  9. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    Hi,

    yes, that's exactly what I meant :-) Great that it works. (And although it seems like an extra step, it really is the cleanest solution.)

    Best wishes,
    Tobias

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic