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)
  • batharoy

    (@batharoy)

    Your site looks a little messed up. Can you please post the content your header.php file to pastebin and put a link here for me.

    Thread Starter astromaz

    (@mazharhashmi)

    here is the link:

    https://pastebin.com/ahbKEBLX

    I have just added the first line on my own.

    Why you say its messed up?

    batharoy

    (@batharoy)

    OK that’s the part we need to fix. You will need to create a child-theme to edit the header.php. Otherwise it will be erased if the theme is updated.
    Will you need help with that?

    Thread Starter astromaz

    (@mazharhashmi)

    yes sir I would need it. Thanks for your help mate!

    batharoy

    (@batharoy)

    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

    (@mazharhashmi)

    Done. Next …

    batharoy

    (@batharoy)

    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

    (@mazharhashmi)

    Activated. It looks fine, you also check.

    batharoy

    (@batharoy)

    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

    (@mazharhashmi)

    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

    (@batharoy)

    We will use css to style it so you can remove everything but the <div>

    Thread Starter astromaz

    (@mazharhashmi)

    okay i am ready go ahead.

    batharoy

    (@batharoy)

    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

    (@mazharhashmi)

    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

    (@batharoy)

    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)
  • The topic ‘Customizing 20-12 Theme’ is closed to new replies.