How can I style multiple tables using Extra CSS Classes?

  • Resolved skyecade

    (@skyecade)


    10 years, 6 months ago

    Hello,

    I’m trying to style multiple tables at once.

    For example, I have a template table that I want to use solely for “verbs” throughout. So I added a class “verb” to the Extra CSS Classes section and then I added this code to the custom CSS section:

    /*Change the color of hovered over rows in verb tables*/
.tablepress .row-hover .verb tr:hover td {
	background-color: #00ff00;
}

    This did not change the hover color. However, when I remove the .verb it does change the hover color for all the tables on the site.

    I looked at the HTML source and it did add the following:

    <table id="tablepress-8" class="tablepress tablepress-id-8 verb">

    I’m no expert in CSS as you can tell. Any advice would be greatly appreciated.

    Thanks,

    Bob

    http://wordpress.org/plugins/tablepress/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    10 years, 6 months ago

    Hi Bob,

    thanks for your post, and sorry for the trouble.

    You are very close already, actually. You’ll basically just have to replace the native TablePress CSS selectors (.tablepress and .tablepress-id-123) with your “Extra CSS class”. Thus, please try

    /* Change the color of hovered over rows in verb tables*/
.verb .row-hover tr:hover td {
	background-color: #00ff00;
}

    Every table with that “Extra CSS class” will then get that background color on hover, while the other tables will not be affected by this.

    Regards,
    Tobias

    Thread Starter skyecade

    (@skyecade)

    10 years, 6 months ago

    That worked great! Thanks for the help and the lesson. 🙂

    Plugin Author TobiasBg

    (@tobiasbg)

    10 years, 6 months ago

    Hi,

    no problem, you are very welcome! 🙂 Good to hear that this helped!

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How can I style multiple tables using Extra CSS Classes?’ is closed to new replies.