Small Snap! Logo Snap! Websites

Work in progress
Snap! C++

Incredible Websites for Incredible People

CKeditor

CKeditor, the text editor for Internet

Introduction

(Small Snap! Logo) Snap! uses the CKeditor as its WYSIWYG editor. It allows you to create posts that are formatted as in your Word processor.

This page helps you understand and makes full use of the widgets available in your editor.

Adding a space between an Image and text

When adding an image with a Left or Right alignment, the image is added along your paragraph text. This means it may touch your text or be really close to it.

There are two solutions to fix this problem.

CSS Margin (Harder to learn, much faster to run)

For people who are not familiar with HTML and CSS, this solution is a little harder. However, it means loading just and only an extra 40 characters or so, which means it will run faster than the other solution proposed here.

Steps to implement the image margin:

  1. Edit the page to correct.
  2. Right-click on the image to fix and select Image Properties1.
  3. Once the image window is loaded, click on the Advanced tab.
  4. Now you see the Style text field, enter the CSS code as shown below.
  5. Click on OK.
  6. Save your changes by saving the page.

The CSS code includes margins. The margins will vary depending on whether you want to show the image on the left side or the right side. Note that with a list in your text, we strongly suggest that you place the image on the right side as some browser do not properly indent lists when an image is on their left.

The code we use for an image on the right side is like this:

   margin-left: 10px; margin-bottom: 10px;

The 10px means 10 pixels. You may make this smaller or larger. For images pushed to the left side, the margin-left becomes margin-right.

Why not use padding?

At times, people ask why did we choose margin rather than padding? Simple! When you want to add a nice border, you also use a style and if you have a padding, the border will appear away from your image. To add a nice border with the style feature, use this code:

   border: 1px solid black;

CSS accepts colors with the hash character as well. Black is represented as all zeroes: #000000. The first two digits represent red, the two middle ones represent green and the last two represent blue.

It works in the editor, but once I save it looks like it has no effect?

Try editing again, and make sure that the Input format you selected allows all HTML tags.

When you use a strong Input format, Snap! removes all the style references and thus your margin specification will be removed before display.

Can I use the same technique to push the image away from the edge?

Absolutely! The margin-left and margin-right can be used to push the image from the edge it is shown against. Since margins can also be negative, it is possible to push them in the page margins. You have to be careful with that capability though. And some browsers (IE 6.x and older) are likely to crop those images to the page (it will depend on your theme.)

Image Margin (edit the source image)

Although we do not recommend this solution, some people find it easier. The idea is very simple. You first edit your image and add some edges within the image. If you use a theme with a plain color background, then you can simply fill the added edges with that color (i.e. we would use white for our website.) If your background has gradients or an image, you want to use transparent edges.

The edges will be of the size you want them to be to push the text away from the actual image. You should add an edge at the bottom and on the left or right sides as required.

Save and reload the image to your website page. Don't forget to save the page.

One obvious drawback with this solution is that the image generally becomes much bigger. It will add more than the 40 bytes of the CSS Margin solution.

  • 1. You may also click on the image with the left mouse button and then click on the Image icon in the toolbar.