Styling Squares

From Support

Jump to: navigation, search

Before using the controls on this page, please read Putting Squares on your Site to see how to actually load the Squares onto your pages.

Note: Styling functions must be placed before the Squares.show_squares(); function.

Contents

Squares, meet Style

You can apply the following types of CSS styling to Squares:

  • Layout styles:
    • Spacing between Squares:
      • Horizontal
      • Vertical
    • Padding around the block of Squares
  • Borders around Squares
  • Background colour
  • GS Badge Style:
    • Positioning:
      • Edge position
      • Edge alignment
    • Badge Type
  • Font styles:
    • Font family
    • Font weight
    • Text decoration
    • Colour
    • Size

Layout

Square Spacing

The spacing between squares can be adjusted using the function 

Squares.set_spacing(horizontal, vertical);

where horizontal and vertical are the horizontal and vertical values for the spacing in between squares.

For example, to have a 10px spacing between squares in both directions, the code would look like this: 

Squares.set_spacing(10, 10);

To leave either value for spacing at it's default value, use the value -1, so for example if you have a set of squares in a page with a specific spacing, and then for a second set of squares you only want to alter the horizontal value to, say, 20px, the second time round you would use the script: 

Squares.set_spacing(20,-1);

and the vertical spacing value would remain unchanged.

Square block padding

The padding relates to the blank border around the block of squares. This is fully customisable along each edge of the block. To use this feature, use the code: 

Squares.set_padding({ [all:], [horizontal:], [vertical:], [top:], [bottom:], [left:], [right:] });

This may look a bit confusing, but it's as easy as pie. Honest.

The values inside the curly braces {} are all completely optional.

So for example to set the padding on all edges to 3px, the code is: 

Squares.set_padding({all:3});

To set the values for the left and right edges to 10px, and for the top and bottom edges to 5px, say, the code would be: 

Squares.set_padding({horizontal:10, vertical:5});

And obviously to set different values for all the edges, you could use: 

Squares.set_padding({top:10,bottom:20,left:5,right:3});

The order in which the values are applied is as follows: 

1: all
2: horizontal/vertical
3: top/bottom/left/right

So a variety of combinations can be used. For example, if I want the padding on all edges to be 5px, except for the top, which I want to be 10px, I would use: 

Squares.set_padding({all:5, top:10});

Alternatively you could use a more concise and more CSS-like code structure using a simple string. This string can take any of the following formats: 

Squares.set_padding("[all]");
Squares.set_padding("[vertical] [horizontal]");
Squares.set_padding("[top] [right] [bottom] [left]");

Where the value in square brackets [] takes the appropriate value. For example to set horizontal padding to 10px and vertical padding to 5px, this code can be used, which is more efficient than the previous examples: 

Squares.set_padding("5 10");

Note: For scripting reasons, unlike CSS, the values must just be numbers of pixels, rather than percentages or point values. If a format other than this is used, this will result in script error and/or invalid HTML. Similarly, the letters "px" do NOT need to be placed after the values. Again this can cause errors.

Border

Borders can be added to the Square images using the following function: 

Squares.set_border(thickness,"color","style");

where thickness is an integer value representing how many pixels thick the border is, color is a color hex (like #ffffff) or literal value (like "green") and style is the style of border. The options for style can be any of the border styles available in CSS:

  • solid
  • dotted
  • dashed
  • double
  • groove
  • ridge
  • inset
  • outset

To leave any of the parameters at its default value, use the values as follows: 

thickness: -1
color: ""
style: ""

Note: The values for color and style must be supplied with the double (or single) quotes, like this: "#08083F"

Background

This function sets the background style of the frame in which Squares are loaded. This is particularly useful if you have a dark-themed website, and wish to include squares on a dark colored background. 

Squares.set_bg_col("color");

where color is a color hex like #000000 or a color literal like "green".

Font

Documentation for fonts coming soon.

GoSquared Badge

Positioning

Badge Type

There are a variety of badges that we offer, and we're always happy to work on more, or, if you have made one yourself, to include yours so everyone else can use it.

If your site is predominantly light coloured, with white background, we suggest using a GoSquared Web Badge with white background.

We recommend using badges with the jpg filetype as these work in all browsers. Badges with png, and that have transparency may not work correctly in Internet Explorer 6. However, if any of your users are currently using Internet Explorer 6, please inform them that this browser is tragically bad, and recommend that they use any other browser in existence, as long as it is not Internet Explorer 6.

GoSquared Web Badges are designed to help you sell more Squares on your Site, so display them as prominently as you wish.

Retrieved from "http://www.gosquared.com/support/index.php/Styling_Squares"
Personal tools