mskimberly

Ultimately, I’m trying to modify some css of a plugin (in this NextGen Scroll Gallery) so that during an update of the plugin the modified css is not lost.

I have tried putting the modified css in my child theme css folder, to no avail. I then added more specificity (the body tag) to the css, still to no avail.

It seems that child plugin solution probably doesn’t work…

I see there may be another solution that deregisters the plugin’s stylesheet, and I would then put the plugin styles along with my modified styles in my child theme’s css. Is this acceptable? If so, can someone point me in the direction of where I would find the handle for wp_enqueue_style with regards to this stylesheet?

I would then put the function in my child theme, and it would look like this:

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
    function my_deregister_styles() {
	wp_deregister_style( 'handle' );
       // deregister as many stylesheets as you need...
}

This example can be found at: https://www.wprecipes.com/wordpress-trick-disable-plugin-stylesheet

NOTE: I see there is a custom css plugin that would allow for theme/plugin css modifications but I would prefer to not use a plugin if possible… just to keep the number of plugins to a minimum.

Wonderful! Thank you SO much! That worked perfectly.

That did it!! Thanks so much! I am new to your plug-in, but already see why it’s so popular. Not only is it well done, but your support is invaluable. I will be sure to make a donation. Thank you!

I managed to get the tables to not overlap each other when resizing the browser, but rather move down below each other. To do this I changed the tablepress-wrapper width to a fixed pixel amount (295px) instead of the percentage (32%).

However, centering the table name isn’t working. I am stumped. The issue appears to be with the tablepress-wrapper, but what is causing it I don’t know. As you can see, I took out the padding-right and margin-right properties from the tablepress-wrapper, but there is still space to the right of the tables.

The custom code I am currently using is:

.tablepress th,
.tablepress td {
	text-align: center;
}

.tablepress {
  width: auto;
	border: 1px solid black;
}
.tablepress .column-1 {
	width: 30px;
}
.tablepress .column-2 {
	width: 30px;
}
.tablepress .column-3 {
	width: 30px;
}
.tablepress-wrapper {
        width: 295px;
        float: left;
}
.tablepress-wrapper .tablepress-table-name {
         text-align: center;
}

And the HTML for the page looks like this, with the spaces:

<p> These are rates to some popular requested destinations.  It is NOT a complete rate list.  Please call if your desired destination is not in the rate list--we would be happy to speak with you!</p>

<div class="tablepress-wrapper">

[table id=1 /]

</div>

<div class="tablepress-wrapper">

[table id=2 /]

</div>

<div class="tablepress-wrapper">

[table id=3 /]

</div>

<div class="tablepress-wrapper">

[table id=4 /]

</div>

<div class="tablepress-wrapper">

[table id=5 /]

</div>

You’ve been very helpful so far, thank you!

Great, thanks!

I had to change the width of the tablepress wrapper from 33% to 32% because the additional padding pushed the third table to the next line. So, that did allow the tables to be next to one another and give some space between tables. It now looks like this:

.tablepress-wrapper {
    width: 32%;
    float: left;
    padding-right: 10px;
}

This code to center the table name over the table mostly worked, except because the padding was added to the wrapper, the table name was centering over the width of the table AND padding. So, the table name was showing up a little bit more to the right with this code:

.tablepress-wrapper .tablepress-table-name {
    text-align: center;
}

To counteract this, I added padding to the above code. I would have thought adding the 10px to the right padding would have done it, but it doesn’t look centered unless it’s 24px of right padding. So, now I have this:

.tablepress-wrapper .tablepress-table-name {
    text-align: center;
    padding-right: 24px;
}

I’m not sure this centers it exactly, but it does look pretty close. What do you think–is it centered? Is there a way to tell for sure?

Everything is looking really good! Besides the centering question, I wonder if you know of a way to keep the tables from overlapping when the browser size is reduced in this responsive layout? I would like them to just fall below each other so they are still readable. Not sure if this is the appropriate place for this question…

Thanks very much for your quick reply!

I now have tables next to each other. They are not aligning across the screen, however, but rather are sitting below each other a little bit. If I take out the table name, then the tables will sit directly next to each other, but I have to have the table name.

I would also like to add some space between the tables. How do you recommend doing this?

Also, I would like to center the table name over the table, if possible. Here’s what I’ve tried so far:

This gets the table name centered across the page, not across the table:

.tablepress-table-name {
        text-align: center;
}

This gets the table names centered, but then the tables don’t go across the screen, but back to one table underneath each other:

.tablepress-table-name {
	text-align: center;
	width:33%;
}

Lastly, while the code you posted previously does work (re-copied below), is there a way to apply this width and float to ALL tables without having to specify the ID of each one?:

.tablepress-id-1,
.tablepress-id-2,
.tablepress-id-3 {
       width: 33%;
       float: left;
}

Thanks again!