Posted 2 years ago #
Amazing plugin. I just have a couple of questions, since I'm kind of new at all of this.
How can I center the content of the cells? Currently, each cell's content appears to be aligned to the left, and I would rather it was centered horizontally and vertically.
Also, is there a way to change the thin border of the table to make it either white or invisible?
Thanks for any help you can provide!
Hi,
This requires a little bit of CSS code:
Just add the following to the CSS on the "Plugin Options":
.wp-table-reloaded td {
text-align:center;
vertical-align:middle;
}
This will center the text horizontally and vertically.
To change the border, just change the color in the CSS (a color value looks like #ABCDEF).
Hope this helps!
Tobias
Posted 2 years ago #
I'm having trouble finding the bit of CSS code that affects the border color. Is it somewhere in admin-style.css, or do I just need to create the code in the CSS box on "Plugin Options"? If so, what code would work for that?
Thanks so much for the code to center the cell content! It worked perfectly!
Hi,
no, the admin-style.css is ONLY for the styling of the admin part of WP-Table Reloaded! Those settings do NOT affect the layout of a table on a post/page!
It would be the easiest, if you could provide the URL to your site, so that we can see the table in question.
And then please describe, which border you want in what color.
Regards,
Tobias
Posted 2 years ago #
Hello Tobias, and first Thanks very much for your work and support.
I have spent this morning, the whole morning :), getting used to the way WP-Table Reloaded works, I could insert a background image,create and see tables, and I was wondering.. I create a table and stylish it, but what If I do not want all my tables look the same, I mean I know I can go to the plugin options and there write (or paste) the style like in your examples. So I think I missed something.. and some more, I could not set an image background and then write over it.. almost sure I missed something!.
Thanks very much!, all the best
Animal
Hi,
if you don't want all tables to look the same, just the different CSS selectors that are provided:
.wp-table-reloaded-id-X instead of just .wp-table-reloaded
Example:
.wp-table-reloaded-id-3 td { color: red; }
.wp-table-reloaded-id-5 td { color: blue; }
will make the text color for table 3 red, while the text color for table 5 will be blue.
This way you can style each table individually.
In short: The selector .wp-table-reloaded applies to every table created by the plugin, while .wp-table-reloaded-id-XYZ only applies to the table with the ID XYZ.
For your second issue: I don't quite understand why that shouldn't be working. Are you applying the background with CSS? Then the text should be over it.
Can you post a link to an example page?
Tobias
Posted 2 years ago #
Thanks Tobias,
The second issue it is coming because I did not write the first step properly let me try the way you said.. sure works!.
Thanks again for everything!
PD: as soos as I have something to show I´ll be back!
Posted 2 years ago #
Tobias, I have a formatting question for you similar to the first post on this thread. I have an image in one column and text in the corresponding column. Is there a way to center the text in the box in terms of vertical space? I want the text to be in the center of the box, not at the top. (ex: http://stonedesigns.net/?page_id=54)
Thanks for this great plugin! :)
Hi,
sure, that's possible :-)
Just add the following CSS to your theme's style.css.
.wp-table-reloaded .column-2 {
vertical-align: middle;
}
Best wishes,
Tobias
Posted 2 years ago #
hi, can you please go through this page and tell me how to fix this.
http://www.maldivestourism.info/mti/resorts
im using the theme "inove"
Posted 2 years ago #
Tobias,
Great plugin! Once quick question:
in a previous reply you demonstrated how to add css selectors so different tables appear differently. However, where do you select the css for a particular table?
Thanks
Jon
Hi,
all CSS needs to be put into the "Custom CSS" textarea on the "Plugin Options" screen of WP-Table Reloaded.
There is only one single place for all CSS. The plugin does not distinguish by table.
Besides that textarea you can also put your CSS into the "style.css" file of the theme you are using.
Regards,
Tobias
Posted 2 years ago #
Hi Tobias --
I'm having a hard time figuring out the css for adjusting my column widths. I'm not sure why this is but currently they're different across the three tables I've created despite the fact that so far as I know, I've only changed colors inside the plugin css area.
I'm not great with css but I poked around online and was able to find some info but I'm not sure how to properly select for the columns with css. For now, I'm just going to try and make them uniform across all of my tables without customizing individual ones (that will probably come later). I can't imagine it's that difficult but I ask it here since I'm guessing others will have also wondered about this.
My site is here and you can see what I mean.
Hi,
it looks like you managed to give them the same column widths, right? Or did I maybe not understand your question?
Regards,
Tobias
Hi, I have a similar question to the first one in this thread.
I want to have the text centered in all the cells except for the first column, where I want them to be left-aligned.
I've tried every variation I can think of, but no matter what I do, the whole table does one or the other. I can't get Column A to behave differently than the other columns. Here is what I have currently:
.wp-table-reloaded td {
font-family: Arial, Helvetica, Sans-serif;
font-size: 12px;
color: #000000;
text-align:center;
}
.wp-table-reloaded .column-A td {
text-align:left;
}
I've also tried changing the columns IDs to numbers since that is what is shown in your documentation. I've tried taking the text-align out of the main td css as above and doing a separate css setting for Column A with left align and another one for Columns B-H with center align. I've tried doing it with and without the td, and also th. And I think 2 or 3 other things I can't remember anymore.
What am I doing wrong?
I got it! I just hadn't tried just the right combination yet, apparently.
Here is the code that finally gave me what I wanted:
.wp-table-reloaded td {
font-family: Arial, Helvetica, Sans-serif;
font-size: 12px;
color: #000000;
text-align:center;
}
.wp-table-reloaded .column-1 {
text-align:left;
}
Hopefully that will help someone else!
Hi,
good that you figured this out by yourself already :-)
Otherwise your code would pretty much have been, what I would have suggested. It is important to understand that a ".column-N" selector already stands for a "td", so you can not have that after it, as the selector won't match any elements on the page.
Best wishes,
Tobias
Okay, I have a different question today.
I want to highlight one column as "Best Value." However, the code I am using seems to only affect the header row, not the whole column. Here's what I've got:
.wp-table-reloaded-id-3 .column-4{
background-color: #e0eee0;
}
Doing this only changes the background on Row 1, Column 4 (which is D). The rest of the rows in that column retain the main table colors. (I tried doing the border color also and had the same result)
You can see it here: http://aclevercat.com/services/backup/
Is there some trick to getting it to recognize the whole column?
Hi digigirl,
thanks for that question!
This basically happens, because now there are several commands that want to style the same attribute for the same elements (namely the background-color for the cells in the 4th column). The browser doesn't know which is more important, so it chooses one - in your case the "wrong" command.
However, there's a simply solution: Just tell the browser, which command has a higher weight, i.e. is more important: This is done by adding "!important" to the code.
So, just change your code to
.wp-table-reloaded-id-3 .column-4{
background-color: #e0eee0!important;
}and the 4th column will be highlighted :-)
Best wishes,
Tobias
Ah, brilliant! Thanks.
I'm gonna get all this CSS stuff down eventually.
I do appreciate your help!
Donation on the way.
Hi,
no problem, you're welcome. Good to hear that it works!
And thanks for your willingness to donate! I really appreciate that! :-)
Best wishes,
Tobias
Posted 2 years ago #
Hy!
i just add the following code to the CSS on the "Plugin Options":
.wp-table-reloaded td {
text-align:center;
vertical-align:middle;
}
And the the text is not aligned to the center horizontally and vertically.
please help
Hi,
very likely there is another CSS command somewhere that is resetting the CSS, i.e. in your theme.
Please provide the link to the page with the table, so that I can take a look. I'll then be able to tell you, how you'll need to adjust the CSS to take effect.
Best wishes,
Tobias
Posted 2 years ago #
http://www.offroad-lobor.hr/?page_id=487
thanks for helping me
Hi,
thanks for the link.
As I had thought, there's some CSS in your theme conflicting with the table CSS. It is easy to fix however, you just need to add the "!important", so that the table CSS gets a higher priority.
Please try this CSS:
.wp-table-reloaded td {
text-align:center!important;
vertical-align:middle!important;
}(Of course you can also use .wp-table-reloaded-id-5 as on your page.)
Best wishes,
Tobias
Posted 2 years ago #
thanks, now it works, but only when the first row of table is not the table head, when it is - then first row is aligned to the left (i am from croatia, sory about my bad english)
Hi,
yes, that's the case because of the selectors, which only includes td elements, while the head is a th element.
Easy to fix with another adjustment in the CSS. Please try:
.wp-table-reloaded td, .wp-table-reloaded th {
text-align:center!important;
vertical-align:middle!important;
}Best wishes,
Tobias
Posted 2 years ago #
problem solved, thanks again
Posted 2 years ago #
Tobias.
Updated column widths in custom CSS for a single table, but table wasnt formatting according to the custom CSS. I realised that this was caused by the long URLs listed in the table not wrapping. I used a shortened link text and snipURL, however would still like to show the unlinked full text of a URL. Is there a way to do this?
This topic has been closed to new replies.
