Solved

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

Posted on 2016-09-05
5
45 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 55

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 55

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 55

Expert Comment

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

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

WordPress can be pretty daunting, especially for a beginner, so I thought it might be a good idea to write an article to show how easy it is to get started in WordPress and to design a custom theme.  The first step is to check with your hosting comp…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
The purpose of this video is to demonstrate how to make a WordPress Site faster and smaller in size by cleaning up the database. This will be demonstrated using a Windows 8 PC. Plugin WP Optimize will be used. Go to your WordPress login page. T…
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…

831 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