Joomla & Formatting Tables in Content

apps

#1

I’d like to have tables in my Content Items. I want the tables be formatted slightly differently than the text of my content items (table paragraphs to have tighter spacing than text). Other than that – all else the same.

I’m using the Simple template from Estime. I’ve played with the CSS & found how to change the font size of the content (upped it to 12 from 11 – geez my eyes are getting old…).

But I cant figure out how to apply a derivative format to tables in the content. I tried (or so I think) creating a style & then applying that style to the table paragraphs in the editor… but it didn’t take.

Any ideas?

Should you be interested (ie, wanna look at the code…):
site: www.skitty.us
user: demo
password: demo

I’ll kill the user/password combo eventually. It’s only fair that I give access if I’m asking questions.

thanks.
-w


#2

skitty,

What editor are you using to edit the content in the back-end of Joomla?

The reason I ask is that the various WYSIWYG editors available have slightly different ways of applying styles to the content (the way they are configured).

Generally speaking, if your editor is configured to make “site styles” available from within the editor, what you are attempting to do should work: If you define a particular class/id properly in the template stylesheet, you should be able to “select” that style from the drop-down select box within the editor and “apply” it.

Alternately, with most of the available editors, you can style a given table’s (or cell’s, or row’s, or column’s, etc.) contents “inline” from within the editor using the editor’s “style” tools.

This works really well for the occasional “tweak”, but is probably not as convenient as the first method if you have a single, or a couple, of standard table styles that you want to use repeatedly throughout the site. :wink:

–rlparker


#3

I do wish to have a commonly used style for tables. I see how the one-off solution works, but I want a style… Too much content, I like css solution.

I tried to create a style in the css & Joomla ignored me… Possibly I didn’t “define a particular class/id properly in the template stylesheet”, but I can not tell.

How can I tell what the heck I’m doing wrong?

(And I’ve just bought: “Beginning Joomla!” by Rahmel & “Joomla! A User’s Guide” by North, but neither seem to address… & they don’t address security in the manner I’d like to understand… Any thoughts on good books/reading areas?)


#4

Editor == TinyMCE


#5

Well, the “cascading” nature of CSS can make getting your style properly defined and referenced a little tricky. The best thing I can suggest for that is to “play computer” through the template’s stylesheet, and experiment a bit to understand how that stylesheet works.

That, and a good CSS reference, should help you get the desired style properly defined, and once you have done that, it should just “show up” in the style “pull down” section or, depending upon how you have defined it, it could just “automagically” apply to all tables within the class that contains your main content section.

You might some more competent help with that on the Joomla! forums, or from the author of your template. I am not that good with that stuff (I usually just muck about with it till I get it to work :wink: ).

There are not that many Joomla! books out yet that I know much about, so I don’t really have a suggestion there… but the Joomla! forums are a great resource, and I have found I can get answers to most questions there pretty regularly.

Another suggestion for “reading” is to Google for Joomla! tutorials … there are many very good ones out there.

–rlparker


#6

“automagically”… he he. Got it.

I’m off to the races.


#7

Thanks for the info - so I gather from your post immediately preceding this one that you have gotten TinyMCE to offer-up the template.css styles in the editor toolbar?

–rlparker


#8

yeah. the styles I added show up in the drop down in the editor, but do nothing when content presented on website. i gotta learn a lot …


#9

you should probably do something like:

.mytableclass p { padding:2px; ... ... ... }
Assign your “.mytableclass” to the table in TinyMCE.

That should then apply your class to the table and only affect the paragraph tags within it.

If you can’t get that to work, please post the relevant css snippets and table html in here and we’ll have a look.

I’m a bit busy to trawl source code, but i’ll gladly have a look if you slap it in here :slight_smile:

Cheers,
Karl

web design, development & seo by DigitalVibe


#10

I’ve made progress, but have a few things I can’t resolve.

(This post is long, but mainly because I’ve included code snippits at the end…)

Here’s where I’m at:

  1. I figured out that part of my problem was copy/pasting tables from MS Word (more on this later)
  2. I also figured out that I wasn’t correctly applying the self-defined classes to the Joomla tables. (I was applying them to the text of a table cell, not the table itself…)
  3. I hand typed a table into Joomla & figured out how to apply self-defined table & cell level classes. These tables are single spaced!
  4. But my cell formatting isn’t working
  5. Plus, I applied the new classes to a table copy/pasted from MS Word. Didn’t change how it looked (even the single spacing didn’t work as it did for the hand-typed/vanilla table). I confirmed the the underlying source had the class reference.

