Sometimes there is a need to highlight a message or piece of information on your site, these may be quotes extracted from the text or something that you want to visually stand out. There is a double quote icon on your editing screen. If you start a new paragraph and then apply the (double quote) icon to that text it will look similar to this.

Do all crabs thing humans walk sideways?

The style applied will depend on what master template is used on your website, so it will not look precisely like this unless you are using the WordPress TwentyFifteen template.

It is possible to create your own version of this so that it stands out in a bordered panel. If you adopt this approach you can change the colours to suit the branding colours of your site.

This may appear to be a bit technical because almost without exception most of you do not know anything about HTML (HyperText Markup Language). This is additional information that is encoded with the text you see, that tells the browser what to do with it before it is presented to you on a screen. Bear with me as I explain how it works, it is not that difficult to follow. At the bottom of this sequence is a file you can download that already contains the code and you can paste it into a page and see what it does and then play with it.

HTML & CSS

Your editor has two views, one is Visual, the other is Text. 99% of the time you will be looking at the Visual version. If you switch to the Text version, you can still read the text but you will see other information presented like this:

<h1>This is a heading</h1>

That will look like this in the visual view:

This is a heading

The <h1> means start converting the next sequence of characters to the style Heading 1. Then text follows, followed by </h1> which means stop applying the style h1. This is how your browser formats text.

There are many different commands that can be applied, and this is not intended to be a tutorial on html & CSS. I am going to show you how you can do this.

Do all crabs think humans walk sideways?

There are quite a few parameters in here to do this, they are:

Border (style, thickness and colour)
Padding (the area of space around the text)
Margin (the area around the box which keeps a gap between adjacent text)
Font size
Font colour
Font style
width of the box
background colour

It is also true to say I could do many more things to this, but hopefully you will get the idea if you want to add something like this. It is ideally suited if you have a long quote or reference from someone.

Introducing NotePad++

I use a free application when I am editing HTML on the website. I have it open in a separate window. I can edit the text there, and then when I am happy with it paste it into the WordPress TEXT view. Note here if you try to do this in VISUAL mode then it will not work.

You can download NotePad++ from here. It is free, and is a good general purpose editor for this type of thing. Once you have it installed on your computer, then download this file from this website. Border Crab Code. Note this is a text only file, we do not want any additional coding added to it.

Save the file somewhere temporarily and then open NotePad++ and then open the file Border Crab Code.

The code will look similar to this, I have reformatted it for this page to make it a little clearer.

<div style=”border: #336633 ridge 4px; padding: 10px; margin: 10px; background-color: #ccffcc; border-radius: 10px; width: 50%; font-size: 20px; font-style: italic;”>
Do all crabs think humans walk sideways?
</div>

Looking at the first three lines you can see there is something called a division and some styles defined for it. Anything that has a “#” before it means that the next value is a hexadecimal code. That means a single digit can represent a number between 0 and 15 (base 16 is hexadecimal). They can contain 0-9 and A to F. In this context it is how a 24 bit (three byte) number is used to describe a colour. Colours go from white = #FFFFFF to black which is #000000 (I know that techically black and white are not colours!). You can define your own by selecting the symbol with an A with a line underneath on the editing menu. Then choose Custom. This will show you the following image:

colours

If you move your cursor around the box (the version in the editor, not my image) you will see the numbers in the box adjacent to the “#” symbol change. This is the hexadecimal code for the colour you have chosen. So this is a good way to pick colours. However do be aware that the actual colours are subject to optical illusions based on the other colours in use on the page. What you think you have and what you actually have can be two different things.

Going back to the code you will also note values like 10px this means 10 pixels in size, it can define a space, or width of something. Anything in blue in the code above are things you can relatively safely play with.

Have a Play

The best thing to do if you wish to experiment is create a new Page. Which you can do from the menu, and then open it in an editor. Write some text on your page and then switch to TEXT view (from VISUAL view) (top right of the editing window).

Now you have your own private page which cannot be accessed via your website because there is no link going to it.

While in visual mode, paste the text in from Notepad++ then save the page, and view it on screen. If you have done it correctly you will see the red bordered box.

Have a play with the values to see what they do.

W3 Schools

If you found this interesting you may wish to look at the w3Schools website which has a lot of information on relating to HTML and other subjects to an intermediate level. You can find it here: http://www.w3schools.com