Tagged: TwentyFifteen Toggle Comment Threads | Keyboard Shortcuts

  • Jay Versluis 12:08 pm on November 5, 2015 Permalink | Reply
    Tags: , , TwentyFifteen   

    Categories: WordPress ( 135 )

    How to change fonts in TwentyFifteen by Automattic 

    TwentyFifteen uses the Noto Serif font. It looks swish and comes with an Apache license, and it can be pulled from Google Fonts too. It’s a fine font indeed – but individuals that we are, it may not be for everybody.

    It’s easy to change it to something else though, and in this article I’ll show you how.

    By default, TwentyFifteen and Noto Serif looks like this:

    Screen Shot 2015-11-05 at 11.58.15

    If we want to change this to something else, we must first import said font into our style sheet, and then declare it for a couple of classes. In this example I’m going to use Lato, another fabulous font that’s featured in the TwentyFourteen theme:

    /* import the new font */
    @import url(http://fonts.googleapis.com/css?family=Lato);
    
    /* change the font to something else */
    body, .entry-content, .page-title {
    	
    	font-family: Lato, Georgia, "Times New Roman", Times, serif;
    }
    

    Now TwentyFifteen will look like this:

    Screen Shot 2015-11-05 at 11.59.27

    If for some reason Lato cannot be downloaded, the browser will try to display text in the next font we declared (Georgia – and if that fails, it’ll try Times New Roman… you get the picture).





     
  • Jay Versluis 11:52 am on November 5, 2015 Permalink | Reply
    Tags: , TwentyFifteen   

    Categories: WordPress ( 135 )

    How to avoid hyphenations in TwentyFifteen by Automattic 

    By default, TwentyFifteen will hyphenate text on posts and pages. This works well for most, but some find this feature annoying. It’s easy to override with a small CSS tweak – let me show you how.

    Here’s what a post might look like by default:

    Screen Shot 2015-11-05 at 11.39.53

    Notice the hyphenations in lines 3 and 4. Now add the following to your stylesheet:

    /* stop hypenating words */
    .entry-content, .entry-summary, .page-content, .comment-content {
    		
    	-webkit-hyphens: none;
    	-moz-hyphens: none;
    	-ms-hyphens: none;
    	hyphens: none;
    	word-wrap: normal;
    
    }
    

    Now the post should look like this – no more hyphens in sight:

    Screen Shot 2015-11-05 at 11.40.14

    And in case you ever want to bring it back, delete the above, or set them to their default values:

    /* start hypenating again */
    .entry-content, .entry-summary, .page-content, .comment-content {
    	
    	-webkit-hyphens: auto;
    	-moz-hyphens: auto;
    	-ms-hyphens: auto;
    	hyphens: auto;
    	word-wrap: break-word;
    }
    

    Under the hood, CSS uses two distinct properties: hyphens and word-wrap. However, not all browsers acknowledge each property – and with the above we’ll target most common browsers in use today.

    Check out the following links for more information on the hyphens and word-wrap properties:





     
    • juliav305 12:10 pm on November 5, 2015 Permalink | Reply

      Excellent – exactly what I’ve been looking for. It was definitely a feature that was annoying me.

  • Jay Versluis 12:23 pm on October 4, 2015 Permalink | Reply
    Tags: TwentyFifteen   

    Categories: Themes, WordPress ( 25 )

    How to move the sidebar to the right in TwentyFifteen 

    I’ve never liked themes with sidebars on the left – probably because we in the western world start reading on the left, and I’d like there to be as little clutter as possible. Or perhaps I’m used to navigation items on the right.

    I was looking around for solutions to move the sidebar in Automattic’s TwentyFifteen theme to the right, and several options can be found on the internet. Here are two that worked for me:

    Option 1: CSS Tweak

    Thanks to the Stack Exchange community, this CSS tweak works a treat (for left-to-right languages):

    body:before {
        right: 0;
        left: auto;
    	direction: ltr;
    }
    .sidebar {
        float: right;
        margin-right: auto;
        margin-left: -100%;
    	direction: ltr;
    }
    .site-content {
        float: right;
        margin-right: 29.4118%;
        margin-left: auto;
    	direction: ltr;
    }
    .site-footer {
        float: right;
        margin: 0 35.2941% 0 0;
    	direction: ltr;
    }
    

    Add these declarations to your own TwentyFifteen Child Theme and you’re good to go. If added via a CSS widget or to the bottom of the original theme (which is a really bad idea), additional “!important” statements may be necessary.

    Kudos to toschero and Anteru for the combined solution to this puzzle. Check out the full discussion here:

    Option 2: Pre-made Child Theme

    Ruhul Amin from Tips and Tricks HQ has built a ready-to-use child theme and solved this puzzle in PHP. You can check it out here:





     
c
compose new post
j
next post/next comment
k
previous post/previous comment
r
reply
e
edit
o
show/hide comments
t
go to top
l
go to login
h
show/hide help
shift + esc
cancel