Tagged: css Toggle Comment Threads | Keyboard Shortcuts

  • Christopher Finke 10:25 am on February 25, 2013 Permalink | Reply
    Tags: css, , twenty thirteen   

    I’ve enabled Twenty Thirteen on my personal blog and done a little bit of customization. Here’s a CSS snippet for adding some contrast to the header text in Twenty Thirteen — helpful if you use one of the colorful default backgrounds:

    .site-title a {
    	color: #EDEDE8!important;
    	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    }
    
    .site-description {
    	display: inline-block;
    	padding: 5px;
    	background-color: rgba(255,255,255,0.5);
    }
    
    .navbar-fixed .site-title a {
    	text-shadow: none;
    }

    It turns this:

    Screen Shot 2013-02-25 at 10.22.38 AM

    into this:

    Screen Shot 2013-02-25 at 10.22.19 AM

     
    • Joen A. 11:21 am on February 25, 2013 Permalink | Reply

      Nice.

      You can also get this effect:

      with this snippet:

      .site-title a, .site-description {
      	display: inline-block;
      	background: rgba(255,255,255,.5);
      	padding: 10px;
      }
      .site-title a {
      	margin-top: -60px;
      }
      

      Like

  • Christopher Finke 11:11 pm on August 14, 2012 Permalink | Reply
    Tags: css,   

    CSS for a full-width header image in Twenty Twelve:

    #page {
    	padding-left:0!important;
    	padding-right:0!important;
    	max-width:70rem;
    }
    
    header hgroup, #main, footer[role="contentinfo"], nav.main-navigation {
    	padding-left:20px;
    	padding-right:20px;
    }
    
    img.header-image {
    	border-radius:0;
    	width: 100%;
    }
     
    • Brian Smith 4:20 pm on September 29, 2012 Permalink | Reply

      Hey Christopher,
      Thanks for this mod…where is this located at to change…I cannot find the particular /css to edit…

      Sorry, I am not very good at programming…

      Thanx,

      Brian

      Like

    • Bas van Leeuwen 1:18 pm on November 30, 2012 Permalink | Reply

      Thanks for the code. However, there is still some white space, now only on the right side of the image. How can I get rid of this / what did I do wrong?

      Like

      • Bas van Leeuwen 1:23 pm on November 30, 2012 Permalink | Reply

        I already fixed it. Turns changing the max-width optimal for 2012 fixed it. The code (in case you are interested) was:
        #page {
        padding-left:0!important;
        padding-right:0!important;
        max-width:68.571428571rem;
        }

        header hgroup, #main, footer[role=”contentinfo”], nav.main-navigation {
        padding-left:20px;
        padding-right:20px;
        }

        img.header-image {
        border-radius:0;
        align: center;
        }

        Like

    • francois hall 11:50 am on April 2, 2013 Permalink | Reply

      Hi, thanks for this piece of code – it’s just what I am looking for, I need to update from twenty ten child theme to twenty twelve… but having found your site, what’s this about twenty thirteen? is it better to use this as a basis for a child theme, or is it twenty twelve with bells and whistles…

      Thanks

      Like

      • Christopher Finke 12:30 pm on April 2, 2013 Permalink | Reply

        To me, Twenty Twelve feels more like a “site” theme, while Twenty Thirteen is more of a “blog” theme. Both themes can be used for both kinds of sites, but that’s just my impression.

        Keep in mind that Twenty Thirteen is not yet complete, so you may be asking for trouble if you start using it right now.

        Like

    • chris 5:41 pm on May 2, 2013 Permalink | Reply

      Thank you so much!

      Like

    • Kevin Lycett 8:48 am on July 18, 2013 Permalink | Reply

      Thank you so much, been searching for this everywhere, does your CSS still allow the site to be responsive?

      Like

    • Bill 6:42 pm on January 12, 2014 Permalink | Reply

      I spent hours today trying to figure this out. Tutorials had me messing with functions and tons of code. Yes, I do use child themes and this one was SPOT ON! So, I had to stop and say thanks!

      Like

    • Barbara Bamber | justasmidgen 8:38 am on May 24, 2014 Permalink | Reply

      I am trying to do this with my Home page only.. is there a way to do this with custom css? I would be so grateful if you know:) This is my homepage: http://justasmidgen.com

      Like

      • Christopher Finke 11:16 am on May 24, 2014 Permalink | Reply

        Yes, you can apply it to just the homepage by adding body.home to the beginning of each rule:

        body.home #page {
        	padding-left:0!important;
        	padding-right:0!important;
        	max-width:70rem;
        }
        
        body.home header hgroup, body.home #main, body.home footer[role="contentinfo"], body.home nav.main-navigation {
        	padding-left:20px;
        	padding-right:20px;
        }
        
        body.home img.header-image {
        	border-radius:0;
        	width: 100%;
        }

        Like

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