Solved

How to change the default font size on post headings within Wordpress

Posted on 2016-09-05
5
34 Views
Last Modified: 2016-09-06
Hi All

I am using WordPress - V4.5.3 and theme TwentySixteen

On this site I need to link to some 200 posts which will be listed alphabetically as you can see on this link:

http://www.emsite.co.uk/

I can trying to identify how to slightly reduce the font size that these display on the page.

I acknowledge that I am ambitious to get them all on 1 page so will need to split them up but still think a slightly smaller font will help to display more and look neater.
0
Comment
Question by:IM&T SRFT
  • 3
  • 2
5 Comments
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41784928
You can add a custom style
.vskb-post-name > a {
  font-size:  0.9rem;
}

Open in new window

1
 

Author Comment

by:IM&T SRFT
ID: 41785003
Hi Julian

Thank you for getting back to me

I am not sure where this would go?  I think it would be somewhere within the vskb-style.css file?

/* Very Simple Knowledge Base */


/* Link styles */
#vskb-four a, #vskb-three a {text-decoration:none;}
#vskb-four a:hover, #vskb-three a:hover {text-decoration:none;}


/* Remove border bottom from links in Twenty Fifteen and Twenty Sixteen */
#vskb-four a, #vskb-three a {border-bottom:0; box-shadow:none;}


/* Category and Post names */
#vskb-four .vskb-cat-name, #vskb-three .vskb-cat-name {list-style:none; margin:0 0 5px; padding:0 0 10px; font-size:1.2em; line-height:1.2em; font-weight:bold; border-bottom: 1px solid #333;}
#vskb-four .vskb-post-name, #vskb-three .vskb-post-name {margin:0 0 0 20px; padding:0;}


/* Four Columns */
#vskb-four {width:100%; clear:both; float:left;}
#vskb-four .vskb-cat-list {width:23.5%; margin:0 2% 20px 0; padding:0; float:left; background:none;}
#vskb-four ul:nth-of-type(4n+1) {clear:left;}
#vskb-four ul:nth-of-type(4n+4) {margin:0 0 20px 0;}


/* Three Columns */
#vskb-three {width:100%; clear:both; float:left;}
#vskb-three .vskb-cat-list {width:32%; margin:0 2% 20px 0; padding:0; float:left; background:none;}
#vskb-three ul:nth-of-type(3n+1) {clear:left;}
#vskb-three ul:nth-of-type(3n+3) {margin:0 0 20px 0;}


/* Mobile */
@media screen and (max-width:767px) { 
	/* Four Columns */
	#vskb-four ul:nth-of-type(4n+1) {clear:none;}
	#vskb-four ul:nth-of-type(4n+4) {margin:0 2% 10px 0;}
	#vskb-four ul:nth-of-type(2n+1) {clear:left;}
	#vskb-four ul:nth-of-type(2n+2) {margin:0 0 10px 0;}
	#vskb-four .vskb-cat-list {width:47%; margin:0 2% 10px 0;}

	/* Three Columns */
	#vskb-three ul:nth-of-type(3n+1) {clear:none;}
	#vskb-three ul:nth-of-type(3n+3) {margin:0 2% 10px 0;}
	#vskb-three ul:nth-of-type(2n+1) {clear:left;}
	#vskb-three ul:nth-of-type(2n+2) {margin:0 0 10px 0;}
	#vskb-three .vskb-cat-list {width:47%; margin:0 2% 10px 0;}
}

Open in new window

0
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41785116
This article will explain how to add custom CSS to your theme.

https://en.support.wordpress.com/custom-design/editing-css/
1
 

Author Closing Comment

by:IM&T SRFT
ID: 41785902
Julian

Thank you for your help, i will look at adding custom CSS today after work.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41785968
You are welcome.
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Like there are many different versions of Wordpress, there are also a handful of related side projects WordPress users should be familiar with.   All of these projects are open source and GPL licensed, which means there are few restrictions to us…
WordPress is constantly evolving, and with each evolution appears to get better and better.  One of the big drawbacks prior to version 3 was that there was no way to be able to set up a custom menu from the backend. The Old Way Adding menus is…
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now