[Plugin: WP-Table Reloaded] Table Borders

Hi,

I’m confused here. You say that WordPress removes the   when switching from Visual to HTML editor. That would only happen if you use direct HTML code for tables, but it would not happen with WP-Table Reloaded.
Also, WP-Table Reloaded’s default styling does add borders to the cells…

Are you actually using WP-Table Reloaded (as you have posted in the plugin’s support forums)?

Regards,
Tobias

Tobias,
Yes, I exported the table and pasted the html code into my page. Then edited it there with my rotating images. I managed to get a frame around the cells, but need cellspacing to make it look more “spaced” and was looking into a hover color.

Hi,

I don’t see why you pasted in the HTML manually instead of using the plugin, but you will need to do the same for the CSS then as well.
The best choice is probably to look for some CSS tutorials to see how the selectors generally work. Then, copy over the relevant CSS code from WP-Table Reloaded’s “plugin.css”, to your theme’s “style.css”.

Regards,
Tobias

Thank you Tobias. I cut n pasted the table rather then using the plugin because the usage seemed limited. Do you recommend I try n just put in the shortcode and use your custom css?
Do you have the css codes for wp reloaded for hover cell, and for cell spacing?
If you think I am making this too complicated Im not too far enough in where I cant go back.

Hi,

if you just need one table, it might indeed be too much to use the plugin just for that, I agree.

It will just be a little bit more complicated to style the table to your liking, but I’ll try to help anyway.
The best way for this would be this:
Please post the link to the page with the table and describe in as much detail as possible what you want to change regarding the styling.
I will then try to put this into CSS code for your theme.

Regards,
Tobias

https://www.industrialmaintenanceplatforms.com/homepage

This is my homepage. The table with the categories listed is what I need help on. I would like to make them look like buttons so some of the more “oblivious” customers will know that they are links.
So any type of shadow that makes it look like a button, a mouse-over highlight or frame color change, and spacing in between each cell so that they look like separate buttons.

I used two tables here, one row each. I did this because when I created multiple rows it for some reason was interfered by my theme and each cell was on a separate row. When I created two 1 row tables, it fixed the problem.

Thank you for your help.
Shannon

Hi Shannon,

thanks for that explanation.
Here are some ideas:

First, add

class="category-table"

right after the opening

<table

HTML code. This new CSS class can then be used in the CSS code for the styling.
Then please try adding this to your theme’s “style.css”:

.category-table td {
  padding: 20px !important;
}
.category-table td a:hover {
  color: #ff0000 !important;
}

The padding is what adds the space between the images. The second part will make the text color of the links red when hovered.

Hope this helps!

Regards,
Tobias

Great its working..
A couple things though…
Am I able to change the hover so it highlights the cell as well, not just the words?

Also, I need the spacing to be in between each cell, rather than padding within the cell. I believe it is called cell spacing.

And Do you know of any code that can help me set a shadow on the cells so that it looks more like a raised button?

Please include a link to donate to you for all you help. Much appreciated. Thank you!

Hi,

yes, that is also possible:

Please remove the current “style” attribute from the <table> entirely.
Then add this to the CSS:

.category-table {
  border-collapse: separate;
  border-spacing: 5px !important;
}

Highlighting a cell on hover is possible with this:

.category-table td:hover {
  background-color: #eeeeee !important;
}

I’m not sure if this is a good idea though, as not the entire cell is clickable.
The same is true for a shadow, but if you want, you can try this:

.category-table td {
  -webkit-box-shadow: 6px 6px 25px #000000;
  -moz-box-shadow: 6px 6px 25px #000000;
  box-shadow: 6px 6px 25px #000000;
}

(This code is three times almost-the-same to make it work in as many browsers as possible.)

And thank you very much for wanting to donate, I really appreciate it! Here’s the link: https://tobias.baethge.com/donate/

Regards,
Tobias

Tobias, your amazing, I love the button look, check it out. ??

Also, I surrounding my rotating images with A references for the links and now the whole button is clickable.

Thank you so much in helping our business home page look better than ever! *curtsy

Hi,

very cool! You are very welcome for the help!

Best wishes,
Tobias

Tobias, one more question. I went home last night and was viewing the page from IE. The new code that we wrote is not showing up in that browser. Is there a plugin that you know of, or someway to make it compatible? Thank you again for all of your assistance.

Hi,

IE just doesn’t support some of the used features, like the shadow ??

The only good way to make it compatible is to replace it… (Just trying to be funny… ?? )

Best wishes,
Tobias

Oh boy… lol
Okay, I also just got a text from my supervisor and he told me that the butttons we created stopped working last night.. I am checking it through FF and it looks fine, but when I go through his computer on Google Chrome the code doesnt show up. Its so frustrating when these search engines do this! Is there any plugin that helps this?

Thanks Tobias, sorry to keep bugging you. ??

Hi,

this has nothing to do with search engines, and there’s no plugin “against” it.
This was probably just a temporary glitch in the caching. I noticed the same when I wanted to take a look at your results this morning: They were gone (in Google Chrome). But now, they are showing just fine, so the cache probably just had to refresh.
If the problem persists on that computer, try clearing the browser cache there.

Regards,
Tobias