Reducing page heading and body text point size

[Peter Bailiht]

I have purchased and am using your ‘Visual Theme’ WP product.
I need to reduce the point size of the page headings and body text.

What’s the best way of doing this? Also, is there a way of reducing the featured image size?

Thanks for your prompt support.

Peter

[Bill Robbins]

Thank you for your business first of all. You can change the font-sizes in the theme if you’d like to. Here’s how:

1) Go to the appearance section of your WordPress control panel and select edit to open up the theme editor.
2) From the list of files on your right, choose style.css
3) Look for this spot:

h1 { font-size: 36px; line-height: 1; margin-bottom: 8px; }
h2 { font-size: 24px; line-height: 1; margin-bottom: 12px; }
h3 { font-size: 20px; line-height: 1; margin-bottom: 12px; }
h4 { font-size: 18px; line-height: 1; margin-bottom: 20px; }

This controls the sizes of the heading tags 1-4. The first value in each of them is the size in pixels of that heading.

If you’ll look down below that, you’ll see this:

p { margin: 0 0 24px; font-size: 16px; padding-bottom: 5px; }

This is the spot where you can change paragraph text. Again just edit the font-size: 16px; to be the size you need it to be.

It is possible to change the featured image size, but it wouldn’t be particularly easy because of how integral the image is to the layout of the theme. If you do want to make a change there, let me know.

Just let me know if you have any other questions,
Bill

[Peter Bailiht]

Hi Bill

Thanks for your reply. I have managed to change the heading font size.

The body text is causing me problems. I have tried changing the font size where you indicated, but it has no effect; I am using a picture page with the picture on the right, text on the left.

Can you please double check this again.

Thanks

Peter

[Bill Robbins]

You are absolutely right. The body text on a picture page is set elsewhere. Here’s what you’ll need for it:

.scroll-pane p { font-size: 16px; }

Try changing that and see if you don’t get the desired results.

Let me know if you have any trouble.

[Peter Bailiht]

Thanks Bill

I have now been able to reduce all the body text point sizes for the various pages styles, with the exception of bullited lists in the ‘picture page right’ and ‘picture page’ styles. How is this achieved??

Also – I have a text margin disparity between the default template and the picture page styles. How do I increase the left margins, i.e. space before text on the picture page templates?

Thanks

[Bill Robbins]

For lists, they would be like this:

.scroll-pane ul li, .scroll-pane li, .scroll-pane ol li { font-size: 16px; }

To set the left margin, you can add it to any style this way:

.scroll-pane p { margin-left: 20px; }

That would set the left hand margin of paragraphs on the picture page to 20 pixels.

You can actually set all of this in one place like so:

.scroll-pane p,
.scroll-pane li,
.scroll-pane ul li,
.scroll-pane ol li {
font-size: 16px;
margin-left: 20px;
}

[Nacho Grijuela Gonzalez]

hi Bill,
I have a foxy theme instaled.

I have tried to change the sizes of the fonts in STYLE.CSS as you indicate here but it doesn’t work

[Bill Robbins]

Great question. We actually changed the structure of the logo area about two weeks ago to make it bit more flexible for people with different shaped logos. You can still change the height of it though. Here’s how:

1. Go to the theme options page and select the styling tab.
2. At the top, make sure you choose “yes” to include custom styling.
3. Scroll down to the bottom until you see a box labeled Custom CSS.
4. Paste this into the box:

   
   #logo {
   	margin-top: 20px;
   	margin-bottom: 20px;
   }
   

5. Save your changes.

That will make the margin above and below the logo smaller. You can change the margins above to get the exact effect you’re going for.

If you have any questions or trouble, let me know,
Bill

[Nacho Grijuela Gonzalez]

but its not the margin what I can change, its the size of the typography

[Bill Robbins]

My apologies, I thought you were asking about something else. This actually isn’t a post for the Foxy theme so things are set a bit differently here.

Here’s the spot where the body text is set for Foxy in the style.css file:

