- #WORD ADD BOX AROUND TEXT HOW TO#
- #WORD ADD BOX AROUND TEXT CODE#
- #WORD ADD BOX AROUND TEXT DOWNLOAD#
Download this file using an ftp program, make a copy of it and open the original with a text editor. To set up a quick tag for the text box styles outlined above, you need to change the quicktags.js file in the wp-includes/js folder. Note Lorelle’s advice on making a copy of your changes so you can add them again if lost when upgrading WordPress. I found an excellent tutorial on setting up quicktags by Podz, and a useful article by Lorelle VanFossen.
#WORD ADD BOX AROUND TEXT CODE#
Simply go the Code tab page, select the paragraph you want and click the quicktag. This means you don’t even need to type the line calling the text box style. If you are going to use text boxes often, you can set up a quicktag button for either the internal or external CSS method. Creating a Quicktag button for your text box style There are other options that don’t use CSS, as outlined by Lorelle VanFossen, but be warned: these techniques are considered out of date by most people, including Lorrelle who is providing them as as workaround to ’s CSS policy. If you have purchased the CSS Editing upgrade, the external CSS solution above should work. If so, the inline CSS solution above will not work for you. Use the Visual Editor to write the entire post, go to the Code tab page, locate the paragraph to go in the box and add: immediately before the text and immediately after it.Īpparently does not allow any inline CSS and charges extra for external CSS. To create a text box, simply reference the new class (textbox) in a tag. When finished, save the file, then ftp it back up to the server, overwriting the original. The style information can be changed to suit your needs. Download this file using an FTP program, make a copy of it in case you make a mistake, then use a text editor to add the following to the end of style.css: The external CSS file for the theme you are using is normally style.css in the wp-content/themes/yourtheme folder. With inline CSS you would have to manually change each post. If you want to change the style, you only need to change it in one place (the external CSS file) and it will automatically change in every post using this style.
You set up the style information once, in your external CSS file and reference it each time you add a text box. If you want your text boxes to have a common style across your site, use external, rather than internal, CSS. This works for simple text boxes (inline CSS or external CSS) as outlined in this post or for rounded text boxes. Note: I now created have a Colour Selector, which can create the appropriate code for you.
This requires a basic knowledge of CSS, which is beyond the scope of this article, but an Internet search will reveal many sites with information on CSS. You can change the style of the text box (ie the colours, font, size, border, etc), simply by changing the CSS in the style="" section. If you do, WordPress converts it to anyway and may break the code in the process! Unfortunately this means that this method only works for one paragraph – see my rounded text boxes in posts”>Rounded Text Boxes in Posts article for boxes with more than one paragraph. Note, if you are using the Visual Editor, with the default settings, you cannot use instead of. Save this and you should get a text box similar to this one:
Immediately before the text and immediately after it. When you are finished, go to the Code tab page and locate the paragraph to go in the box. It is simple to use inline CSS to create a box around a paragraph.įirst, use the default WordPress Editor (ie the Visual tab page) to write the entire post, including the text you want displayed in a text box. I don’t cover that in this article, as it would make it too long, but you can read about it in my Rounded Text Boxes in Posts article. If you’re interested in text boxes with rounded corners, this is a little more difficult (but so much cooler). The information is available, but the formatting separates it from the main body of the post in the reader’s mind.īooks and websites often use this technique, so why not inside posts? It’s possible to use blockquotes for this purpose, but I wanted to keep that for quoting other people, so I decided to create text boxes using CSS. The ideal way to include this sort of information is in a text box with formatting that sets it apart. For example, additional information that may be useful to readers, but that disrupts the flow of the post. I often have information that I want to include in a post, without it being part of the main body of the article. You’ll be surprised at how easy it is to do!
#WORD ADD BOX AROUND TEXT HOW TO#
In this article, I outline how to create simple text boxes using both inline and external CSS and how to set up a quicktag button so you can use them with the minimum of effort.