Skip to main content

Tips & Recipes

These features available on All Plans

 

Tips for CSS Novices

  • Commit to learning CSS. Learning CSS is a lot like learning chess: It can take a lifetime to master, but you can learn the basic rules and how to move the pieces and immediately enjoy playing. With CSS, you can learn the basics quickly and begin to make a difference in your campaign. You don’t need to be a master to do most things in ShortStack! Try our Learning CSS article.

  • Use live preview and CSS Editor like a sandbox. When you type into the CSS Editor, the live preview is updated within seconds of typing. Create test campaigns and play around with CSS. You have nothing to lose and you can literally see the effects of your code as you type.

  • Learn to use Google Chrome’s Developer Tools (or you can use the Firebug plugin for FireFox).

General CSS Tips

To Target a Specific Element, Use an ID

Because there are so many ways to target an element (by HTML tag, class, ID, etc.), you are often faced with the decision of what selector to use for a rule. When in doubt, use an ID (or start with one). Using only a class or HTML element might have the desired effect initially, but it can affect other elements that you’re not even aware of.

Let’s say you’ve added an H2 element inside a Plain Text Widget and you want to add 20 pixels of top padding. At first, you might do this:

h2 { padding-top:20px; }

Hey, it works, right? However, the above selector modifies every h2 tag inside your campaign. If you add more widgets to your campaign, you could have problems. A better way is to do this:

#text h2 { padding-top:20px; }

Now, you’ve only targeted the H2 tags inside your Plain Text Widget. Any H2 elements outside the Plain Text Widget won’t be affected.

Use Classes to Make General changes

A perfect example of this is when you want to get rid of the titles that ShortStack puts above every widget when you have not applied a theme. By using a class selector that is common to all widgets, we can easily and quickly hide all the titles:

.ss_box_header { display:none; }

 

Validate Your CSS!

There is a Validate button available in the CSS Editor. Use it! When you experience trouble, start by validating your CSS.

How to Size Images

Given that our Campaign Builder is fully responsive, you'll want to make sure you use the Image Widget whenever possible when you want to show image(s) on your campaign. However, if you do decide to use custom HTML to display images, you'll usually want to use CSS to size and position the images.

When you size images (or, really, anything), you'll usually want to use percentage values for widths instead of pixel values. When you use a specific pixel value for widths of elements, you're removing the ability for that element to be responsive with the rest of your campaign. This can have negative effects when viewed on mobile devices such as phones and smaller tablets.

Changing Inherited Font Properties

Thanks to inheritance, you can change the font family for your campaign using the following:

#wrapper, #wrapper p { font-family: georgia, serif; }

For best results, stick to web-safe fonts, specify alternatives, and end with either serif or sans-serif.

Make Long Sections Scrollable

If you have a long block of text (e.g., contest instructions, terms, etc.), you can limit the amount of space consumed by giving the element a specific height and setting overflow to auto (which will cause scrollbars to appear). This example sets a fixed height for the first Rich Text Widget in a campaign:

#rich_text {
  height:200px;
  overflow:auto;
}

 

Widget Positioning

Position Two Widgets Side-by-Side

All of our built-in themes include pre-defined CSS classes called left and right. Edit a widget, click Styling on the left menu, then type left or right, as appropriate, into the Extra CSS Classes field. Be sure you’ve applied a theme or this won’t work.

Positioning one widget inside another

A more complicated layout involves visually nesting one widget inside another. We’ll do this using absolute positioning.

The trick with absolute positioning is to set up the proper reference point. An absolute positioned item uses the closest positioned ancestor as its origin for the top and left properties. Because the widgets are all siblings, the only built-in positioned ancestor we have is the wrapper DIV, that is, the top of the campaign. To absolutely position a widget using this reference point, determine the CSS ID for the widget you want to position (this is shown in the Edit Widgets Panel of the Campaign Builder), then use the following CSS and adjust the values to suit your needs:

#image2 /* <-- Substitute the appropriate widget ID here */
{
  height: 100px; /* Height of widget */
  width: 200px; /* Width of widget */
  position: absolute;
  top: 35px; /* Vertical distance from top of campaign */
  left: 10px; /* Horizontal distance from left edge of campaign */
}

 

RTL Languages

For languages that are read right to left, you can use this CSS snippet to change the direction of your text:

/* SNIPPET RTL Language */
body, #wrapper, label, #wrapper p {
  direction: rtl;
  text-align: right;
}
  .horizontal_container .field_block {
  float: right;
  clear: none;
}
  .horizontal_container .field_block.first_child {
  margin-left: 3%;
}
/* END SNIPPET */

 

Using Google Web Fonts

Google Web Fonts is an easy-to-use, free web service provided by Google for embedding non-standard fonts into a web page. For more information, see About Google Web Fonts.

How to Add Google Web Fonts to Your Campaign

  1. Go to Google Web Fonts.

  2. Select the fonts you want to use and add them to your collection by clicking the red + icon in the top right of each font's display area.

    Screen_Shot_2018-09-04_at_1.42.11_PM.png

  3. When you've made all your choices, click on the bar in the bottom-right of the screen.

    Screen_Shot_2018-09-04_at_1.43.51_PM.png

  4. A panel will pop-up with all the code you need to use the fonts. You'll need to copy the Standard code under the Embed Font section.

    Screen_Shot_2018-09-04_at_1.44.49_PM.png

  5. You'll need to paste this code into a new Code Widget in your campaign. In the Placement section, select before </head>. Click the blue Save & Exit button when you're finished.

    Screen_Shot_2018-09-04_at_1.54.10_PM.png

  6. The Specify in CSS section of the Google Web Fonts instructions shows the font-family declaration you’ll need for your CSS (see below).

Using the New Fonts in Your Campaign

Open the CSS Editor by clicking the CSS link in the top-right corner of the Style Panel.

CSS.png

Add the font-family declaration to the appropriate CSS selector (see Learning CSS if you don’t know what this means). For example, to change the default font for the entire campaign to Kosugi Maru (assuming you chose that from Google Web Fonts), you'd try adding this to your custom CSS:

#wrapper, #wrapper p {
  font-family: "Kosugi Maru", sans-serif;
}

This code will automatically use the Kosugi Maru font, and in some out-of-the-ordinary circumstances where the font isn't able to load, it will load a sans-serif font instead. 

ShortStack Blog Technical Tips

Subscribe to ShortStack's blog for regular, relevant ways to style your campaigns with CSS.

 

 

Was this article helpful?