p, li, ol, ul, span, div, label, legend, form, fieldset, input, ul li, ol, li { 
     font: normal normal 14px/1.1 "Lucida Grande", Lucida, Verdana, sans-serif; 
}

The 14px is the font size. The 1.1 is the line height which is followed by the font stack–the order the browser will try to load fonts in.

For the sidebar navigation, here that is:

aside.sidebar nav li {
	float: none;
	line-height: 2;
	font-size: 17px;
	margin-bottom: 7px;
	padding-left: 0;
	text-transform: uppercase;
}

and this is for sidebar widgets:

aside.sidebar .widget p, 
aside.sidebar .widget li {
	font-size: 12px;
	margin-bottom: 3px;
}

If you run into trouble, let me know.

[Nacho Grijuela Gonzalez]

hi bill, dont worry, lets see:

Im afraid I have made changes you tell me but I cant change it. I want to reduce the size of text across the page and also the titles of the menu bar

on the other hand, I have installed TypeKit and do not know how work

[Bill Robbins]

I spotted where you had made the font size smaller in the navigation menu (you may have to clear your browser’s cache to see the changes).

For the page titles, you can add a font-size to this:

h2.title,
article h1, 
h1.page-title,
.page-content h1 {
	float: left;
	text-transform: uppercase;
	padding: 5px 10px;
	margin: 0 0 15px -30px;
	background-color: #a01113;
}

It would look something like this:

h2.title,
article h1, 
h1.page-title,
.page-content h1 {
	font-size: 30px;
	float: left;
	text-transform: uppercase;
	padding: 5px 10px;
	margin: 0 0 15px -30px;
	background-color: #a01113;
}

If you’re adding Typekit styles directly to your stylesheet, then you’ll want to use the font-family style. That would make the page titles look like this:

h2.title,
article h1, 
h1.page-title,
.page-content h1 {
	font-size: 30px;
	float: left;
	text-transform: uppercase;
	padding: 5px 10px;
	margin: 0 0 15px -30px;
	background-color: #a01113;
	font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
}

You would just replace the fonts listed with the ones supplied by Typekit.

Let me know if you have any trouble,
Bill

[Nacho Grijuela Gonzalez]

ok done for the titles.

and how do I change in the css…?
1)the paragraphs font
2)the left menu font

[Bill Robbins]

Here are the paragraph level fonts:

p, li, ol, ul, span, div, label, legend, form, fieldset, input, ul li, ol, li { 
     font: normal normal 14px/1.1 "Lucida Grande", Lucida, Verdana, sans-serif; 
}

The 14px is the font size. The 1.1 is the line height. The names after that are the font names. If you’re using Typekit here too you’ll replace “Lucida Grande”, Lucida, Verdana with the fonts from them.

For the left menu (navigation menu), you’ll use this:

aside.sidebar nav li {
	float: none;
	line-height: 2;
	font-size: 17px;
	margin-bottom: 7px;
	padding-left: 0;
	text-transform: uppercase;
}

Just add something like this:

font-family: "Lucida Grande", Lucida, Verdana, sans-serif;

above the closing } to change the fonts used there.

---

Let me know if that’s not the left menu you’re wanting to change. You can just copy the text from the demo to let me know what exactly you’d like to change.

Thanks,
Bill

[Nacho Grijuela Gonzalez]

Bill, take a look!! You will be proud of me!! ;)))

http://lamalinchesantander.com

Only one more thing… When I resize like if it were mobile version, the background of the titles in the menu are red…

[Bill Robbins]

You’ve done great! Looks amazing.

It also looks like you found a bug. Here’s how to change the navigation background color for the mobile site.

Edit the style.css file and look for this spot:

nav.mobile li a:hover,
nav.mobile li.current-menu-item a {
	background-color: #971012;
}

Change the background color there and save your changes.

That should take care of it. I’ll update the theme so that doesn’t happen to anyone else either.

Thank you again for your business and let me know if I can help with anything else,
Bill

[Author]

Posts