WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [Plugin- WP-Table Reloaded] Styling (16 posts)

  1. Jackie Chan
    Member
    Posted 2 years ago #

    I understand there is option for CSS styling in this plugin (WP-Table Reloaded) however im stuck, i want my tables to look like the one on this page http://www.designandprintcentre.net/stationery/ so basicly need to know how to change the Titles background colour.

    Also is it possible to change the Text colour?

    Thanks

  2. TobiasBg
    Member
    Posted 2 years ago #

    Hi,

    to change the title's background and text color, you would use something like

    .wp-table-reloaded-id-123 th {
      background: solid #000000;
      color: #ff0000;
    }

    That code will make the background black and the text white. The table in your link uses a background image, so you will need to create and upload such an image to your server first. Then the code needs to be adjusted:

    background: #000000 url(url-to-the-image.jpg) repeat-x center center;

    Regards,
    Tobias

  3. Jackie Chan
    Member
    Posted 2 years ago #

    Could you give me the code to change the titles background to black, the title font to a9bf04 please

    Plus i need to increase the text size and change the font to Helvetica.

    The Table im working on is http://www.designandprintcentre.net/contact/

    Thanks!

  4. TobiasBg
    Member
    Posted 2 years ago #

    Hi,

    seems like you need just a tiny tweak:

    .wp-table-reloaded-id-4 th {
      background: solid #000000!important;
      color: #a9bf04!important;
      font-family: Helvetica!important;
      font-size: 14px!important;
    }

    Regards,
    Tobias

  5. Jackie Chan
    Member
    Posted 2 years ago #

    That worked great thanks, how would i make the rest of the table look like the one on http://www.designandprintcentre.net/stationery/ ?

  6. TobiasBg
    Member
    Posted 2 years ago #

    Hi,

    after checking the code again, the easiest thing to do might actually be to deactivate the default styling of WP-Table Reloaded. That way, all tables would automatically look like the one from your link.

    So, just go to the "Plugin Options" screen of WP-Table Reloaded and uncheck the "Default CSS:" checkbox.

    Regards,
    Tobias

  7. Jackie Chan
    Member
    Posted 2 years ago #

    Ok thanks last few things,

    I want the background colour to be the lime green, and the text to be white on everything on the table except the header. Is there code for this?

  8. TobiasBg
    Member
    Posted 2 years ago #

    Hi,

    are you sure that you want that? :-) In my personal opinion that's not to nice for the eyes :-)

    But to do it, just change the current code to

    .wp-table-reloaded-id-4 td {
      background-color: #a9bf04!important;
      color: #ffffff;
      font-family: Helvetica;
      font-size: 10px;
      font-weight: bold;
    }

    Regards,
    Tobias

  9. Jackie Chan
    Member
    Posted 2 years ago #

    Yeah worked fine thanks you've been a great help!

    The finished version below

    http://www.designandprintcentre.net/contact/

  10. TobiasBg
    Member
    Posted 2 years ago #

    Hi,

    great, thanks for the confirmation!

    Best wishes,
    Tobias

  11. cristiMaghiar
    Member
    Posted 2 years ago #

    Hi,
    Is there a chance to use HTML tags in the wp-table reloaded editor so i can make individual styling for some cells or words in a cell

    for example i have a column for matches and i need to bold the team that won, in another column there will be words like win/ draw/ loose and i want to give them different colours

  12. TobiasBg
    Member
    Posted 2 years ago #

    Hi,

    sure, you can simply use HTML code in table cells. Or you can use CSS code by adding it to the "Custom CSS" textarea on the "Plugin Options" screen.

    Regards,
    Tobias

  13. newsedit
    Member
    Posted 2 years ago #

    Hi Tobias,
    Even for a hopelessly non-tech person like me, your plugin is extremely promising and this forum, in particular, is quite helpful.

    To continue the current line of discussion, is it possible to set the CSS code so that it will affect only the cell contents in a specific table column?

    I am creating a large series of four-column tables and the fourth columns in each contain multiple lines of text (link addresses) that I would like to display as clickable hyperlinks on my site-in-construction. I can do this, obviously, by manually adding the HTML code to each intended link, but I have tens of thousands of them in my CSV files -- so a more automatic means of coding them would certainly be welcome.

  14. TobiasBg
    Member
    Posted 2 years ago #

    Hi,

    thanks for your question.

    What you want to achieve is actually not related to styling. You will first need to make the links clickable, which is only possible through HTML.
    And you are correct, manually adding all those links would be tedious - but you are lucky :-) I created a small Extension to WP-Table Reloaded a while ago, that will automatically convert plain URLs to clickable links (i.e. it will automatically create the HTML code).
    You can find all details here: http://tobias.baethge.com/2009/12/extension-1-url-to-link-conversion/

    Regards,
    Tobias

  15. newsedit
    Member
    Posted 2 years ago #

    Excellent! Thank you for your help.

  16. TobiasBg
    Member
    Posted 2 years ago #

    Hi,

    no problem, you are very welcome! :-)

    Best wishes,
    Tobias

Topic Closed

This topic has been closed to new replies.

About this Topic