Thanks jcisio, Katou & codexmas; great module.
I use some custom css for the display of the terms on one my sites and wondered if you might consider a way to integrate it into your module.
I worked out a way to display the taxonomy checkboxes in columns on node edit pages and I thought there may be a way to build an admin interface for it. The key elements would be the taxonomy id and how may columns or column width the user wanted (cols: width || 1: 100%, 2: 42%, 3: 26%, 4: 18%).

For example for vocab ID 6 I use this to create 2 columns:

.taxonomy-super-select-checkboxes div[id^=edit-taxonomy-6].form-item label.option {width:42%; margin-left:3.5%; text-indent:-24px}
div[id^=edit-taxonomy-6].form-item:nth-of-type(2n+2) label.option {clear:left;}

The first declaration sets a width and formatting that creates two columns.
The second, clears the float after every 2nd checkbox label.
I don't need both statements, either one will work but both cover all the bases.

3 columns would be:

.taxonomy-super-select-checkboxes div[id^=edit-taxonomy-6].form-item label.option {width:26%; margin-left:3.5%; text-indent:-24px}
div[id^=edit-taxonomy-6].form-item:nth-of-type(3n+2) label.option {clear:left;}

Here's all the css together with the 3 col option commented out and a 1 col option (vocab ID 11) that displays on the same page:

/* taxonomy-super-select taxonomy terms
---------------------------------------------------- */
.taxonomy-super-select-checkboxes .description {clear:left;}

/*put check boxes in 3 columns
.taxonomy-super-select-checkboxes div[id^=edit-taxonomy-6].form-item label.option {width:26%; margin-left:3.5%; text-indent:-24px}
div[id^=edit-taxonomy-6].form-item:nth-of-type(3n+2) label.option {clear:left;}
*/
/*or 2 columns*/
.taxonomy-super-select-checkboxes div[id^=edit-taxonomy-6].form-item label.option {width:42%; margin-left:3.5%; text-indent:-24px}
div[id^=edit-taxonomy-6].form-item:nth-of-type(3n+2) label.option {clear:none;}

/*set check boxes one per row*/
.taxonomy-super-select-checkboxes div[id^=edit-taxonomy-11].form-item label.option {clear:left;}

Screenshots with more code here: http://pages.uoregon.edu/vid/2011/01/21/put-taxonomy-super-select-check-boxes-into-1-2-or-3-columns/
The theme I used is a customized Newsflash theme but I've tested it in Garland too.

CommentFileSizeAuthor
#1 tss-styling.png63.52 KBjcisio
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

jcisio’s picture

Version: 6.x-1.3 » 6.x-1.x-dev
Status: Active » Needs work
FileSize
63.52 KB

Hello _vid,

Thanks for sharing this. However IMO we should put those codes in the documentation page for ones who want to customize their layout, as the numbers (42%, 26%, 18%) are quite personal feels and won't fit all, even you've tested on two themes. I just don't want to bloat this module by giving too much options, especially all the CSS stuffs given that all elements already have a good id/class.

I customize my style, too, and with some JS also. I'm sharing it here. It's in Vietnamese.

The documentation page is at http://drupal.org/node/191954

_vid’s picture

Hi jcisio,
Thanks for the feedback.
I agree that there are good id/classes for most elements. What you think about adding one more? A div container surrounding the check boxes in each vocab? ex:

<div class="edit-taxonomy-6">...</div>

I'd be happy to post my code to the documentation page. Would you prefer I post them to a new child page: 'Code samples' or just as a comment: 'usage example'?

BTW I like the term highlighting in your attached example. I'm doing something similar.
I posted it here: added-a-new-tool-for-selecting-taxonomy-terms.

jcisio’s picture

There is already a div at the outer level <div id="taxonomy-6-container">...</div>. While I'm opening with class and id, I'm quite against adding new DIVs, as it can break current customized CSS. Tell me more if it's absolutely necessary, or you can do with the current markup, but more complex CSS selector.

About the documentation, edit the current page! When we have enough material, we'll move them to seperate pages.

rhymeswithcamera’s picture

+1 for adding to the documentation. Thanks _vid for posting this. I was looking for an alternative to Better Select, and these CSS snippets work like a charm. Thanks again!

_vid’s picture

OK, I've added the documentation.
I'd prefer to include the screenshots but it sounds like that's discouraged. Instead I just linked to my post with the screenshots included; which seems less appropriate. I'll leave that up to you. We can pull that link if you want.
Feel free to make edits.

Vid

jcisio’s picture

Component: Code » Documentation
Status: Needs work » Fixed

Thanks _vid. Marking this as fixed and leave the documentation evolute.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.