Tag Archives: twenty thirteen

Do you realy like your wordpress theme – rapid customisation of default theme for noobies

You want to be sneaky – you want to be fast

I just wanted to have simple wordpress blog – ok… no probs

Switched newest Twenty Thirteen theme – looks fine – until I added my first post, and another…

This looks like some mess: full posts on front page – who the hell will scroll through long boring posts to find out what happening on my page. Ok, there is ‘Recent post’ widget but it only narrowing up site content even more. And that big space for title, it is really BIG, am I blind or what??? GRRRR that enough for me.

Googling for couple of minutes gives answers how to tame the beast 🙂
So here we go:

Post previews – like in search mode

go to Appearance, then Editor,  find content.php file in Templates in line 33 add places where preview mode should be available (add is_home() for homepage and so on)

<?php if ( is_search() || is_home() || is_category()) : 
// Only display Excerpts for Search - me - O really?>

And that silly comment : ‘Only display…’ – do something bad to it 🙂
Hit Update File and enjoy what other people call normal 😀

Time for style

Stay in the edit window and switch to Stylesheet style.css
Start messing around 🙂 There two ways
1. I don’t give a cat – replace original css with your custom
2. Pussy, pussy cat – install My Custom CSS plugin and add bits of edited code in it

Anyway, is good to have backup of original file. Another thing is to edit this file in some nice editor like Notepad++ or SublimeText3.

Let start – go to your min page in Chrome browser and hit F12 button

  1. Main banner – right click under the text on banner and choose option Inspect Element. Find line with  <a class expression
    baner edit
    on the right side you will find css style responsible for that guy in Style tab. Sometimes there is a lot of different styles but you can play with it values to find if change make you happy. Yes editing values in that styles works instantly and you can see how layout changes – find best values and then you can apply it to your code.  The same problem occurs with finding proper element on site – so little patience is needed.
    Ok – now use link on the right side of media=”all” starting with style.css it’s redirecting to part of css file responsible for everything in your life –  🙂 – for that banner
    baner edit css
    You can copy and paste this block of code in My Custom Css plugin  or navigate to the same line in original css style.
    Edit desired options – in my case max-width: 1200px; and min-height: 120px;
    good to add comments to css – must be closed in /*commnet */ so I paste

    /*Header width */ 
    .site-header .home-link {
    	color: #141412;
    	display: block;
    	margin: 0 auto;
    	max-width: 1200px;
    	min-height: 120px;
    	padding: 0 20px;
    	text-decoration: none;
    	width: 100%;
    }
  2. Save changes – and enjoy new  layout of header.
  3. To editing title – do the same procedure  to find code like
    <h1 class="site-title">Title of blog…</h1>

    Css style .site.title redirects to code

    .site-title {
    	font-size: 60px;
    	font-weight: bold;
    	line-height: 1;
    	margin: 0;
    	padding: 58px 0 10px;
    }

    Changing font-size: 40px; and  padding: 20px 0  10px; make my day 😀

  4. Next post width – found something like this:
    .sidebar .entry-header,
    .sidebar .entry-content,
    .sidebar .entry-summary,
    .sidebar .entry-meta {
    	max-width: 1040px;
    	padding: 0 376px 0 20px;
    }

    Changing max-width: 1300px; and padding: 0 210px 0 10px;

  5. I changed also padding between posts
    .hentry {
    	padding: 25px 0;
    }
  6.  Of course something was broken – sidebar overflow my text – so i applied some fixes, and additionally I added behaviour of  page when site width is below 1000px

Here is full code what can be inserted in My Custom Css and edited any time you like – or to be clear – don’t like something

/*Header width */ 
.site-header .home-link {
	color: #141412;
	display: block;
	margin: 0 auto;
	max-width: 1200px;
	min-height: 120px;
	padding: 0 20px;
	text-decoration: none;
	width: 100%;
}

/*Title */
.site-title {
	font-size: 40px;
	font-weight: bold;
	line-height: 1;
	margin: 0;
	padding: 20px 0 10px;
}

/*Main ite header*/
h1 {
	font-size: 30px;
	margin: 30px 0;
}

/*Post width*/

.sidebar .entry-header,
.sidebar .entry-content,
.sidebar .entry-summary,
.sidebar .entry-meta {
	max-width: 1300px;
	padding: 0 310px 0 10px;
}

/*To remove margin when smaller width*/
@media (max-width: 1000px) {

	.sidebar .entry-header,
	.sidebar .entry-content,
	.sidebar .entry-summary,
	.sidebar .entry-meta {
	max-width: 1200px;
	padding: 0 20px 0 20px;
	}
}

/*Pading between posts on main*/
.hentry {
	padding: 25px 0;
}

/*Sidebar*/
.site-main .sidebar-inner {
	margin: 0 auto;
	max-width: 1300px;
}

.site-main .widget-area {
		margin-right: 10px;
}

/*How wide the site is*/
.site {
	background-color: #fff;
	border-left: 1px solid #f2f2f2;
	border-right: 1px solid #f2f2f2;
	margin: 0 auto;
	max-width: 1350px;
	width: 100%;
}