Games Achievements My Kong Sign In

CSS Lego Library

Headings

Pick a heading style and use the corresponding heading tag to use when building a page. This allows for consistent generated styles without overhead.

Heading 1

<h1>Heading 3</h1>

Play: Heading 1

<h1><strong>Play:</strong> Heading 1</h1>

Heading 2

<h2>Heading 3</h2>

Heading 3

<h3>Heading 3</h3>

Heading 4

<h4>Heading 3</h4>
Heading 5
<h5>Heading 3</h5>
Heading 6
<h6>Heading 3</h6>

High Contrast class added to any heading will make the text #000

Heading 3

<h1 class="highcontrast">Heading 3</h1>

h1-6 can also be use as classes on any heading tag

Heading 5 styles on an H3 tag

<h3 class="h5">Heading 5 styles on an H3 tag</h3>

h1-6 are different colors in when they fall in a dark background container with the class invert.

Heading 1

<h1>Heading 3</h1>

Heading 2

<h2>Heading 3</h2>

Heading 3

<h3>Heading 3</h3>

Heading 4

<h4>Heading 3</h4>
Heading 5
<h5>Heading 3</h5>
Heading 6
<h6>Heading 3</h6>

Links

There are four basic link styles; default (no class required), lowlight, midlight, and highlight. Link styles may be used to style any leaf node.

Default

Default link style

<a href="http://www.kongregate.com/">Default link style</a>

Lowlight

Lowlight link style

<a class="lowlight" href="http://www.kongregate.com/">Lowlight link style</a>

Midlight

Midlight link style

<a class="midlight" href="http://www.kongregate.com/">Midlight link style</a>

Highlight

Highlight link style

<a class="highlight" href="http://www.kongregate.com/">Highlight link style</a>

The highlight class makes any text or link bold. In this case, the default link is red, so highlight makes a red, bold link.

Text Treatments

Several text-treatments exist to allow you to style text inline. They should be used on leaf nodes rather than containers. They can be combined with headings to achieve many colors and sizes without adding overhead.

Default

This paragraph is the default style.

<p>This paragraph is the default style.</p>

Hinted Value

This paragraph has the hinted_value class applied.

<p class="hinted_value">This paragraph has the hinted_value class applied.</p>

Badge Name

This class should only be used in combination with the invert class.

This paragraph has the badge_name class applied.

<p class="invert badge_name">This paragraph has the badge_name class applied.</p>

Badges

This class should only be used in combination with the invert class.

This paragraph has the badges class applied.

<p class="invert badges">This paragraph has the badges class applied.</p>

Sort

This class should only be used in combination with the invert class.

This paragraph has the sort class applied.

<p class="invert sort">This paragraph has the sort class applied.</p>

Developer

This paragraph has the developer class applied.

<p class="developer">This paragraph has the developer class applied.</p>

Menu

This class should only be used in combination with the invert class.

This paragraph has the menu class applied.

<p class="invert menu">This paragraph has the menu class applied.</p>

Pod

This paragraph has the pod class applied.

<p class="pod">This paragraph has the pod class applied.</p>

High Contrast Inside Invert

The highcontrast class makes text white when it is inside a container with the invert class applied.

This paragraph has the invert class applied. This span has the class highcontrast applied.

<p class="invert">This paragraph has the invert class applied. <span class="highcontrast">This span has the class highcontrast applied</span>.</p>

Game feature

This paragraph has the game_feature class applied.

<p class="invert game_feature">This paragraph has the game_feature class applied. </p>

Media Blocks

For Media Blocks, all you need to do is add a class of media to the outer container, class of img to the image container, and class of bd to the content container.

Screenshot

HTML Example

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<div class="media">
  <img class="img" src="http://kongregate.com/game_icons/0007/6745/thumb_chat.jpg" />
  <div class="bd">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
      commodo ligula eget dolor. Cum sociis natoque penatibus et magnis dis
      parturient montes, nascetur ridiculus mus.
  </div>
</div>

For media images that need to be floated right, use the imgExt class instead of the img class.

Screenshot

HTML Example

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<div class="media">
  <img class="img" src="http://kongregate.com/game_icons/0007/6745/thumb_chat.jpg" />
  <div class="bd">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
      commodo ligula eget dolor. Cum sociis natoque penatibus et magnis dis
      parturient montes, nascetur ridiculus mus.
  </div>
</div>

These same classes can also be used if you want to place an image to the left and the right. The images will need to be listed before the bd content in the source.

Screenshot

HTML Example

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<div class="media">
          <img class="img" src="/game_icons/0007/6745/thumb_chat.jpg" />
          <img class="imgExt" src="/assets/files/0000/1379/Picture_4.png" />

          <div class="bd">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
             Cum sociis natoque penatibus et magnis dis parturient montes, nascetur 
             ridiculus mus.
          </div>
      </div>

It doesn't matter what content or tags are within the bd container

Screenshot

HTML Example

Welcome to Kongregate, Theresa

2223 points | 5 friends online | My Messages (2)

