WordPress Tricks

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….

231 thoughts on “The Rowling Theme by Anders Norén Modifications : Change header, footer,sidebar,colors and design”

  1. 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?

    Liked by 1 person

      1. 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

      2. 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

        Liked by 1 person

      3. 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

      4. 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

      5. 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

  2. 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

    1. 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

      1. 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

  3. 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. 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

      1. 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

      2. 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

      3. 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

      4. 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

      5. 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

      6. 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

      7. 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

      8. 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

      9. 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

      10. 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

      11. 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

  5. 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

  6. 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

  7. 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

    1. 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

      1. 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

      2. 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

  8. 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

    1. 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

    2. 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

  9. 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

  10. 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

  11. 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

    1. 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

  12. 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

  13. 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

    1. 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

      1. 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

  14. 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

      1. hey! i ended up getting so frustrated i just changed my entire theme. the logo size i would prefer is 800 x 384 but it seems the theme restricts the logo to 80 pixel height. i had found a code to resize but it left my logo looking incredibly pixelated, if you could fix this with a code for me i would love this theme.

        Like

    1. HI
      thanks
      you can show any number of posts in homepage or blog page..
      just go to your dashboard > Settings >Reading> and from that window check “Blog pages show at most” option …from there u can select the number u want to show

      Om

      Like

      1. Hi there – thank you so much for your reply. Unfortunately, however, I cannot seem to see an option called ‘Reading’ under my settings. My headings are ‘General – Writing – Discussions – Analytics – SEO – Import – Export. Could you help me to find the ‘Reading’ section?

        Thanks in advance.

        Like

      1. Hello, @allaboutbasic ,
        This page is very helpful for me to solve my rowling theme problems so thank you very much indeed!
        -May I ask how can I pull the tumbnail images of RSS contents for my sidebar in the homepage? (medyaroportaj.com) I could pull the RSS text contents, but couldnt pull the images.
        -Secondly, I have a few category titles. One of is empty now, no contents and I would like to display just an RSS content of another website in that category title. How can I do it?

        Like

      2. Yes, using that widget, i guess images will not be viewable,
        i prefer you check RSS plugins for that
        as you are using business plan, you should be able to install plugins

        OM

        Like

      3. Thank you, i did search some of them but always meet RSS plugin solutions for ourselves websites to other websites. Not from other websites from mine. So do you have any suggestion for plugin?

        Like

    1. Hello again,
      You had asked my wordpress package, it is premium not business, i had said it wrong. pardon me. So as you suggested to me “the featured images in Rss” plugins. It needed to be passed to business plan. Do you have any other suggestion?
      Thank you for your support

      Like

  15. 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

  16. 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

  17. Hi yes I am using wordpress.com free site. But I can upgrade to Premium is I need to. I know there is an option to use Footer Builder with wordpress.org, but wondered if there is a way with wordpress.com. thank you

    Like

  18. allaboutbasics, I have tried severally to change my header background color with the code you provided above without success. Pls, is there any thing you could suggest to make this achievable for me? Thanks..

    Like

    1. Hi Anu
      i have checked your issue, as you are using wordpress.com free hosted site…so.. it is tough to implement your issue properly..
      but..
      you can show your blog posts in 2 pages ..1 in homepage and in anyone of your other pages…so.your homepage and that page will be similar

      will that be ok to u? i can tell you the technique if you want

      let me know
      Om

      Like

      1. Hi Om,
        Then I have few questions please:
        1. Do you think I should go for the paid premium options of the same theme?
        2. Can I easily move the content I have built to wordpress.org?
        3. If the above two are not to be wise options, could you please show me how to reflect a blog post I create in homepage to reflect on other pages? Perhaps that would be a very effective solution.

        Thanks much for your quick response.
        Anu

        Like

  19. I am trying to change the color of my main navigation menu hover color. Number ten above, Right now its defaulting to the blue from the theme, I went in to the style sheet and changed the color or the menu but I want to change the hover now. I cant find header-bottom-menu anywhere in the coding and I have inserted my new hex code almost everywhere that I see “li:hover” and nothing is sticking for my hover on the main menu…..pls help it is driving me bonkers

    Like

      1. Hi
        sorry for the late response….
        i have checked your issue
        one thing can be done….

        1. the top menu which is not showing in mobile… add those menu item in the menu which is showing in mobile but let them not to show in desktop
        2. so.. those menu items will not be visible in desktop…but will be visible in mobile

        u got the tricks?

        let me now

        Om

        Like

      1. Hi

        Yes, I understand. But the menus have a diferent importance and it’s interessant tha they don’t appear in same localization.

        Like

  20. I am having problems with the navigation on smaller devices like tablets, smartphones.

    If the menu has many items, the list becomes very long because all menu items are shown at the same time:

    Apart from that, it would be great if the theme could only show 1st-level items at the beginning and 2nd-level itmes only, if the relevant 1st level item is selected.

    Maybe, you have a solution for that?

    Like

    1. Hi allaboutbasic,

      I was able to add an image as the header to the Rowlings theme but it is too big, some of the image is hidden, and does not look good on mobile devices.

      https://tomkerasias.com/

      This is what I did:
      =====================================
      /*
      Welcome to Custom CSS!

      To learn how this works, see http://wp.me/PEmnE-Bt
      */
      .header-wrapper {
      background-image: url(‘https://tomkerasiascom.files.wordpress.com/2018/02/facebook-cover.png’);
      background-size: cover;
      background-position: center 15px;
      height: 660px;
      background-repeat: no-repeat;
      }
      ===========================================

      If possible, I would like to reduce the image to about 1/3 its size so it is all visible and have it look better on mobile devices.

      Any suggestions would be greatly appreciated.

      Thank you.

      Like

      1. Thanks
        please check this code

        @media (min-width: 240px) and (max-width:560px) {
        .header-wrapper {
        height: 190px;
        background-size: 100% !important;

        }}

        and check your site in mobile device
        let me know if it is ok?

        Om

        Like

  21. Hi There! Is there any way to change the margins in the theme so my posts show closer to the left side of the page? The theme seems to have it set to have a lot of space between the left side of the page and where the post starts.

    Like

  22. So it looks like I need a little more help. I was able to change the color on the navigation header to the coral that I wanted and the hover color to the tomato color. Unfortunately I can’t figure out how to change the sub headings and sub headings within the sub headings to the LightSalmon color I want. The header is also causing me issues trying to look more aligned. What I mean by that is I have 7 categories in the header now (which I will end up adding more later) but they are all bunched over to the left side and I have a large blank box on the right side. Any help you can give would be much appreciated! Thank you! https://morediylove.com/

    Like

      1. Yes. Change the blue color of the drop downs and make so that there isn’t a lot of empty coral color space on the right side of the category menu.

        Like

      2. HI
        try this code

        @media (min-width: 851px)
        {
        .header-bottom-menu ul {
        background: red !Important;
        }
        }
        let me know if it helps

        *** it will change the submenu background color

        Om

        Like

      3. Submenu background color changed perfectly! Thank you. The spacing on the menu bar didn’t change at all. This is what I put in:
        @media (min-width: 851px)
        {.header-bottom-menu ul {
        background: red !important
        }}
        Is that right?

        Like

      4. Ok. Yes, that’s exactly right. If I could spread them out more. Then when I add more categories, I can adjust it according. Thank you again for all you help!

        Like

  23. Hi! I want to change the site-title font type, but I don’t know where do I have to paste the code you wrote 😦 Can you help me? Thanks a lot!!

    Like

  24. How can i change the color of the template “white” area left from the .Content area? I would like to change the color of this to black (or something else). I manage to get the .content in the middle to black by using the following code.

    .content {
    background: #000000;
    }

    Like

  25. Hi, Can I get rid of the problem below???
    When I installed Rowling theme on my WordPress blog, all the post content & images move to the left in the WordPress editor. Also, the images look blurry now in the editor & the blog. You can check the screenshot here: https://fulltechhelp.com/screenshot-127/
    I really love to use Rowling & don’t want to change it. So please let me know how can I fix that error.
    Thanks!
    My site URL: fulltechhelp .com (remove space)

    Like

  26. Thanks for this article! Is it possible to include an excerpt below post titles when not using featured images? It seems that nothing happens when using excerpt from WordPress options.

    Like

  27. Hi, would you be able to help me with my footnotes and endnotes on my website: jewishbelief.org , i want to make them clickable. The posts already up already have that feature because they are imported from another site, but new posts on this web won’t have clickable footnotes. The plugins for this feature don’t seem to work. Thank You!!!

    Like

      1. Thank you for getting back. I would like to make that when a footnote is clicked, it will show the footnote without having the need to scroll to the bottom. So I got a plugin called inline footnotes which does that job. However, it only does that with footnotes made manually with the special html code they give. The problem is that my footnotes aren’t done manually rather are copy pasted from microsoft word. It’ll be an almost impossible job to mannualy reformat every single footnote. Is there a way to get the plugin inline footnotes to recognize a footnote pasted from Word? Thank you!

        Like

      2. When you click one of the posts, you’ll see footnotes in the text. They are blue numbers that stick out

        Like

      3. If you click on a article, you will find noticable blue numbers. Those are the footnotes I’m refering to.

        Like

  28. Hi, first off all thank you so much for all, i learned a lot from your site. On my blog jewishbelief.org there’s a noticeable small line under each post’s name on the homepage. Is there a way to get rid of that odd looking small line?

    Like

      1. Hi, I realized now that this same small line is under all the articles except for those on the homepage. Is there a way to get rid of em?

        Like

  29. Hi, how do I remove “posted by…on” from my posts. I’ve managed to get rid of the date but not the author’s name and “on”. see my web at jewishbelief.org Thank you!

    Like

  30. Hi, could you tell me how to reduce the padding / the space between the top-secondary menu and the Logo-image (and maybe below the Logo Image also? Thank you for your great Service!!!

    Like

      1. Perfect. Thank you very much. I like to use the Rowling theme from now on. Great to know that you are specialist for it and that I can ask you if needed!

        Like

  31. Hi Omprakash, I would like to ask one more question. When I select the Gallery Post format in Rowling I can only click/select ONE Image (in the Image Library) from the featured image section. Do you know how to select more than one and have them shown in the featured image area? Thanks!

    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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s