Title: Customizing 20-12 Theme
Last modified: August 21, 2016

---

# Customizing 20-12 Theme

 *  [astromaz](https://wordpress.org/support/users/mazharhashmi/)
 * (@mazharhashmi)
 * [12 years, 3 months ago](https://wordpress.org/support/topic/customizing-20-12-theme/)
 * theholyislam.com is my website. I want to to some changes to the website:
 * 1. I want to decrease the area b/w top line and the body box.
    2. header and 
   tagline will be in centre with big fonts 3. menu will also be in centre 4. post
   heading colour is blue at the moment I want to change the colour. 5. The “leave
   a reply / 2 comments’ area would be placed on the right side of the ‘This entry
   was posted in…’. 6. decrease the gaps b/w posts 7. At the end of the page, there
   is too much gap b/w the last line and the white body box, also the body box area
   in the last has too much white space, i want to decrease it.
 * Please help me in customizing, thanks !

Viewing 15 replies - 1 through 15 (of 38 total)

1 [2](https://wordpress.org/support/topic/customizing-20-12-theme/page/2/?output_format=md)
[3](https://wordpress.org/support/topic/customizing-20-12-theme/page/3/?output_format=md)
[→](https://wordpress.org/support/topic/customizing-20-12-theme/page/2/?output_format=md)

 *  [batharoy](https://wordpress.org/support/users/batharoy/)
 * (@batharoy)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/customizing-20-12-theme/#post-4612460)
 * Your site looks a little messed up. Can you please post the content your header.
   php file to [pastebin](http://pastebin.com/) and put a link here for me.
 *  Thread Starter [astromaz](https://wordpress.org/support/users/mazharhashmi/)
 * (@mazharhashmi)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/customizing-20-12-theme/#post-4612461)
 * here is the link:
 * [http://pastebin.com/ahbKEBLX](http://pastebin.com/ahbKEBLX)
 * I have just added the first line on my own.
 * Why you say its messed up?
 *  [batharoy](https://wordpress.org/support/users/batharoy/)
 * (@batharoy)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/customizing-20-12-theme/#post-4612462)
 * OK that’s the part we need to fix. You will need to create a [child-theme](http://codex.wordpress.org/Child_Themes)
   to edit the header.php. Otherwise it will be erased if the theme is updated.
   
   Will you need help with that?
 *  Thread Starter [astromaz](https://wordpress.org/support/users/mazharhashmi/)
 * (@mazharhashmi)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/customizing-20-12-theme/#post-4612463)
 * yes sir I would need it. Thanks for your help mate!
 *  [batharoy](https://wordpress.org/support/users/batharoy/)
 * (@batharoy)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/customizing-20-12-theme/#post-4612464)
 * OK
    1. Make a folder called **twentytwelve-child** inside your themes folder.
 * > wp-content/themes/twentytwelve-child
 * 2. Inside the twentytwelve-child folder create a file named **style.css** and
   paste the following code into it.
 *     ```
       /*
        Theme Name:   Twenty Twelve Child
        Description:  Twenty Twelve Child Theme
        Template:     twentytwelve
       */
   
       @import url("../twentytwelve/style.css");
   
       /* =Theme customization starts here --------- */
       ```
   
 * 3.Copy & paste the header.php file from the twentytelve folder to the twentytwelve-
   child folder.
 *  Thread Starter [astromaz](https://wordpress.org/support/users/mazharhashmi/)
 * (@mazharhashmi)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/customizing-20-12-theme/#post-4612465)
 * Done. Next …
 *  [batharoy](https://wordpress.org/support/users/batharoy/)
 * (@batharoy)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/customizing-20-12-theme/#post-4612466)
 * Go into appearance themes and preview the new child theme, if it looks right 
   activate it. We will work with the child-theme from here.
 *  Thread Starter [astromaz](https://wordpress.org/support/users/mazharhashmi/)
 * (@mazharhashmi)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/customizing-20-12-theme/#post-4612467)
 * Activated. It looks fine, you also check.
 *  [batharoy](https://wordpress.org/support/users/batharoy/)
 * (@batharoy)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/customizing-20-12-theme/#post-4612468)
 * Looks OK here too except the background color. We will get to that.
    Go into 
   appearance > editor, select the header.php and remove the top line you added 
   then paste the following code just below this tag.
 * > <body <?php body_class(); ?>>
 * `<div id="holy-islam">IN THE NAME OF ALLAH MOST GRACIOUS MOST MERCIFUL</div>`
 *  Thread Starter [astromaz](https://wordpress.org/support/users/mazharhashmi/)
 * (@mazharhashmi)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/customizing-20-12-theme/#post-4612469)
 * Done. I want it to be in center, bold, and in small font, plus its placed on 
   very top, it should have one line break, also there is to much space after, can
   we reduce it also?
 * Edit: bold and center made, also line break
 *     ```
       </br><b><center><div id="holy-islam">IN THE NAME OF ALLAH MOST GRACIOUS MOST MERCIFUL</div></center></b>
       ```
   
 *  [batharoy](https://wordpress.org/support/users/batharoy/)
 * (@batharoy)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/customizing-20-12-theme/#post-4612470)
 * We will use css to style it so you can remove everything but the <div>
 *  Thread Starter [astromaz](https://wordpress.org/support/users/mazharhashmi/)
 * (@mazharhashmi)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/customizing-20-12-theme/#post-4612471)
 * okay i am ready go ahead.
 *  [batharoy](https://wordpress.org/support/users/batharoy/)
 * (@batharoy)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/customizing-20-12-theme/#post-4612472)
 * Add to the style.css in appearance > editor.
 *     ```
       #holy-islam {
           margin: 12px auto 0;
           font-size: 10px;
           font-weight: bold;
       }
       #page {
           margin-top: 20px;
       }
       .site-header h1, .site-header h2, .main-navigation div.nav-menu > ul {
           text-align: center;
       }
       .main-navigation li {
           margin: 0 1.5rem 0 1.5rem;
       }
       .entry-header .entry-title a {
           color: #ff0000;
       }
       ```
   
 *  Thread Starter [astromaz](https://wordpress.org/support/users/mazharhashmi/)
 * (@mazharhashmi)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/customizing-20-12-theme/#post-4612473)
 * Added. I have also removed all the formatting tags in header.php file, this is
   what it looks like now:
 *     ```
       <div id="holy-islam">IN THE NAME OF ALLAH MOST GRACIOUS MOST MERCIFUL</div>
       ```
   
 * Now we have to center it, and apply same to the bottom line of the page:
 * NO GOD BUT ALLAH MUHAMMAD IS MESSENGER OF ALLAH
 *  [batharoy](https://wordpress.org/support/users/batharoy/)
 * (@batharoy)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/customizing-20-12-theme/#post-4612474)
 * Forgot to add `text-align: center;` to the #holy-islam selector, you can add 
   just below the font-weight: bold;
 * And then some more added to the bottom of style.css
 *     ```
       .site-content article {
           margin-bottom: 2rem;
       }
       #colophon {
           margin-top: 0;
       }
       ```
   

Viewing 15 replies - 1 through 15 (of 38 total)

1 [2](https://wordpress.org/support/topic/customizing-20-12-theme/page/2/?output_format=md)
[3](https://wordpress.org/support/topic/customizing-20-12-theme/page/3/?output_format=md)
[→](https://wordpress.org/support/topic/customizing-20-12-theme/page/2/?output_format=md)

The topic ‘Customizing 20-12 Theme’ is closed to new replies.

 * 38 replies
 * 2 participants
 * Last reply from: [astromaz](https://wordpress.org/support/users/mazharhashmi/)
 * Last activity: [12 years, 2 months ago](https://wordpress.org/support/topic/customizing-20-12-theme/page/3/#post-4612500)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics
