How-To Style Thickbox Inline Content Correctly

CSS, jQuery 3 Comments »

ThickBox is a great library extension for jQuery. I use it often for showing messages and other dialogs on a page.

There are 2 things to keep in mind when you want to show inline content (that’s content on the same page/in the same DOM, e.g. in a div with display:none;) using ThickBox:

First of all, ThickBox takes an id of the container that contains the stuff you want to show in the box as an argument like this:?height=300&width=300&inlineId=myOnPageContent…here “myOnPageContent” is the id of the container. However ThickBox does not put the container element itself into the box that pops up!

Consequently you will have to surround the content of the box with another container that you then reference from your stylesheet in order to style the content of the box. Here’s an example:

Contact

...box content here...

This illustrates that “myOnPageContent” is the container ThickBox is looking for and we will use “#contact {}” to reference our elements from CSS.

Another problem is that the ThickBox CSS in thickbox.css already includes definitions for the box content, e.g. at line 9:

#TB_window {
font: 12px Arial, Helvetica, sans-serif;
color: #333333;
}
…and at some other places, so you either have to take this out the thickbox.css file (that’s what i do) or you overrule this with your own stylesheet definitions – watch out for the cascades!

levelmedia in multi-language Typo3 sites

Typo3 1 Comment »

Problem:

  • you have a Typo3 site with several languages
  • you are using the media field in the page setup to show a header image or similar (under “Files:” in the page setup)
  • you are using levelmedia in the typo3 template setup to put this media somewhere on the page
  • the header image (media in general) is not shown in languages other than the default one

Solution:

  • go to the install tool of your Typo3 site
  • search for “pageOverlayFields” under “All Configuration”
  • take out “media” in the list of fields under [FE][pageOverlayFields]

That’s it. Please keep in mind that ALL media now will be taken from the media field of the default language.

Thanks to just2b at TYPO3.net for mentioning the solution.

WP Theme & Icons by N.Design Studio
Entries RSS Comments RSS