Entering Code in the Editor – Text

One of the main things people want to change on their website is their font. As we discussed in our last two posts (post 1 / post 2) you can enter code into the either the Specific Post or the Editor. This goes for changing the text as well. Hence I will break this post into two sections.

 

Text Button

 

Specific Post or Part of Post

When you are on the specific post make sure you are typing the below under the text tab.

You then type in the following code to change the…

 

1) font size

To change the font size you need to enter the following code

 <span style=”font-size: large;”>Enter text here</span>

 Now change the “large” to what you want. You can also write the size you want e.g. 12px

 

2) text color

To change the text color you need to enter the following code.

<span style=”color: #ffff00;”>The text goes here</span>

The bolded section is the color code. You change the code depending on what color you want. Here’s a great website to determine what color you want to choose.

 

3) font type

To change the font type use the following code.

<span style=”font-type: “Times New Roman”, Times, serif;”>The text you want</span>

The bolded section is the font you want to use. Here’s a great website for web safe font types.

 

Now you can get tricky and start combining the above into one code. The following code…

<span style=”color: #00ff00;”><span style=”font-size: 30px;”><a style=”color: #00ff00;” href=”http://doesvenaprowork.net/” target=”_blank”>Does Venapro Work?</a></span></span>

will get you…

Does Venapro Work?

 

Editor

 

For Entire Site

This code needs to be added to the editor (generally to the stylesheet – style.css). I add it to the bottom with a note to remind me what it is about. To add a note type in the following.

*/   add note here   /*

The */ /* tells WordPress to ignore everything in between the two forward slashes.

First you must work out what you want to change. Whether it be the body text or header or whatever. A great way to check what you want to change is using Firefox’s Web Inspector. Just hover over the text you want to change and note what type of text it is. All themes are different but they will generally be something like:

  • h1, h2, h3 etc for the different headers
  • p for the general typing in posts
  • body for the main body text
  • a for a link

Write that down for when you are going to type in the code.

Now, this is how you change the…

 

1) font size

To change the font size type the following code.

h1 {
 font-size: 40px;
}

Now change the bolded sections. Change “h1” to the text you want to change. Now change the “40px” to the font size you want.

 

2) text color

To change the text color you need to enter the following code.

body {
 color: blue;
}

Now change the bolded sections. Change “body” to the text you want to change. Now change the “blue” to the color you want. There are 3 ways to enter the web color.

  • a HEX value – e.g. “#000000”
  • an RGB value – like “rgb(150,0,0)”
  • a color name – like “green”

Any of them will work.

 

3) font type

To change the font type type in the following.

p {
 font-family: “Times New Roman”, Times, serif;
}

Then change the bold sections. Change the “p” to what type of text you want to change. Then change the ““Times New Roman”, Times, serif” to the font you want.

There you go. I hope this post helped you.