<div class="media bluepod">
  <img" class="img src="http://kongregate.com/user_avatars/0000/0091/tc_bot.png" />
  <div class="bd">
    <h3>Welcome to Kongregate, Theresa</h3>
    <p>2223 points <span class="pipe">|<span> 
       5 friends online <span class="pipe">|<span> 
       My Messages (2) </p>
  </div>
</div>

Media blocks can also be nested.

Screenshot

HTML Example

Do you have what it takes to be the best firefighter ever? Fight the onslaught of fire in 20+ action-packed level.

Score 1,000 points in Turnabalt mode

<div class="media">

        <img class="img" src="http://kongregate.com/game_icons/0016/9956/infernothumb.jpg" />
        <div class="bd">
          <p>Do you have what it takes to be the best firefighter ever?
      Fight the onslaught of fire in 20+ action-packed level.</p>

          <div class="media">
            <img class="img" src="/images/presentation/challenge_incomplete.gif" />
            <p class="bd">Score 1,000 points in Turnabalt mode</p>

          </div>
        </div>
      </div>

Ads

For ads that run on the site, you'll want to add the class ad which will center the ad by default. From there, you'll add one of the following, depending on which ad your running and where it should be located within the grid it sits in:

Custom 336x60 Ad

<div class="ad custom_ad">
   <%= render_ad("kong_home_af_336x60") %>
</div>

This gives an ad a width of 336 pixels.

Leaderboard 728x90 Ad

<div class="ad leaderboard">
   <%= render_banner_ad 'kong_gb_af_728x90' %>
</div>

This gives an ad a width of 728 pixels.

Medrec 300x250 Ad

<div class="ad medrec">
   <%= render_square_ad('kong_gb_af_300x250') %>
</div>

This gives an ad a width of 300 pixels.

Skyscraper 160x600 Ad

<div class="ad skyscraper">
   <%= render_skyscraper_ad "kong_gb_af_160x600" %>
</div>

This gives an ad a width of 160 pixels.

Alignment

As mentioned before, the default margin for the ad will be centered. However, you can alter this depending on the alignment you want. The following classes can be added to adjust the alignment to your needs:

Here is an example of an ad centered within its containing space. No extra classes needed.

Screenshot

HTML Example

<div class="ad medrec">
   <%= render_banner_ad 'kong_devcenter_af_300x250' %>
</div>

For Left Alignment

Add a class of adLeft to make the ad left aligned within the containing space.

Screenshot

HTML Example

<div class="ad medrec adLeft">
   <%= render_banner_ad 'kong_collabs_af_300x250' %>
</div>

This gives an ad a margin-left of 0 pixels

For Right Alignment

Add a class of adRight to make the ad left aligned within the containing space.

Screenshot

HTML Example

<div class="ad medrec adRight">
   <%= render_banner_ad 'kong_labs_af_300x250' %>
</div>

This gives an ad a margin-right of 0 pixels

Images

Select a border style and use the corresponding class in the HTML to apply the style. All images have no borders by default (even when linked).

A thick border around an image gets a class of imgHighlight on the img tag.

Thick border

<img src="http://cdn2.kongregate.com/game_icons/0017/0516/bta__thumb_100x75.jpg"
  class="imgHighlight" />
A thin border around an image gets a class of imgSimple on the img tag.

Thin border

<img src="http://cdn1.kongregate.com/user_avatars/0000/0003/gregg2.png?1358-op"
  class="imgSimple" />
A thick border around an image with content and rounded corners on the bottom gets a class of imgContent on the container wrapping the img tag. No class is needed for the img tag.

Thick border with content and rounded corners on bottom

123,456 plays 
<div class="imgContent">
  <img src="http://cdn1.kongregate.com/game_icons/0017/0516/bta__thumb_100x75.jpg" />
  <a href="path/to/game">123,456 plays</a>
</div>

Spacing

Most elements will have the correct spacing by default, so in most cases, spacing classes will be needed. However, if you need to tweak elements by using margin or padding, use the following classes rather than adding to the CSS file. Also, please use these to tweak existing elements rather than use these classes when building legos.

<type> <location> <size>

        Type:
        p  padding    Space on the inside of the element
        m  margin     Space on the outside of the element

        Location:
        a  all        Adds spacing on all sides of the element
        t  top        Adds spacing to the top of the element
        r  right      Adds spacing to the right of the element
        b  bottom     Adds spacing to the bottom of the element
        l  left       Adds spacing to the left of the element
        h  horizontal Adds spacing to the right and left of the element
        v  vertical   Adds spacing to the top and bottom the element

        Size:
        l  large      Adds 20 pixels of space
        m  medium     Adds 10 pixels of space
        s  small      Adds 5 pixels of space
        n  none       Sets any existing space to 0

This paragraph has a 20 pixel padding on all sides. 

<p class="pal">
  This paragraph has a 20 pixel padding on all sides.
</p>

Dividers

All dividers are <hr /> elements. There are two types of dividers, dashed and diagonal-striped. The latter varies in color depending on where it is placed. The code is the same, simply place the divider where you want it and the color will be selected automatically.

Dashed Line

The small, dashed line border that is seen most often at the bottom of columns or game category lists will have the class divider.

Screenshot

HTML Example

<hr class="divider" />

