Where to copy/paste this code?
The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then we strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.
The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then we strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.
/* START OF Change size/color of the Post/Page Icon & Title */
/* Change size of Page/Post Title */
/* h1=Page, h2=Post, tc-grid-icon=Grid */
h1.entry-title, h2.entry-title, article.sticky h2, .tc-grid-icon::before {
font-size: 10px !important; /* Alternative 1 */
}
h1.entry-title, h2.entry-title, article.sticky h2, .tc-grid-icon::before {
font-size: 90% !important; /* Alternative 2 */
}
h1.entry-title, h2.entry-title, article.sticky h2, .tc-grid-icon::before {
font-size: 0.5em !important; /* Alternative 3 */
}
/* Change color of Page/Post/Grid Icon/Title */
h1.entry-title, h2.entry-title, article.sticky h2,
h1.entry-title>a, h2.entry-title>a, article.sticky h2>a,
.tc-grid-icon::before {
color: red; /* Change red to required color */
}
/* END OF Change size/color of the Post/Page Icon & Title */
(Credit: @rdellconsulting/@Steve Enggass)
11 thoughts on “Change size/color of the Post/Page Icon & Title”
Is there a possibility to change just one page’s color and icon?
Hi, you’ll want to use the Wordpress conditional tags to do that or the WordPress body class.
Hope this helps!
Hi! Thanks for this great theme!
My sticky post has a slight different format than the rest: Title centred, and content is ALL bold.
Is there a way to change this? The code above seems to affect the non-sticky posts only. Can you please point me in the right direction?
Many thanks!
Guillermo
Hi.
Is there a possibility to change just one page’s color and icon?
Thanks for help, hage
Hi Raimund, in WordPress you can style separately any page or post in CSS with the help of the conditional tags.
More about conditional tags : http://codex.wordpress.org/Conditional_Tags
Hi Nicolas,
yeah, I found it.
And for people as clueless as I was – here’s the code to add to your child’s theme style.css
/* page ID 26 icon changed */
.page-id-26 .format-icon:before {
font-family: ‘entypo’;
content: ‘\1F30E’ !important; /* change to your preferred icon */
font-size: 35px; /* changed em to px to get rid of IE bug */
line-height: 0px;
position: relative;
top: 14px;
}
…and thanks a lot for this beautiful theme!!
Can’t get this snippet to work – has no effect. Working with a child theme locally using MAMP. I would like to change the color of the Post Titles.
I am using the following to change the Featured Titles:
/* Change Featured Pages Heading */
.marketing h2 {
font-size: 24px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
color: #e23a3f;
}
I am also using the following to remove the ‘pencil icon’ on Posts.
/* Remove the pencil icon */
.post h1.format-icon:before, .post h2.format-icon:before {
content: none;
}
Any tips?
Thanks!
There was a bug to change the color of the Title. Hopefully I’ve fixed it above!
Thanks for pointing it out.
Great. Thanks. Still need to change the h1 for the size to h2 as well it seems.
Also, why is there a bit of extra white space above posts on the front page? I have a column left and right with posts in the center. Each column has a widget that aligns slightly higher than the posts in the center column. How can adjust the top margin, I guess, of the center column posts?
Well spotted. I’d not realised before that h1=Pages, h2=Posts. Have updated the Snippet and credited you.
Thanks