Skip to main content

Tips and Tricks

Simple introduction to the CSS box model

Padding vs. Margin

Understanding padding and margins is an important concept for most CSS beginners. Mixing them up leads to incorrect usage which can trigger browser bugs and inconsistencies.

What Is Padding and Margin?

Padding is the inner space of an element which can be styled with a background while margin is the outer transparent space of an element. And in between is the elements border.

CSS Properties

  • padding-top: 0px;
  • padding-right: 0px;
  • padding-bottom: 0px;
  • padding-left: 0px;
  • margin-top: 0px;
  • ma...
Read More »

This article requires familiarity with JavaScript and HTML.

Not to worry. If you'd like to share a box with the same html content on 25 pages or more, updating that box would be dreadfully painful. This is why updating a single JavaScript file is a quicker alternative.

Our example will include a simple box having a title (Heading 2) with a paragraph (Paragraph).

First, we'll build our box in html using the HTML widget:

<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In diam tortor, vehicula nec faucibus a,...

Read More »

Some of our technical users have begun migrating their content to Pages so they can leverage the new web publish tools such as versions, save as draft and widgets. Part of migration may include deleting old content.

After you have migrated your existing content and/or re-built/designed a new page the question is "What do I do with my old content?"  For most people this means deleting the content.  Before you delete here are some of the things you should be thinking about.

1. Review the folder contents

Make sure you have reviewed the Folder Contents section on every folder and sub-folder - so you are not accidently deleting content.

2. Verify your migrated content

Test the new web pages and if you centralized...

Read More »

In applicable widgets (blogs, members, folder contents and photos in album) you have sort options including Descending and Ascending.

Descending is defined as newest to oldest
Ascending is defined as oldest to newest

For more information about widgets, check out our wiki documentation.

As with all things web, this has been documented as a web standard.  Visit Wikipedia for more information.

Hope you are enjoying the new widget features and keep the feedback coming!

Read More »

Although the WYSIWYG editor offers you many of the same formatting options as you see in word processing, the underlying code used for publishing for the web is different then the underlying code used for word processing.

For people who are new to web publishing, you need to consider how you add content to a web page.  The biggest mistake people make is to copy directly from a word processing program, like MS Word or email, and paste directly into the web editor.  Initially, the results in the WYSIWYG editor may look good, but what you don't see is that in the HTML you've also copied over the word processing code that can BREAK your web page.

When adding content to the editor there are three ways you can do this:

  1. T...
Read More »

These blogs are meant to help you build and enhance your community’s appearance as well as its public perception using design as your tool.

Let's dive into my favourite aspect of design, colour!

Some people are afraid of colour because they don't know what colours look good together, they have pre-conceived notions that you just don't mix certain colours (and therefore they're left with fewer colours to choose from), they think the only colours out there are the ones from their crayon box when they were a kid.

All colour stems from the three primary colours, Red, Blue and Yellow, but that doesn't mean you're stuck with viberant...

Read More »

These blogs are meant to help you build and enhance your community’s appearance as well as its public perception using design as your tool.

Every company and organization should have a brand identity, in other words, they should have a logo and a colour scheme that compliments it. Here are a few logo designs, let's take a closer look into what these logos are saying about their companies.


   1.      Logo 1 - Bringing IT On

     



Analysis: the typeface looks handwritten and casual, the colours are bright and bold, there is a lot of depth to the logo which gives it a 3-D look.
Verdict: this logo is FUN, FRIENDLY, and CREATIVE.

2.   ...

Read More »

How can you leverage a JavaScript framework to create a more exciting and dynamic community? follow this series to learn how.

Episode 2: Creating your first Modal Box

Basically, a modal box is a window that requires some type of input from the user before they can continue (for example, click here to create a modal box). This can be useful for displaying important information (for example, if a user remains inactive for too long, a warning box will appear on your page warning you that your session will end.), or for entering information (for example, when sending a user a message, a modal box will popup, allowing you to send a message without leaving the...

Read More »

These blogs are meant to help you build and enhance your community’s appearance as well as its public perception using design as your tool.

Did you know that IGLOO provides logo design services? Now you do!


Every company and organization should have a brand identity, in other words, they should have a logo and a colour scheme that compliments it.

Logos come in all styles, shapes and sizes, but in the end it needs to express something that represents your company. This artistic expression doesn't have to be taken literally. Logos can communicate a feeling, mood, objects or an action…just about anything.


There are three main types of...

Read More »

How can you leverage a JavaScript framework to create a more exciting and dynamic community? follow this series to learn how.

Episode 1: Element Selection & Manipulation; Events

The IGLOO platform utilizes Mootools, a JavaCcript framework for a number of system elements (for example, at the bottom of this page, the "Subscribe" and "Email Link" use mootools to create the animation of the form "sliding" down when clicked). In this series, we will create a script that creates a "box" over a page that has html content inside of it.

First, we will go over some of the basic pieces of mootools that we will require to complete this project. For starters, let's learn how to get...

Read More »

Showing 1 - 10 of 44
1 2 3 4 5 »

Viewed 14297 times