The Rowling Theme by Anders Norén Modifications : Change header, footer,sidebar,colors and design

Theme Rowling modifications
Before i shared Full Width and Centralize Header in Twenty Sixteen (2016). Today i am sharing the modifications (using css) of The Rowling Theme by Anders Norén which is a new theme of wordpress.com. It is a cool theme and you can check Rowling THeme Demo. So lets start with the modifications…
1. If you want to change the Header background color of the Rowling theme by Anders Norén

.header-wrapper {
background: #452632 !important;
}

2. If you want to increase Site Title and Site description’s font color, size and font family in the Rowling theme

*** For site title use this code
.site-title {
font-size: 2.5em;
font-weight: 900;
letter-spacing: 2px;
text-shadow: 0 1px 0 #111;
text-transform: uppercase;
font-family: cursive !important;
}

*** For site Description use this code
.site-description {
color: #999;
font-family: ‘Merriweather’, Georgia, serif;
font-size: 17px !important;
font-style: italic;
line-height: 115%;
margin: 11px 0 0 0;
}

3. If you want to show the Site Title and Site Description to be centered

.site-title {
text-align: center !important;
}
.site-description {
text-align: center !important;
}

The Rowling Theme by Anders Norén Header Modification

4. If you dont want to show Top Navigation menu in Rowling theme by Anders Norén

.top-nav {
display: none !important;
}

*** If you want to change the Top Navigation menu background color
.top-nav {
background: darkred !important;
}

Theme Rowling Design change

5.If you dont want to show category names and date in homepage posts

** to hide category in homepage

.home .post-categories {
display: none;
}

*** to hide date in homepage posts
.home .post-meta {
display: none;
}

6. If you want to change font color, weight, size and font family in home page posts of The Rowling Theme by Anders Norén

.home .post-title a {
color: red !important;
display: block;
font-family: cursive !important;
font-size: 20px !important;
font-weight: normal !important;
}

7. If you want to change Homepage post category font color, size and font family

.home .post-categories a {
color: blue !important;
font-family: times new roman !important;
font-size: 17px !important;
}

8. Same way If you want to change Homepage post date font color, size and font family

.home .post-meta a{
color: blue !important;
font-family: times new roman !important;
font-size: 17px !important;
}

9. If you want to change the Navigation menu (Nav menu) background color

.header-bottom-menu > li > a {

background: darkred !important;
}
.header-bottom-menu > li {
border-top: 1px solid darkred !important;
border-right: 1px solid #333333!important;
border-bottom: 1px solid darkred !important;
border-left: 1px solid darkred !important;
float: left;
}
.header-bottom-menu > li.current_menu_item > a, .header-bottom-menu > li.current_page_item > a {
background: darkred !important;
}

.navigation .section-inner, .header-bottom, .nav-toggle {
background-color: darkred;
}

10. If you want to change Navigation menus hover background color
.header-bottom-menu > li:hover > a, .header-bottom-menu > li:hover {
background: olive !important;
border-top: 1px solid olive !important;
}
Theme Rowling Nav Menu modification in header

11. If you dont want to show post category at the top of single post page in The Rowling Theme by Anders Norén

.single-post .post-categories {
display: none !important;
}

12. If you want to change the font color, size and font family of category name which is showing at single post page

.single-post .post-categories a {
font-family: cursive !important;
color: darkred !important;
font-size: 17px !important;
}

13.If you want to change single post title’s font family, color, size
.single-post .post-title {
font-size: 2.5em !important;
font-weight: 900;
line-height: 1.25em;
margin-bottom: 10px;
font-family: times new roman !important;
color: darkred !important;
}
Theme Rowling single post page modification
14. If you dont want to show date and author name in single post page and make the post full width
.single-post .post-meta {
display: none !important;
}
.single-post .post-inner {
width: 100% !important;
}

15. If you want to change sidebar widget title font color,font size,font family and border color

.widget-title {

border-bottom: 2px solid darkred !important;
font-size: 17px !important;
font-weight: 900;
letter-spacing: 1px;
margin-bottom: 15px;
padding-bottom: 3px;
text-transform: uppercase;
color: darkred !important;
font-family: cursive !important;
}

