Plugin Author
Josh
(@josh401)
Hi Jonathon,
How are you inserting your columns? Are you using the tables? Or are you using the shortcodes?
If you are using the tables, after you insert your table, go to the cell/cells you would like to add a border. Then, click the table button dropdown arrow to open up the “Table Cell Properties” dialogue box.
From here, you can control the css attributes of the table cells.
Thanks for your quick answer Josh!
I tried to change at “Table Cell Properties” but I don’t really understand what to do. I tried to add border style: solid;
Pleas tell me what I have to change. I just want a border around all my cells.
Thank you!
Plugin Author
Josh
(@josh401)
You’re welcome.
Okay..
1. Insert a table
2. Add your content
3. Click any cell in your table
4. Click the table dropdown arrow next to the table button
5. Click Table Cell Properties
6. Click the “Advanced” tab in the popup
7. Click in the box “Border Color” and enter a hex color
OR
Click just to the right of the box, and the color picker will open
8. After you enter your color, look at the bottom of the popup window and make sure “Update all Cells in Table” is selected.
OR, at right after step 6, you can type in a custom css style into the “Style” box. Something like this would work:
border: 3px solid #FF0000;
Okey, I see.
I tried something like that before and now I tried it again and I think I know why I’m so confused.
I don’t see the border in the “Edit post” mode…? I’am only see the border if I look att the post on the page. Do you understand what i mean?
I can’t see the border in “edit post mode”.
It looks like this:
http://www.bilddump.se/bilder/20120219222143-90.228.243.114.JPG
But when I look at the page I se the border.
It looks like this:
http://www.bilddump.se/bilder/20120219222252-90.228.243.114.JPG
Can I do something so I can see the border in “edit mode” or in preview?
Thanks for your help!
Plugin Author
Josh
(@josh401)
Hmmm.. not that I currently am aware of. The tables plugin written for tinymce is “buggy” at best. I had to make a lot of modifications to it in order to get it playing nicely with various configurations of wordpress.
I’ll look into this. I know it’s probably got something to do with importing the styles to BOTH the frontend AND the admin area.
Basically, there is one stylesheet which controls the tinymce editor area, and another which is used for your front end. This has been the primary reason the tinymce editor is nowhere near true wysiwyg.
Gimme a few days, and I’ll see what I can do.
Okey, I appreciate your help!
Is it the same bug for everybody?
Please write a message when you figured it out!
Keep up the good work! 🙂
Plugin Author
Josh
(@josh401)
Well, it kinda depends on the browser as well. The mozilla firefox seems to be the most stable when using the tinymce editor.
I’m currently working on better cross-browser compatibility. Which browser are you using?
I will certainly keep you posted. Also, be sure to watch the changelogs on the plugin download page (or in the readme included with the plugin) to see what changes are made with new versions.
I’m using Firefox already. I have tried in Chrome as well but there is the same problem.
Thank you!
I have similar issue but mine is, I want to hide the table borders and I set the border tag to 0 yet the border shows. Any help?
Plugin Author
Josh
(@josh401)
It’s probably theme related. Many themes customize how tables appear in the theme. And using values in tinymce will be overwritten by your theme.
What you can do is wrap your entire table code with a div. Then, give the div a class.
Next, you can target just the table cells with some custom css to style the table.
For example, wrap your table code with <div class="myTable">YOUR TABLE CODE</div>
Then, use some css like this to style it how you like:
.myTable td, .myTable tr {
border:0;
}
Hi Josh,
I’m loving Ultimate tinymce (and your Youtube tutorials, but I too have a problem creating table borders. I follow the instructions as you’ve outlined above, but no border is created. I am able to create background colors for the table cells.
I use Graphene theme, and Firefox 11. I’m on a mac. I’m just beginning to understand and use CSS and HTML but it’s hit and miss. I get confused where to add the code. Thanks!
Hillary
Plugin Author
Josh
(@josh401)
Hi Hillary,
I just looked at my code above. If you have followed along up to that point, try this code instead:
.myTable td, .myTable tr {
border:1 px solid #000;
}
You can adjust the number “1” to make a thicker border. And you can adjust the “#000” to change the color of the border.
Final code should look similar to this:
<div class="myTable">
<table><tr><td>Data Cell</td><td>Another Data Cell</td></tr></table>
</div>
