Hi,
thanks for your questions.
1.) To add such a border, please try the following “Custom CSS” (just enter it into the “Custom CSS” textarea on the “Plugin Options” screen).
.wp-table-reloaded-id-8 td, .wp-table-reloaded-id-8 th {
border-right: 1px solid #000000!important;
}
(you can of course change the color value to whatever you like).
2.) To add some space there, try adding a <br/> HTML tag in a new line before the table Shortcode. That will add a line break, which should give some spacing.
3.) To style the “Search” (and the box), try this “Custom CSS”:
#wp-table-reloaded-id-8-no-1_filter, #wp-table-reloaded-id-8-no-1_filter input {
font-size: 14px!important;
color: #ff0000!important;
}
(That’s only an example for the styling of course. If you don’t want to change the actual text field, remove the , #wp-table-reloaded-id-8-no-1_filter input from the selector).
Hope this helps 🙂
Best wishes,
Tobias
http://gringodog.com/pet-friendly-hotels/pet-friendly-hotel-mexico/
Beautiful, but I’m still having trouble with the search button. I would like to make the box border a little thicker, and IF POSSIBLE move it’s location to the left side of the table. this is the code that I have in there now:
.wp-table-reloaded_filter, #wp-table-reloaded_filter input {
font-size: 14px!important;
color: #000000!important;
border-width: 1px!important;
}
No id numbers are used because all the tables on this site are identical.
(and yeah, I know I gotta go back and change those long URL’s – I just didn’t want to do it until you got me all fixed with this.)
Hi,
that code is slightly wrong. The CSS selectors are a little bit tricky here. As the filter box comes from the DataTables JavaScript library, the ID based selector and the class based selector are different. Please try the following:
.datatables_filter {
float: left!important;
text-align: left!important;
}
.datatables_filter input {
font-size: 14px!important;
color: #000000!important;
border-width: 2px!important;
}
That should move it to the left and increase the size and border.
Best wishes,
Tobias
http://gringodog.com/pet-friendly-hotels/mexico/
(note that the URL has changed slightly)
Nope. That didn’t do it. Here’s all the code that’s in there now, with the code you suggested above at the very bottom.
[CSS moderated as per the Forum Rules.]
Tobias, please also send me the link to make another donation to you to thank you in small small, completely inadequate way for all your assistance.
Hi,
you also added the code
.dataTables_filter {
font-weight: bold!important;
color #990000!important;
}
to the CSS, but unfortunately forgot a colon :, right after color. Due to that, all of the code that follows will not work. So, just change that line to
color: #990000!important;
and you will be fine 🙂
Donations are possible through http://tobias.baethge.com/donate/. Thank you very much, I really appreciate it! 🙂
Best wishes,
Tobias
Another donation made, with my thanks.
Code still isn’t working to move the search text and box to the left side. The box border is still very faint. Here is what the applicable code looks like now (at least, I THINK this is the applicable code!)
.dataTables_filter {
font-weight: bold!important;
color: #990000!important;
}
.datatables_filter {
float: left!important;
text-align: left!important;
}
.datatables_filter input {
font-size: 14px!important;
color: #000000!important;
border-width: 2px!important;
}
Hi,
thank you very much for that donation, it really makes me happy!
And I hope, I have good news. I spotted another tiny mistake (this time, it is my fault, sorry about that): In the CSS code, I forgot about the case sensivity. It is necessary to spell dataTables with a capital T (as you correctly did in the first piece of code), and not with a lowercase t (as I did in my code suggestion).
So, the following code should now finally work:
.dataTables_filter {
font-weight: bold!important;
color: #990000!important;
float: left!important;
text-align: left!important;
}
.dataTables_filter input {
font-size: 14px!important;
color: #000000!important;
border-width: 2px!important;
}
Note, that I also merged the first two pieces of code. That is possible as they apply to the same CSS selectors and it groups everything nicer together.
Best wishes,
Tobias
Almost – lost the right and the bottom of the search box. I tried to mess with padding, but just made it worse. (Note that I have changed the border width to 3px)
And thanks for merging the code for me. I did realize that was not good practice, but I sometimes feel that ‘if it ain’t broke, don’t fix it.’ And with my VERY limited coding skills, that’s a rule to live by. 🙂
Hi Jeanette,
thanks for sharing your story about the site with me in your email!
For the search box:
The bottom and right are not actually lost, they are just colored in a light gray (to resemble a shade) which just is not visible against the white background.
So, let’s just make the entire border black. 🙂
I suggest that you replace the
border-width: 3px!important;
with this:
border: solid #000000 2px;
Then it will be all black with the gray shading.
Best wishes,
Tobias
You are too cool. Thanks!
Hi Tobias,
I’d like to make the search bar longer so it’s the same width as my table and then have words in the search bar that disappear when someone clicks inside, instead of the word “search” outside. Here’s an example: http://www.michaellegan.org/EMAILFORM.html . Is it possible to do such a thing with your search bar?
Hi,
thanks for the question and the link.
I understand what you want to do, but unfortunately, I don’t know achieve it with the search field. That’s because the search field is added by the DataTables JavaScript library which also performs the search (and sorting and other features).
I’m not too much into the internals of that library, I only use with the plugin. Therefore, I suggest that you ask this in the DataTables forums at http://www.datatables.net/forums.
Best wishes,
Tobias