Hrumph. As you already know, there is all sorts of extra formatting in my table copied in from MS Word. Something is buggering the formatting.

My new headache:
a) Big chunk of my content is in MS Word (big chunk of setting up this site is to start to go MSFT-free…)
b) Lots of tables
c) Would be awfully nice to keep the border formatting I already setup. Usually means that cells have dotted bottoms & sometimes sides
d) tables copied over are verbose & not content/presentation divided

Anyone for a glass of wine?

Solving one thing at a time:

Cell formatting –
I created a class for the table cells which setup the border formatting. I can get it applied to my “vanilla” table’s cells (confirmed by looking at source). But somethings not working & the formatting not showing up when the “vanilla” table is seen on the site.

Tables to be pulled in from Word:
I’m certain this is a problem someone has faced before. I’m headed out to search the web for a tool to strip out the “junk”, but if anyone has an idea on how to do this: please let me know!

A million thanks in advance.
-w


Snippit from template CSS:


table.contentpaneopen { /* template class applied to content item text (both intro & main) /
width: 100%;
padding: 0px;
border-collapse: collapse;
border-spacing: 0px;
margin: 0px;
/
font-size: 11px; commented by wendy in order to increase default content font size 2008-01-24 /
font-size: 12px; /
added by wendy in order to increase default content font size 2008-01-24 */
line-height: 1.5em;
}

table.contentpaneopenTBL { /* added by wendy in order to create a style for tables 2008-01-24 /
padding:2px;
line-height: 1.0em; /
added by wendy to make single spaced rows 2008-01-24 /
width: 100%;
padding: 0px;
border-collapse: collapse;
border-spacing: 0px;
border-width: 1px 1px 1px 1px;
border-style: none none none none;
margin: 0px;
font-size: 12px; /
added by wendy in order to increase default content font size 2008-01-24 */
}

table.contentpaneopenTBLcell { /* added by wendy in order to create a style for table cells 2008-01-24 */
border-width: 1px 1px 1px 1px;
border-style: none none dotted dotted;
border-color: black black black black;
}


Source under a “vanilla” table on website:
NOTE - hand-typed table in via Joomla front-end

Happy news: classes are getting applied
Happy news: Table paragraphs/cells are single spaced

Bad news: Cell formatting not working - they have no border formatting


Cell 1,1 Cell 1,2 Cell 1,3
Cell 2,1 Cell 2,2 Cell 2,3

Source under a 2nd table on website:
NOTE - copy/pasted into Joomla from a MS Word '07 doc

Happy news: Template class correctly applied to Tbl
Bad news: Something keeping it from being single spaced

Happy news: Cells are formatted nearly like what I’d like (they have bottom & side borders)


<td style="border-style: none none dotted; border-color: -moz-use-text-color -moz-use-text-color windowtext; border-width: medium medium 1pt; padding: 0in 5.4pt; width: 98pt;"

valign=“top” width=“131”>

1 ½ sticks

<td style="border-style: none none dotted; border-color: -moz-use-text-color -moz-use-text-color windowtext; border-width: medium medium 1pt; padding: 0in 5.4pt; width: 98pt;"

valign=“top” width=“131”>

1 cup

Unsalted butter, melted
Dark Muscovado sugar (lightly packed)

#11

Wendy, i’m off to bed (it’s 3:30am in UK). If someone hasn’t already offered a solution tomorrow, i’ll try to fix something up for you, time permitting of course.

Cheers,
Karl

web design, development & seo by DigitalVibe


#12

Hi Hi. Made progress on a process to migrate my tbls out of MS Word. It’s not glamorous, but it works.

Have not been able to get the cell/border formatting to work.

My turn for some sleep.


#13

:slight_smile: Some sleep and http://www.somacon.com/p141.php have fixed my problems.

Consider this thread closed.

Thanks
-w


#14

Hang in there! I hate to see you wrestling with that; MS Word is evil indeed when cut -n pasting into TinyMCE.

One “ProTip”: If you find yourself having to do that, a good strategy is to immediately select all, and “remove formatting” within TinyMCE before doing anything else … then go back and use the TinyMCE formatting tools/styles to “fix” it. :wink:

–rlparker


#15

I played with that, but it seems to miss some of the “helpful” stuff MSFT puts in there (row & column level formats/styles kept hanging out). I ended up writing a macro to transform my tables & convert to HTML table in text (with my newly defined styles of course!). Then it’s a fast copy/paste into the HTML window of TinyMCE.

Actually goes pretty fast now –


#16

Outstanding! I’m glad to see you have slain the beast! :slight_smile:

–rlparker