Wordpress recently introduced their brand new Twenty Fourteen theme. Before I shared Twenty Thirteen theme Modifications
As per WordPress.com Team,in 2014 theme will lets you create a responsive magazine website with a sleek, modern design. Twenty Fourteen theme feature your favorite homepage content in either a grid or a slider. You can use the three widget areas to customize your website, and change your content’s layout with a full width page template and a contributor page to show of your authors.
Creating a magazine website with WordPress has never been easier.
Here i am sharing tips to modify the Twenty Fourteen theme using Css. Hope you will enjoy the theme.
1. From my attached screenshot at the top, you are seeing there are 3 Posts with featured image is showing
to show your posts in that section you have to make any of your 3 post Sticky (from post edit option) and any of your
three post will be visible there.
2. To remove the Category which is showing under the featured image at the top Sticky posts
.featured-content-inner .entry-meta {
display: none;
}
.grid .featured-content .entry-header {
height: 72px !important;
min-height: 72px !important;
}
3. To change that Top Sticky Post Titles font, color and size in twenty fourteen theme, use the following css
.featured-content a {
color: red;
font-family: arial !important;
font-size: 20px;
}
/****** Suppose you are showing Posts in your homepage *******/
4. If you don’t want Featured image to show above the Post Title in Homepage use the following code
a.post-thumbnail {
display: none;
}
5. In single post page also, if u don’t want to show the Featured image at the top of post title use the following code
div.post-thumbnail {
display: none;
}
6. If you want to remove the Category Links showing above the Post title in homepage and single post page use the following code
header .cat-links {
display: none;
}
7. If you don’t want to show the Post date, in homepage as well as in Single post page try the following code
header .entry-date {
display: none;
}
8. If you want to change Homepage Post Titles font color, font size and font family and bold property try the following code
#primary .entry-title a {
color: red;
font-family: tahoma;
font-size: 32px;
font-weight: bold;
}
9. Again if you want to Change the single Posts font color,font family font size in 2014 (twenty fourteen) theme
#primary .entry-title {
color: red;
font-family: tahoma;
font-size: 32px;
font-weight: bold;
}
10.If you want to change the font size, font family and color of widget title in right sidebar of twenty fourteen theme
.content-sidebar .widget .widget-title {
color: red;
font-family: cursive;
font-size: 17px;
}
11. If you want to change the right sidebar widget link color, link font family and font size
.content-sidebar .widget li a {
color: red !important;
font-size: 17px !important;
font-family: tahoma !important;
}
12. If you want to change the right sidebar widget hover link color, link font family and font size of twenty fourteen theme
.content-sidebar .widget li a:hover {
color: black !important;
font-size: 17px !important;
font-family: tahoma !important;
}
13. If you want to use background color behind the right sidebar widget title use the following code
.content-sidebar .widget .widget-title {
background: none repeat scroll 0 0 green !important;
padding-bottom: 8px;
padding-top: 7px;
text-align: center;
text-transform: uppercase;
}
14. If you want to remove the Site Description (which is showing below the Site Title) in twenty fourteen theme
.site-description {
display: none !important;
}
15. If you want to remove the Tags which generally shows at the bottom of the posts use the following code
.home .tag-links {
display: none !important;
}
16. If you want to change the font color,font size and font family of left sidebar widget links
#secondary li a {
color: red !important;
font-family: tahoma;
font-size: 15px;
}
17. If you want to change the hover color ,font size and font family of the left sidebar widget links in twenty fourteen theme
#secondary li a:hover {
color: orange !important;
font-family: tahoma;
font-size: 15px;
}
18. If you want to remove the comments section only from your pages (but not from post) in your twenty fourteen theme..use the following code
.page-template #comments {
display: none !important;
}
19. If you want to change the color, font size, font family of only Page tiltes (not post titles) in twenty fourteen theme,
.page-template h1.entry-title {
color: red !important;
font-weight: bold;
font-size: 24px;
font-family: times new roman;
}
You can take my personal help in skype : om2000_cuet
How can we change the BLACK color on the left side?
LikeLike
HiJohn
would u mind to share me ur site url whre u r using twenty fourteen theme pls?
Om
LikeLike
http://www.BCflooring.ca
I just installed 14 colors
LikeLike
John – try twenty fourteen colors a plugin to alter this aspect
LikeLike
This looks great, thank you! On my website (http://backpackersunion.com) I want to remove the featured image that sits over the post titles, but I still want a thumbnail image generated from the featured image when the site is viewed from a phone or small screen. Do you know if this is possible and what .php file would need to be modified in my child theme? I was able to initially remove the image by deleting “” in the content.php, but this removed the thumbnails when viewing from a phone also.
Thanks a million!
LikeLike
Hi Carl
sorry for the late response
the issue u mentioned can be fixed i hope
Om
LikeLike
Great! 🙂
Just a question: how can i show 3 featured without inserting tag? Just the last 3 posts…!
LikeLike
Paolo
have u tried by making the posts sticky?
Om
LikeLike
@allaboutbasic, thanks so much for putting this together, #18 was just what I needed, I spent about an hour trying to figure out how to remove the comments from my pages but not from the posts, and couldn’t find anything simple enough (I’m new to css) in WP forums. You saved the day, it works like magic! 😀 I was wondering if you could help me with this one – I am trying to change the text color of the links in my footer widget. Just like what you posted for the right and left sidebars, but for the footer instead (not the hover color, just the regular color). I’d really appreciate any help. Thanks you!
LikeLike
Jules
what is ur site url?
let me know
Om
LikeLike
It’s heysaltlake.org. Thanks for looking into it!
LikeLike
Hi Jules
to change the footer link color (regular one) in twenty fourteen theme (2014)
try this css code
.footer-sidebar .textwidget a {
color: red;
}
let me know it works for you or not
Om
LikeLike
anyone know how to remove responsive code for twenty fourteen?
LikeLike
Hi
it will need css code changes
for example width value need to change from Percentage value ( % ) to Pixel value ( like 990px ) etc
Om
LikeLike
I have a problem with a twenty fourteen template. In the demo (http://twentyfourteendemo.wordpress.com/) you can see the left menu with separator lines, this even offers a drop-down menu called “flyout” menu. In my site karnhack.com not appear in the same menu the separator lines, and does not even appear the drop down menu… that is nested!
How do I fix these two problems? thanks
Gianluca
LikeLike
HI Gianluca
i tried to check http://karnhack.com/ but the site is not opening? is the url correct?
pls let me know
Om
LikeLike
1) can you help me on this: how can I change the size (width) of the content side bar. I would like to have it smaller
2) which Facebook comment plugin do you use? I like it! (I’m currently using SEO Facebook Comment)
Thanx! HEnny
LikeLike
Hi Henry
sorry for the late reply
what is ur site url?
pls let me know
Om
LikeLike
Thanks for your reply Om – and please don’t worry about “late”, I respect your “off – time” 🙂
The URL is http://www.hennycramers.com
LikeLike
Informing u shortly 🙂
LikeLike
Informing u shortly 🙂
LikeLike
PS I think (ref. to Q. 2) that you use the JetPack comment feature. I already switched to it and am satisfied with it!
LikeLike
Hi Henry
nice to know you solved issue 2
Pls try this for issue 1
.content-sidebar {
margin-left: -24.047619%;
width: 24.047619%;
}
.hentry {
max-width: 738px;
}
.site-content {
width: 59%;
}
let me know if it helps
Om
LikeLike
Hi Om, thanks! Do I add this in the style.css of the child theme? Henny
LikeLike
Yes..try that first
Om
LikeLike
OK Om, I’ll let you know when done. Thanks! Henny
LikeLike
Hi Om, what it does it that it increases the main site-content area width, but it doesn’t decrease the content-side width. Moreover, when going from full screen to a smaller browser format, then the site content is even smaller then in the original state.
So I left it for now in original site, until I find a suitable way to manage the content-side area width. What I noticed when making the the window smaller, is that the content-side area decreases nicely in size.
I found on the theme side:
“The secondary “content” sidebar (right) width is 306.”
Wouldn’t it be enough to change this value? Would you know in where that is defined? (I couldn’t find in style.css)
Henny
LikeLike
Henny
thanks…sorry for the late
it would better if i could check the code from dashboard though
Om
LikeLike
Hi,
I want to see my website in center of big screen. Npw theme twenty fourteen is in left side, background – on right.
LikeLike
Hi
would u mind to clarify me ur isssue some more pls? sorry didnt get your point properly
Om
LikeLike
Hi Om, Can u help me with this, I would like to have a full page width for my gallery page?
My site url http://www.kiangemstone.com
Thank you
LikeLike
Navin
is that you want your home page to show full width?
let me know
Om
LikeLike
You’re a genius! I’ve been looking for a way to delete the categories under featured content photos but couldn’t figure out how to do it. Thank you!
LikeLike
HI
thanks..would u mind to communicate me here pls
https://www.fiverr.com/om2000_cuet/solve-your-wordpress-blogs-csshtml-and-other-wordpress-issues
Om
LikeLike
This code don’t work you can help me? .content-sidebar seems to give error.
http://testsitirealizzati.altervista.org
13. If you want to use background color behind the right sidebar widget title use the following code
.content-sidebar .widget .widget-title {
background: none repeat scroll 0 0 green !important;
padding-bottom: 8px;
padding-top: 7px;
text-align: center;
text-transform: uppercase;
}
LikeLike
Goodmorning
what you tried to do?
let me know
i will check and let u know within my evening
Om
LikeLike
Goodmorning allaboutbasic,
substantially I have three problems::
1 – the search-box covering sidebar
2 – I would like to add a background to the title of the widget
3 – I would like to reduce the space between the menu
I have attached an image to compensate for my bad english:
https://drive.google.com/file/d/0B3a_1_P6VxUERzlTckVmTkduc28/view?usp=sharing
The the site in question is:
http://testsitirealizzati.altervista.org/
Thank for your help
LikeLike
HI
thanks u can check these code
#primary-sidebar .widget {
margin-bottom: 23px !important;
overflow: hidden;
}
.primary-sidebar .widget .widget-title {
background: black none repeat scroll 0% 0% !important;
display: block !important;
z-index: 1000000;
line-height: auto !important;
padding: 4px;
text-align: center;
}
Om
LikeLike
Lovely blog you hhave here
LikeLike