Diagonal Stripes

The diagonally–striped border against a lighter colored gray background that is seen most often as the divider between the primary and secondary will have the class page_divider.

Screenshot

HTML Example

<hr class="page_divider" />

(on Dark Gray)

The diagonally–striped border against a dark gray background that is seen most often within the badges pod on a user's profile page.

Screenshot

HTML Example

<hr class="page_divider" />

(on Black)

The diagonally–striped border against a black background that is seen most often within the badges pod on a user's profile page.

Screenshot

HTML Example

<hr class="page_divider" />

Note: Although you are using the same class for all of the "Diagonal Stripes" examples above, remember that there is a background class already applied to the section. So, the color of the divider varies by background color to provde sufficient contrast.

Containers

All containers should include a class of cntr, along with any container styling class, as listed below. Divs with classes of hd (header), bd (body), ft (footer) can also be added within the container for layout.

Header

Body Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Footer

<div class="cntr cntrBasic">
  <div class="hd">
    <p>Header</p>
  </div>
  <div class="bd">
    <p>Body</p>
  </div>
  <div class="ft">
    <p>Footer</p>
  </div>
</div>

Adding class of .cntrBasic will give a container a light gray background color (#DDDDDD) and a padding of 8px.

HTML example

Content here

<div class="cntr cntrBasic">
  <div class="bd">
    <p>Content here</p>
  </div>  
</div>

Adding class of .cntrHeader will give a container a dark gray background color (#2D2D2D) and a top/bottom padding of 4px, a left/right padding of 8px, and rounded corners of 4px radius.

HTML example

Content here

<div class="cntr cntrHeader invert">
  <div class="bd">
    <p>Content here</p>
  </div>  
</div>

You can also add the cntrBasic and cntrHeader classes to head and body of the containers.

HTML example

Content here

Content here

<div class="cntr">
  <div class="hd cntrHeader invert">
    <p>Content here</p>
  </div>
  <div class="bd cntrBasic">
    <p>Content here</p>
  </div>  
</div>

Adding class of .cntrWrapH will give a container a dark gray background color (#2D2D2D), a padding of 10px, and rounded corners of 4px radius.

HTML example

Content here

<div class="cntr cntrWrapH invert">
  <div class="bd">
    <p>Content here</p>
  </div>  
</div>

Adding class of .cntrWrapL will give a container a white background color (#FFFFFF) and a top/bottom padding of 15px, a left/right padding of 20px, and rounded corners of 13px radius.

HTML example

Content here

<div class="cntr cntrWrapL">
  <div class="bd">
    <p>Content here</p>
  </div>  
</div>

Adding class of .cntrSmall will give a container a light gray background color (#EFEFEF) and a top/bottom padding of 3px and a left/right padding of 8px.

HTML example

Content here

<div class="cntr cntrSmall">
  <div class="bd">
    <p>Content here</p>
  </div>  
</div>

Adding class of cntrListItem will give a container a background color of white (#FFFFFF). It will also apply a yellow background hover state.

Adding class of cntrStyleTall on top of that will make the container have a height of 96px, with a top/bottom padding of 18px and left/right padding of 16px.

HTML example

Content here

<div class="
  cntr cntrListItem cntrStyleTall">
  <div class="bd">
    <p>Content here</p>
  </div>  
</div>

Adding class of cntrListItem will give a container a background color of white (#FFFFFF). It will also apply a yellow background hover state.

Adding class of cntrStyleShort on top of that will make the container have a height of 45px, with padding of 10px

HTML example

Content here

<div class="
  cntr cntrListItem cntrStyleShort">
  <div class="bd">
    <p>Content here</p>
  </div>  
</div>

Adding class of .cntrStyleDone will give a container a light gray background color (#EFEFEF).

HTML example

Content here

<div class="cntr cntrListItem 
  cntrStyleShort cntrStyleDone">
  <div class="bd">
    <p>Content here</p>
  </div>  
</div>

Adding a class of cntrHighlight will give a container a background color of yellow (#FFFFC9), border lines on the top and bottom, and a padding of 8px.

HTML example

Content here

<div class="cntr cntrHighlight">
  <div class="bd">
    <p>Content here</p>
  </div>  
</div>

Adding class of cntrMidlight will give a container a background color of light blue (#EBF5FF), with a top/bottom padding of 16px and left/right padding of 8px.

HTML example

Content here

<div class="cntr cntrMidlight">
  <div class="bd">
    <p>Content here</p>
  </div>  
</div>

Adding a class of cntrLowlight will give a container a background color of light gray (#F2F2F2), border lines on the top and bottom, and a padding of 8px.

HTML example

Content here

<div class="cntr cntrLowlight">
  <div class="bd">
    <p>Content here</p>
  </div>  
</div>

Adding class of cntrToggle will give a container a background color of lightgray (#F5F5F5) and padding of 8px.

HTML example

Content here

<div class="cntr cntrToggle">
  <div class="bd">
    <p>Content here</p>
  </div>  
</div>
Developers Players Support YouTube TikTok X (Twitter) LinkedIn
Join the conversation Join Discord
Terms Privacy Code of Conduct
© 2024 Kongregate