How CSS works within “Like it? Tweet it”

We encourage everyone to customize their installation of Like it? Tweet it!, and CSS styling is a big part of that. However, since part of the script is inside a frame, there’s some things worth noting about the CSS if you get confused.

The CSS is split into two different parts: The outside-frame styles and the inside-frame styles.

The former are added directly to the page where the script is inserted. This defines the placement and size of the tweet box on the page, since it has control over the container on the page in which the frame is. It also defines the close button, since that is overlaid on top of the frame, because you can’t close a frame from inside a frame. If you have configured your script to use a popup window, this is irrelevant. You can take a look at the default outside-frame CSS file.

The inside-frame styles define everything else related to the tweet box and how it looks, so this is where the majority of your styles will probably be placed. You can take a look at the default inside-frame CSS rules and the corresponding HTML by looking directly at the source of the tweet box frame.

To add styles to the outside-frame styles, simply put some overlapping CSS in the <head> section of your page in any way, as long as you place it after the Like it? Tweet it! script element, since this is also where the default outside-frame styles are placed.

To add styles to the inside-frame styles, please link to a CSS file using the cssFile setting as outlined in the Configuration section.

If you ever experience issues, please ask around in the forum.