Ok. let's start with the PageTitle. Insert the following CSS code into Additional CSS:
-------------------------------------
.page .entry-header .entry-title {
font-family: arial;
font-size: 20px;
color: #000000;
font-stretch: ultra-condensed;
text-transform: uppercase:
letter-spacing: 0px;
margin-bottom: -40px;
}
-------------------------------------
Followed by the H1 Heading:
-------------------------------------
h1, h2, h3, h4, h5, h6 {
font-family:arial;
color: #352ece;
font-stretch: ultra-condensed;
}
h1{
font-size: 36px;
}
------------------------------------
Now the Horizontal Rule
------------------------------------
hr {
background-color: #352ece;
width: 100%;
height: 2px;
margin-bottom: 5px;
margin-top:-25px;
}
-----------------------------------
And last but not least, the Paragraph:
-----------------------------------
p {
Width: 100%;
font-family:helvetica, arial, verdana, sans-serif;
font-size: 19.5px;
color:#393939;
line-height: 1.4;
margin-bottom: 10px;
}
------------------------------------
Using the <p></p> tag will give a space between paragraphs equivalent to the font size plus the line height. I find this too much, so I've reduced it to 10px. I've also changed the Page Title font and size and made it all capitals and reduced the space between the Page Title and H1 Heading.

If using the font-stretch attribute, as I have, make sure the font you use has a narrow or condensed version. I have also reduced the space above and below the Horizontl Rule.
Now my page would look like this, yours will probably be different according to your changes to the CSS attributes:


I think you will agree, that, so far, the page is looking a lot better than the original.

Somewhere on your posts and pages you may need to create a list, so let's do that next.



Join the Discussion
Write something…
Top