Website Posts: Appearance Tricks and Tips

Tips and tricks on making your article, event or post look consistent with other material published on our website 👍

How do I get that blue-dotted border around an image?

When adding the image using the [Add Media] option:

1. Add the image
2. Click on te image and select “Edit” from the popup menu
3. In the Advanced section, enter the word border_1 (border underscore 1) into the CCS Class field.
4. Save.

How do I get an image to expand when it’s clicked?

(Example: click any image in this post)

Set the image’s option “Link to” to “media file”.

How do I use the “Blockquote” feature?

When making a quotation or needing to draw the page visitor’s attention to something, the Brotherton Blockquote feature is a handy visual tool.

This is an advanced feature and will require a tiny bit of coding.

You will need:

1. THREE pieces of information:
   1. A Heading/Title.
   2. A Signature.
   3. The brief body text.
2. You’ll be using a shortcode (see documentation here) and you’ll create the blockquote like this:

   [FPARC_Brotherton heading="The Heading" signature="The Signature"]] This is the content of your blockquote [[/FPARC_Brotherton]

When written in this way, when you preview or view your post, the shortcode will convert the information into the visual feature you see in the example image.

Pro Tip: Keep the body text brief.

All done.

Adding the “Address and Map” Footer

Although there are plenty of ways a visitor can find out where our club is located, it’s often a good idea to put this information “in front of their faces”. This is especially true for the casual visitor whose eye was caught by one of our event posts, and who may be further encouraged to come along to visit us if he sees our location.

You can easily append the Address and Map Footer to your post (event, article etc) by placing the following code (usually at the end of your post, under a Heading 2 level title):

[fparc_findus]

Thats:

• [ <- open square bracket
• fparc_findus <- the command
• ] <- close square bracket

When your post is viewed, WordPress will substitute the command in the square brackets for the associated code.