16. If you want to change sidebar widget links font family, font color, size

.widget-content li a {

font-size: 16px !important;
color: darkred !important;
font-family: cursive !important;
}

17. If you want to change the Folder icons color in sidebar widget

.widget_categories li a::before {
color: darkred !important;
}

18. If you dont want to show related post at the bottom of single post page

#jp-relatedposts {
display: none !important;
}

19. If you dont want to show Tags at the bottom of single post page
.single-post .post-tags {
display: none !important;
}


If you have any issue feel free to ask me question here in comments section

OR


Want me to help you personally for CSS Issue?CLICK HERE….

110 Responses to The Rowling Theme by Anders Norén Modifications : Change header, footer,sidebar,colors and design

  1. transformingautism says:

    Hi – thanks for all these hacks. I wonder if you have any thoughts about whether it is possible to change the layout grid on the front page, so that there are 3 posts per row rather than 2, with smaller and standardised thumbnails?

    Like

    • Hi,
      it is possible…but for this the Sidebar from the homepage need to be removed…so that the content section can take the whole space

      Om

      Like

      • transformingautism says:

        Thank you. Might it be possible to use the space available now (with the sidebar still there), but change the grid layout for the posts so that 3 can fit where there are currently 2, with smaller featured images and text?
        This would be really ideal.

        Like

      • Ok
        to show 3(three) column layout maintaining the sidebar in Rowling theme…use these codes

        .posts .post:nth-of-type(3n-1), .posts .post:nth-of-type(3n) {
        margin-left: 5% !important;
        }
        .posts .post {
        width: 29% !important;
        }
        .posts .post:nth-of-type(2n) {
        margin-left: 0% !important;
        }
        let me know if it helps you or not

        Om

        Like

      • transformingautism says:

        Thank you. Yes it works, but the columns are not quite aligned (the middle column on the top row veers to the left and the image on the 3rd column starts lower down. On the second row, the middle column veers to the right – see here – https://goo.gl/p7lZc1 )

        Like

      • HI
        can u share me the site url where you implemented it?
        i will check it and will let u know

        Om

        Like

      • transformingautism says:

        Thank you. The site is http://transformingautism.co.uk

        Like

      • Thanks i am checking now
        Om

        Like

      • HI
        use this code please
        .posts .post:nth-of-type(2n) {
        margin-left: 5% !important;
        }

        before i used the value “0” … it should be 5%
        please let me know
        Om

        Like

      • transformingautism says:

        Thanks very much for this. I have updated it and the first row looks perfectly aligned horizonally, but the 3rd image is still lower than the others.

        But it seems to somehow push the following rows out. The second row starts with a slight indent, which pushes the 3rd image down to the 3rd row.

        But I must say that the theme looks like it will be even better with 3 images per row. It might be a popular update to be able to customise the number of images on each row of the front page – though I don’t know how much work that would entail….

        Like

      • HI
        would u mind to try this please
        .home .posts .post + .post {
        padding-top: 0px !important;

        margin-top: 0px !important;
        }

        let me know what u get
        Om

        Like

  2. transformingautism says:

    Thank you again

    That has sorted out the top row, but:

    – The dividing line between the rows has been removed, so they are very close now
    – The second and 3rd rows still have only 2 columns

    Like

    • HI
      thanks..here in comments section it is tough to help u properly for that issue
      as i am unable to check properly the code and to test it…

      but can u try to block or delete this code
      .posts .post:nth-of-type(2n) {
      margin-left: 5% !important;
      }

      from custom css (where u paste my code) and from style.css?
      Om

      Like

      • transformingautism says:

        Hi. I blocked it, and it didn’t change anything. But I noticed 2 things:

        1 – If I change the width of .posts .post to 28 (instead of 29), this resolves the horizontal alignment and the 3 columns align perfectly.

        2 – If I block the code you mentioned after changing the width, the alignment goes wrong again – so I guess that needs to stay in

        3 – The divider has still not returned. If I change the margin and padding to – say – 10 instead of zero, the padding and the divider return, but the padding only returns from the second image, and the divider from the third.

        This is what the site looks like now (with columns perfectly aligned) – http://goo.gl/QmnNNk

        And below is what the CSS looks like now:

        .posts .post:nth-of-type(3n-1), .posts .post:nth-of-type(3n) {
        margin-left: 5% !important;
        }

        .posts .post {
        width: 28% !important;
        }

        .posts .post:nth-of-type(n) {
        margin-left: 5% !important;
        }

        .home .posts .post + .post {
        padding-top: 0 !important;
        margin-top: 0 !important;
        }

        Like

      • Thats great 🙂
        i think u got it resolved making the Rowling theme 3(three) column

        Om

        Like

  3. transformingautism says:

    Yes – thank you for your support. You could issue it as an update – it really looks good with 3 columns.

    As for the divider, if I change the last bit of code as below, it comes back, but not for the first image (and the second has the padding but not the divider).

    .home .posts .post + .post {
    padding-top: 20 !important;
    margin-top: 20 !important;
    }

    It is ALMOST resolved by removing the .post + (I do not know what this refers to but tried it anyway) to leave the following code. This aligns the top row again, BUT pushes this row down, so there is empty space at the top, and a solitary divider above the 3rd image.

    .home .posts .post {
    padding-top: 20px !important;
    margin-top: 20px !important;
    }

    I am about to leave for Denmark, but will be back on Tuesday, and will pick up any messages again then.

    Thanks again for your great support – I think you just improved an already great theme.

    Like

  4. transformingautism says:

    Sure, but have left home now. Back Tuesday and will send then

    Like

  5. transformingautism says:

    Hi again

    Back now, and here is the code. I have also used the techniques in your post to change the size of the heading text so that it is proportionate to the 3 column display.

    There are 3 things that could perfect this before you publish it:

    1 – Remove the separator from above the 3rd post heading (which pushes the page content down). I’m guessing there must be some logic somewhere that there are 2 columns and so the 3rd image should have a separator above it. Can this be changed so that the separator starts above the 4th image?

    2 – Make the new display more responsive to mobile (currently showing one thin column on the left)

    3 – In your Rowling Demo, all of the photos are cropped so that they are the same size, making the whole theme look very neat. However, mine crop to different heights, making it look a bit slapdash. Can it be set to crop to the same height?

    If you need to see what I mean, my site is http://transformingautism.co.uk/

    Rowling is now by far my favourite blog theme (now that it is 3 columns), and these changes would just make it perfect.

    Thanks

    Guy

    /*
    MAKE 3 COLUMNS
    */
    .posts .post:nth-of-type(3n-1), .posts .post:nth-of-type(3n) {
    margin-left: 5% !important;
    }

    .posts .post {
    width: 28% !important;
    }

    .posts .post:nth-of-type(n) {
    margin-left: 5% !important;
    }

    .home .posts .post {
    padding-top: 20px !important;
    margin-top: 20px !important;
    }

    /*
    RESIZE HOMEPAGE TITLES ACCORDINGLY
    */
    .home .post-title a {
    font-size: 22px !important;
    }

    .home .post-categories a {
    font-size: 13px !important;
    }

    .home .post-meta a {
    font-size: 13px !important;
    }

    Like

    • HI Guy
      thanks
      sorry for the late response
      so you want the 3 column to be mobile responsive..
      am i right?
      let me know
      Om

      Like

      • transformingautism says:

        That would be great if it is possible. It doesn’t necessarily need to be 3 columns on the mobile, but at the moment, there is sometimes only one very thin column down the left side.

        Also, it would be great to solve the issue of the divider over the 3rd image.

        It is great – I am just seeing if we can perfect these final things (and the standardised image sizes)

        Like

      • HI Guy
        to implement mobile responsiveness in Rowling theme (in 3 column layout) wrap the code i shared and u used in this

        @media only screen and (min-width: 760px) and (max-width: 2000px)
        {
        ALL YOUR RELATED 3 COLUMN CSS CODE WILL BE HERE
        }

        please let me know if it helps you or not

        Om

        Like

      • transformingautism says:

        Yes, that works perfectly, thank you. Now the theme looks good on all devices!!! Getting better and better.

        Did you understand what I meant about the divider over the 3rd image? You can see what it looks like at http://transformingautism.co.uk

        Like

      • HI Guy
        you mean to remove the top border from every 3rd image ( i mean in the 3rd column posts)

        please let me know
        Om

        Like

      • transformingautism says:

        No – just the one on the top row. There are dividers above all of the images on the front page to separate the rows from each other. It looks good. But they start on the third image – the first 2 do not have them because they were intended to be on the top row. When it was a 2-columns, this worked exactly as it should, but now that it is a 3 column display, there should be no divider over the 3rd image either. Now the dividers over the images should start on the 4th image.

        Like

      • HI Guy
        please try this
        .posts .post:nth-child(3) {
        border-top: none;
        }

        Please let me know what u think.

        Om

        Like

      • transformingautism says:

        You’ve done it again!! It has gone now. Thank you.

        There is still quite a big gap between the blue menu and the start of the images, and if this could be closed that would be great, but the requests are getting smaller and smaller now…

        The only other one was about standardising the size of the featured images on the front page.

        Like

      • HI Guy
        to reduce the space between blue menu and the featured images in your Rowling theme
        try this
        .home .content {
        padding-top: 0px !important;
        }

        Regarding the featured image size
        actually i can share css to resize them..but some images quality may be hampered
        Om

        Like

      • transformingautism says:

        Perfect. It works and now looks great again.

        Yes, please share the css to resize them. Is this the same css you used on your sample site where the images were all identically sized and looked great?

        Like

      • Hi Guy
        please try this

        .home #posts img {
        width: 250px !important;
        height: 150px !important;
        }

        OM

        Like

      • transformingautism says:

        Hi again

        Sorry – have just noticed an anomoly. The front page is fine, but the category pages (and the tag pages) are still pushed down by a divider right across the top. This is what it looks like – http://transformingautism.co.uk/category/autism/

        I guess it is just a question of adding something simple to the CSS to make it apply to these pages too?

        Like

      • HI Guy
        would u mind to try this please?
        .archive .posts .post + .post {
        margin-top: 0px !important;
        padding-top: 0px !important;
        }

        *** i prefer u checke by adding a new post to check the 6th post is working fine or not
        Om

        Like

      • transformingautism says:

        Thank you. It works to bring the top row (and the second row) into line, but the dividing line is still over the top row, but not over later rows….

        Like

      • Hi Guy
        would u mind to remove my previous code and use this code please
        .archive .posts .post:nth-child(3) {
        border-top: none;
        margin-top: 0px !important;
        padding-top: 0px !important;
        }

        .archive .page-title {
        border-bottom: none !important;
        }

        please let me know what you get

        Om

        Like

      • transformingautism says:

        Great – this sorts it out. Thank you again!!!

        Final (we hope) code is:

        /*
        MAKE 3 COLUMNS
        */
        @media only screen and (min-width: 760px) and (max-width: 2000px) {
        .posts .post:nth-of-type(3n-1), .posts .post:nth-of-type(3n) {
        margin-left: 5% !important;
        }

        .posts .post {
        width: 28% !important;
        }

        .posts .post:nth-of-type(n) {
        margin-left: 5% !important;
        }

        .home .posts .post {
        padding-top: 20px !important;
        margin-top: 20px !important;
        }

        .archive .page-title {
        border-bottom: none !important;
        }

        .archive .posts .post:nth-child(3) {
        border-top: none;
        margin-top: 0 !important;
        padding-top: 0 !important;
        }

        .posts .post:nth-child(3) {
        border-top: none;
        }

        .home .content {
        padding-top: 0 !important;
        }

        .home #posts img {
        width: 250px !important;
        height: 115px !important;
        }
        }

        /*
        RESIZE HOMEPAGE TITLES ACCORDINGLY
        */
        .home .post-title a {
        font-size: 22px !important;
        }

        .home .post-categories a {
        font-size: 13px !important;
        }

        .home .post-meta a {
        font-size: 13px !important;
        }

        Like

      • Pleasure Guy 🙂

        Om

        Like

  6. transformingautism says:

    Perfect. I set it to 250×115, as many of the photos had been cropped to that size anyway. Only only was distorted, so I cropped it to that ratio and it now appears perfectly.

    Thank you – we now have a perfect Rowling theme!!!! I hope others can appreciate it too.

    In case you need it, the entire code is:

    /*
    MAKE 3 COLUMNS
    */
    @media only screen and (min-width: 760px) and (max-width: 2000px) {
    .posts .post:nth-of-type(3n-1), .posts .post:nth-of-type(3n) {
    margin-left: 5% !important;
    }

    .posts .post {
    width: 28% !important;
    }

    .posts .post:nth-of-type(n) {
    margin-left: 5% !important;
    }

    .home .posts .post {
    padding-top: 20px !important;
    margin-top: 20px !important;
    }

    .posts .post:nth-child(3) {
    border-top: none;
    }

    .home .content {
    padding-top: 0 !important;
    }

    .home #posts img {
    width: 250px !important;
    height: 115px !important;
    }
    }

    /*
    RESIZE HOMEPAGE TITLES ACCORDINGLY
    */
    .home .post-title a {
    font-size: 22px !important;
    }

    .home .post-categories a {
    font-size: 13px !important;
    }

    .home .post-meta a {
    font-size: 13px !important;
    }

    Like

  7. transformingautism says:

    Hi again – This has been working really great on my site, but now that I am increasing the number of posts, I notice that the front page only hosts 10 stories, and the 11th goes onto a second page. Now that there are 3 columns, 10 stories makes 3.333 rows – so the final row has only 1 story on it and the rest of the row is empty, which looks strange. Is there a way to change the cut-off point that triggers a new page. It would be good if this could be either 9 or 12 stories. Best Wishes
    Guy.

    Like

  8. OTJ Media says:

    Trying to augment the CSS to remove:
    – the featured image on ALL individual posts (displays as thumbnail top/middle)
    – the author comment/live search link on ALL individual posts

    Found the elements using Google Developer but challenged in the specific naming convention in applying the CSS customization.

    Thank you in advance for any help.

    Like

    • HI
      thanks
      sorry for the late
      so regarding your issue
      1. To remove the Featured image from single post page in Rowling theme use this code

      .single .post-image {
      display: none !important;
      }

      and would u mind to clarify what you mean by

      “– the author comment/live search link on ALL individual posts” ?

      Om

      Like

      • OTJ Media says:

        You are a rock star!!! Thank you! Spend the better half of a week trying every permutation to try and augment that setting via CSS

        The second request is the author v-card/comment box that is located at the bottom of every post in this Rowling theme. I have turned off all comments yet every post has a ‘dialogue box’ from the post author (me) including a live link on author’s name to search for all posts by author which in this site is every post and unwanted.

        To sum; Wish to have neither the comment box and author name display on any/every post.

        Thanks!!!!
        Dave

        Like

      • HI Dave
        thanks…sorry for the late response
        To remove the black author box at the bottom in single post page in Rowling theme use this css code

        .single footer.post-footer {
        display: none;
        }

        Om

        Like

  9. OTJ Media says:

    One related item; when I added the CSS to turn off the featured image on each post, the ‘related posts’ at bottom of post is also gone.

    The following settings are checked in the Admin Portal:

    ==========================
    Show related content after posts

    Show a “Related” header to more clearly separate the related section from posts

    Use a large and visually striking layout

    ========================

    When I applied the CSS script, this is not displayed in any format
    Thanks!
    Dave

    Like

    • OTJ Media says:

      Actually scratch that last post re ‘Related Content’ as the lack of display was due to no content related to a particular post and not the case when I looked at 4 or 5 others.

      I would like to move this from the bottom of the post to the display vertically on the left side of the post next to the body of the post.

      Sorry about any confusion.

      Thank you in advance!!

      Like

    • Hi Dave
      To remove the featured image at the top of single post in rowling theme use this code….
      .single-post .post-image {
      display: none !important;
      }

      ***** this code is not or will not hamper the “Related” posts at the bottom.

      Like

  10. OTJ Media says:

    Ha! – upon a deeper review of posts in multiple categories, the related content is now not being displayed. Ideally want the related content displayed vertically next to body of post as mentioned above.

    Sorry about the confusion but needed to refresh the site opened in a different tab to view post display with most recent changes.

    Any help would be welcome.

    Like

  11. OTJ Media says:

    and it seems like the related posts display is category specific as it displays in some and not others – site has 16 categories.

    sorry about confusion but lots of content in the site and there are at least 3 categories that do not display the related content while at least 6 do. Strange….

    Like

  12. OTJ Media says:

    Not sure if the site just needed more time to completely refresh but now within all of the categories, all posts display the related content posts on the bottom of the post.

    Still interested in move up to left side and have the related content vertically display on the left side of post body.

    Like

    • OTJ Media says:

      OK, went it and input CSS:
      ———————————–
      .single .post-author {
      display: none !important;
      }
      ———————————–

      and post-author is no longer displayed. Seems the ‘important’ component was the missing secret sauce from my earlier tries.
      Why is this needed?

      Like

  13. OTJ Media says:

    Still interested in changing to a vertical display on related posts as well

    Like

  14. OTJ Media says:

    OK – I have used Google Developer to find the php files for the various elements on site

    For the related posts in php:
    ===================

    ======================
    Just cannot figure out how to move to vertical side and make changes to template. If that is beyond the goals of your support, I completely understand.

    Like

  15. OTJ Media says:

    I successfully used the following CSS
    ==========
    .single-post .post-inner {
    width: 100% !important;
    }
    ============
    to address white space on left side of post

    still trying to address
    – image sizing whendisplaying on front page
    – single post header align center

    Like

    • HI
      thanks
      actually if i use css to make the homepage images same height than it would not be a good idea….
      Regarding single page header align issue
      *** which one u r referring? header image or title?

      Om

      Like

      • OTJ Media says:

        I figured out that Rowling is best with a 2:1 image ratio and I could either select images in that ratio or edit the images in the featured image media file.

        Going to keep the post title left aligned.

        The one outstanding current issue is the space allotted to the right widget when viewed on desktop. Seems like too much blank space, not sure if the body can be narrowed to eliminate that spacing.

        Like

  16. inscientist says:

    Hello, I have just added a few more pages to my site. How do I get these pages and their links to also appear on the navigation bar? Sorry, I am very new to this. Thanks!

    Like

  17. Jon B. Ledger says:

    Is it possible to hide the author, published by at the bottom of posts?

    Like

  18. Hi, Could you let me know how to change the hover color for the sub menu items? The text disappears as the hover color is same as background. Website: http://www.thebestdealsclub.com/

    Like

  19. Hi Om,

    Is there a way to display an ad on the right side of the header, next to the site name?

    Like

  20. trillvo says:

    I cant figure out how to use my own header with this theme. or if I can just make the logo appear bigger. it just comes out looking pixelated. ideally I would like to use my own image header with this theme. is there a code for this?

    Like

  21. trillvo says:

    cool, just let me know (:

    Like

  22. ruthmaguire says:

    Hi – could you let me know whether it is possible to cap the number of posts that appear on the homepage, i.e. to limit how far down people can scroll? Thank you.

    Like

  23. Hello, how can I change the sidebar? My sidebar consists of a search form, recent posts, categories and an archive. But if I go to widgets, I do not see these elements at the sidebar option. My website is http://www.mamalifestyleblog.nl. I hope you can help me.

    Like

  24. mamalifestyleblog says:

    And how can I delete the name Anders Noren from the footer?

    Like

  25. rocket pilot says:

    Hi

    I have 0 knowledge in coding. My problem is I misspeled a Category in Rowling theme (russia instead of Russia) and I can’t change it… how to remove or correct a Category spelling?

    Thanks in advance?

    Tom

    Like

  26. Ken Sweeney says:

    Hi

    Is it possible to enlarge the Logo on the top right?
    I tried this but the result was that the logo was larger but the quality had diminished and was very blurred.
    a.site-logo-link img {
    width: 128px;
    height: 128px;
    }

    .site-title { padding-top: 20px; }
    Is there any way to increase the size and keep the quality?
    This is my site.
    https://europaunited.eu/

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: