Web Development & WordPress

Theme For Curators Baskerville 2 By Anders Norén :CSS Modifications

allaboutbasic

Theme baskerville documentation and modification

Baskerville 2 is a dynamic, grid-based theme for curators. It’s the perfect way to showcase your posts, videos, images and galleries, and share your favorite quotes and links.

Here i am sharing css code to style your Baskerville theme. To use my provided css  I prefer you use  Simple Custom Css plugins ( if you have your own domain and hosting) .

You can downloand the Baskerville 2 theme from here.

So You can use my shared code and ask question in the comments section.

Question 1 : How to change the black Navigation background to different color in Baskerville theme?

Answer: Use this  css code

.bg-dark {
background-color: darkred !important;
}

Question 2:  How to change Navigation menu font color, font size and font family?

.main-navigation li > a {
color: white !important;
font-size: .85em;
font-weight: 700;
text-transform: uppercase;
}

*** Currently, navigation menus in Baskerville theme shows capital letter. If you change the  “text-transform” value in css to this  “text-transform: normal;”   the menu items will be showing as Normal and not capitalize

To change the menu separator color use this css code

.main-navigation li::before {
color: white !important;

}

Question 3: How to change menu font color while hover in Baskerville theme?

.main-navigation li > a:hover {
color: yellow !important;
}

Question 4: How to change menu item background color while hover

.main-navigation li:hover {
background: darkred !important;
}

Question 5: How to change Social icons color?

.jetpack-social-navigation-svg .icon {
color: darkred;
}

also

How to change social icons hover background color?

.jetpack-social-navigation-svg .icon:hover {
color: white !important;
}

Question 6: How to change Site title’s font color, size and font family in Baskerville theme?

.site-title, .site-title a {
font-family: “Pacifico”, sans-serif;
font-size: 2.25em;
text-align: center;
color: darkred !important;
}

Also

How to change Site title’s hover color?

.site-title a:hover {
color: blue !important;
}

Question 7 : I don’t want to show post date, comments at the bottom of homepage posts grid

Answer: Try this code

.post-meta.clear {
display: none !important;
}

Question 8 : How to change the color, font size and font family of  front page post grid date, comments etc

.post-meta.clear * {
color: darkred !important;
}

Also, If you want to change the hover color  of the post date in Baskerville theme

.post-meta.clear :hover {
color: yellow !important;
}

Theme Baskerville footer credit section modification

Question 9: If you want to remove  Powered By WordPress and Theme  by Anders Noren in Baskerville theme

.credits-inner.section-inner {
display: none;
}

Or

If you want to make footer Credit Section  ( “Powered by WordPress” section)  background color changed

 .credits.section.bg-dark.small-padding {
background: transparent;
}

To change the Footer Credit section font color, font family and font size

 .credits.section.bg-dark.small-padding * {
color: darkred !important;
font-family: cursive;
font-size: 15px;
}

Question 10: How  to replace  “Powered by WordPress” and theme info in footer credit section with my own company info.

Answer:

1. At first go to  Appearance > Editor  section

2.  Now  in the right side you will see many file names… click on footer.php    (Please check the image attached)

 Footer Powered by WordPress replace by Copyright info

Question 11: How to change post and page title’s font color, font size and font family in Baskerville theme

 .post-header .post-title a, .post-header .post-title {
color: #2B3542 !important;
font-family: cursive !important;
font-size: 28px !important;
}

 Post and page title modification and gap reduce

Question 12: How to remove gap  just above and below the post and page title in Baskerville theme

.post-header {
padding-top: 12px !important;
padding-bottom: 12px !important;
}

Question 13: How to disable comments in posts, pages or from other post types in Baskerville theme

Answer: Use Disable Comments plugins  … this will help to remove comments form and comments not to show in pages, posts etc.

Change link color css

Question 14: If you want to change the link color from green to different one in Baskerville theme

Answer:

body a {
color: darkred !important;
text-decoration: none;
}

269 thoughts on “Theme For Curators Baskerville 2 By Anders Norén :CSS Modifications”

    1. Hi Dan
      if you are using wordpress.com free hosted site…then you will need to purchase CUstom Design facility from them…or there are some plan you can check in your Dashboard Store > Store

      Om

      Reply

      1. Hi Om, and thank you so much for your help. I have the personal WP plan and it does not include any CSS customization, I guess I need the Premium version, right?

  2. Thanks Om. Would this theme allow me to set up an image as a footer? I know the widget area has 3 columns, can I alter it with CSS? My image is 1200×300.

    Reply

  3. Hi Om, I have another question for you: The header on this theme is made to resize depending on the browser, is it possible to make it fix? I am having trouble with the way it looks on a pc
    thanks

    Reply

      2. so..u want the header image..dandradiss physiomental ..showing good in mobile version..right?

        i found currently it is not showing fully in mobile
        let me know
        Om

      7. Hi
        for your ipad view please try this code first

        @media (min-width: 768px) and (max-width: 1199px) {
        header.header.section.small-padding.bg-dark.bg-image {
        background-size: 100%;
        }
        }

        let me know if it helps

        Om

      12. you are right, my wrong, sorry, it seems to work now….awesome…can you write something like that for the explorer on the pc? I can have a friend check it for me…and by the way, I would be glad to pay you some :)

      15. hi
        try this code
        @media (min-width: 1200px) and (max-width: 115555599px) {
        .header {
        height: 394px !important;
        background-size: 100%;
        padding: 0px !important;
        width: 100% !important;

        }
        }

        let me know if it helps

        Om

      18. that is the view on the IPad, I don’t have a pc but I know that it cuts part of the bottom of the header, right in the middle of the word “dynamish”, as for the Iphone it looks fine

      19. the link you have shared is not full…i mean.. you seems share me the link of ur ipad directory?
        please upload the image in wordpress media librar y and share me the url of the screenshot please

        Om

  4. Hello, I have a problem, I want the header imagen just white, but, when I up a white Image you see like gray color. Can you help me? Thanks

    Reply

  5. Hi Om, I just wanted to say I love this theme! You are very talented and creative. Thank you for providing this and the CSS instructions to go along with it.

    Reply

  6. Hi – How do you change the height of the navigation bar, as well as the footer bar?

    Also, how do you change the colors of the arrows that appear for a drop submenu – both the arrow on the main menu, and the large arrow on the submenu?

    Reply

    1. Hi Matt
      to change the big arrow color in submenu try this code

      .main-navigation ul li > ul:before {
      border-bottom-color: red !important;
      }
      to change the main menu down arrow color

      .main-navigation .has-children > a::after, .main-navigation .menu-item-has-children > a::after, .main-navigation .page_item_has_children > a::after {
      border-top-color: red !important;
      }

      To change top menu section height

      .search-icon {
      height: 43px;
      }

      .search-icon:before {
      line-height: 44px !important;
      }

      .main-navigation ul li > ul {
      margin-top: -6px;
      }

      *** to change footer section height
      i prefer u add some contents first in your site.. that footer issue should be solved if you add contents

      Om

      Reply

      5. Matt
        i missed this code

        #menu-primary > .menu-item > a {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        }

        please let me know

        Om

      6. Hi Om, this still does not fix the header thickness issue.

        Also, quickly, how do I change this for hover?

        .main-navigation .has-children > a::after, .main-navigation .menu-item-has-children > a::after, .main-navigation .page_item_has_children > a::after {
        border-top-color: red !important;
        }

      9. Also, the header thickness only works on the computer web browser – the search icon is misplaced when it’s reduced to the mobile dimensions. Any thoughts?

      10. Hi Matt
        for mobile search menu issue try this code

        @media (min-width: 240px) and (max-width: 560px)
        {
        .search-icon:before {
        line-height: 68px !important;
        }
        }

        let me know if it works
        Om

      11. Hi Om, this works for the cell-phone mobile version, but the intermediary version (ipad?) still has the same problem. Also, the mobile and intermediary version still have a large navigation section – try dragging your browser window to be smaller horizontally and you will see my issue.

        I’d be okay with removing the search function alltogether, it is not entirely necessary for me. Could you help with that?

        Also, I still have issues with hover colors for this code:
        .main-navigation .has-children > a::after, .main-navigation .menu-item-has-children > a::after, .main-navigation .page_item_has_children > a::after {
        border-top-color: red !important;
        }

      12. Matt
        replace my previous code with this

        @media (min-width: 240px) and (max-width: 860px)
        {
        .search-icon:before {
        line-height: 68px !important;
        }
        }

        i will check the other issue after this

        Om

      15. Hi Matt
        to change the hover color of menu items….try this code

        .main-navigation li a:hover {
        color: blue !important;
        }

        let me know if it works

      16. Hi Om,

        That changes the text, but not the down arrow for the items in the navigation bar with a submenu. It stays it’s default color…

      5. Hi Debosmita
        eta try korun

        .blog-title a {
        color: #fff;
        text-transform: uppercase;
        }
        h3.blog-description {
        color: white !important;
        font-size: 12px !important;
        text-transform: uppercase !IMPORTANT;
        }

        Kind Regards
        Om

  9. Hello,

    Can you tell me how I can move the position of the social icons on the header please? They are a little too high for me.

    Thanks,
    Jimmie Dee

    Reply

      2. Sorry, I should have said, I just want to be able to move them down a little. Also, is there a way to move the title and tag line as well. Just to reposition them in the header.

        Many thanks,
        Jimmie

      3. Hi Jimmie
        to move down the social icons in baskerville theme

        .menu-social-menu-container ul li {
        padding-top: 34px !important;
        }

        to move down tagline

        .site-description {
        margin-top: 38px !important;
        }

        To move site title

        .site-title {
        margin-top: 18px !important;
        }

        please let me know if it helps
        Om

      4. Super! Thank you. I add this in the “additional css” page? Sorry. I am very new to all of this and it’s been a big learning curve.

        What does the !important mean?

        Thanks,
        Jimmie

      6. Hello,

        The code to move the social menu icons didn’t quite work the way I expect. It has appears to have made the header height bigger. This moved the menu down and the header image to increase in size rather than just move the social menu icons.

        All the best,
        Jimmie

      7. Goodmorning Jimmie
        yes.. i also noticed that.but i am not seeing any other better option for that..
        but.would u mind to implement it so that i can check some more?
        Om

      8. The other code snippets also appear to have a similar effect. Whilst they do move the items, they also drop the menu down. It’s almost as though the theme has been coded with relative value rather than absolute.

        All the best,
        Jimmie

      9. Hello Om,

        I have added the code for the social menu for you to investigate further.

        Many thanks,
        Jimmie

      10. HI Jimmie
        would u mind to try this code please?

        .header {
        background-position: 62% 53% !important;
        padding: 30px 0px !important;
        }

        let me know if it helps
        Om

      11. I’ve added the extra code. I certainly makes a difference and I have moved the social media icons lower making them clearer to find. However, this code only works on a PC browser and has no effect on tablet or phone.

        Many thanks,
        Jimmie

      15. Will do a little later. Where do you want it as the theme takes just the one image and resizes for all formats I thought.

        All the best,
        Jimmie

  11. Hi there, is there any chance you could give a demo or an screenshot of how Baskerville 2 Theme would preview on WordPress once I add the WooCommerce Plugin. I would like to install it on this theme as I quite enjoy it, however needs to integrate well with WooCommerce for obvious reasons. Would appreciate the help. Thanks Charlene

    Reply

  12. Hello Om!

    Do you have some code you could share for Baskerville-2 theme that would allow me to use a different image for each device please? That way I can format my image to correctly fit on each device.

    Thanks,
    Jimmie

    Reply

  14. Hello Om,

    Here’s one for you. I have added Pinterest to the social menu but it shows as a link symbol of a chain rather than the Pinterest logo. I am guessing the theme is missing the graphics file for the Pinterest logo. Do you know how to fix this?

    My page is http://www.jimmiedeesairguns.com.

    You can see I have added facebook, youtube, email and instagram. All of those have the correct logo associated with them.

    Thanks,
    Jimmie

    Reply

    2. In the spirit of helping each other, I thought I would share the solution that I found…. make sur you use pinterest.com not pinterest.co.uk!

      Reply

  15. Thank you for what you’ve done here! I’ve gotten very close to the look I’m going for. Just a few more things I need help with:

    1. Change the font family in the main nav bar
    2. Change the background color of the footer.

    I’ve looked through your entire post and read all the comments and didn’t see either of these mentioned, so forgive me if I’ve overlooked it!

    Thank you again!

    Reply

    1. Hi
      thanks, sorry for my late response

      1. to change the font family in the main nav bar, try this code

      .main-navigation li > a {
      font-family: cursive !important;
      }

      2. To change background color of footer, try this code

      div#footer {
      background: darkred !important;
      }

      let me know if it helps

      Om

      Reply

      1. Worked wonderfully. I want the footer to be white so all the text is disappearing when I change the background. What’s the code to change the text color of the footer?

        And, is there any way to change the color of the the search bar widget that I have down there?

        Thanks!

      2. Hi
        sorry for the late reply
        would you mind to try this code please?

        div#footer p, div#footer a, div#footer p, div#footer h3 {
        color: red !important;
        }

        let me know if it helps

        Om

      3. Hi, Om!

        Thanks for your help so far! Once I get one thing fixed to my liking 5 more pop up. Can you help me with any of the following:

        1. Search Bar: It turns the right color when you click on it, but I would like it to be that color all the time.

        2. Other buttons like “Older posts”: can I change the text of these. I’d like all caps and possibly change the font to a sans-serif.

        3. Footer widgets: How can I make the text of these three all look the same? It looks like the middle one is defaulting to bold and the other two aren’t. Can we make the match?

        4. Social icons in the footer: How can I change the hover color of these?

        Thank you again, so much!

      4. Thanks
        1. Are you talking about the footer search widget?
        2. To change Older Post font family and all caps

        div#infinite-handle button {
        text-transform: uppercase;
        font-family: sans-serif !important;
        }

        3. To make the footer widget title to look same
        .widget-title label {
        font-weight: normal !important;
        }

        4. To change footer hover color of social icons
        .widget_wpcom_social_media_icons_widget li:hover > a:before {
        color: red !important;
        }

        let me know if it helps

        Om

      5. For my first question, yes! I’m talking about the footer search widget! Is it possible to change the color?

        Also, how can I change the hover color of the Older Post button. It’s the only one that isn’t changing on hover.

        THANK YOU!

      6. Hi,
        thanks, sorry for the late
        to change button hover background color try this code

        #infinite-handle span:hover {
        background: red !important;
        }

        Om

      8. Hi
        for single post page footer background color

        .single-post #footer {
        background: red !important;
        }

        also, for single post footer text,links color

        .single-post div#footer p,.single-post div#footer a,.single-post div#footer p,.single-post div#footer h3 {
        color: red !important;
        }

        let me know if it helps
        Om

  16. Hi Om,
    thanks for the great answers.

    I have one more question:

    Is it possible to make a fixed size of the Blog Archiv Post that they all have the same size in the overview.

    THANK YOU!

    Reply

      4. Hi Rolf
        using my provide code ( i have shared it newly for desktop version) it will be looked like the image url shared below
        @media (min-width: 980px) and (max-width: 2222560px) {
        #content .wrap {
        padding-top: 10px !important;
        }
        .entry-header {
        margin-bottom: 1px !important;
        padding-bottom: 0px !important;
        }
        .entry-title {
        padding-bottom: 2px !important;
        }
        }
        https://allaboutbasic.files.wordpress.com/2017/11/using-my-code.jpg

        let me know
        Om

  17. Hi Om,
    one more question to the sides. how can I reduce the space between the menue bar and the first Headline and the space between the first Headline and the beginning of the side text.

    thank you very much. :-)

    Rolf

    Reply

    1. Hi Rolf
      would u mind to check the following codes?

      #content .wrap {
      padding-top: 10px !important;
      }
      .entry-header {
      margin-bottom: 1px !important;
      padding-bottom: 0px !important;
      }
      .entry-title {
      padding-bottom: 2px !important;
      }

      let me know if it helps
      OM

      Reply

      1. Hi Om,

        no, with this Code the space is 2px bigger than before.

        .entry-title {
        padding-bottom: 2px !important;
        }

        Maybe the text has a bigger padding?

        Thank you!

        Rolf

  18. I have just started using Baskerville 2 and have access to CSS in my paid version. I have used some of your code above to make modifications. I still have two issues that I will put into two replies.

    The first relates to projects. There is no Excerpt field in the project posts, and the More button function is visible in the project post but does not work. This means I cannot control the amount of Excerpt displayed in my projects.

    Reply

  19. The second is trickier. It relates to the Video format in posts.

    I have set my entire site up to use either project or post categories as I want all my navigation to be visual. (Most users are limited to smart phones). Where I have a video in a post, and format that post to be video, I would like the video to display and be clickable on the category page. WP support have told me it will only be visible on the home page, and does not work for the other pages, however as it is an available format for any page, i would expect it to work. They have told me to pay someone to fix your template so that it does that, but as the work I am doing is charitable there is no budget for paid fixes.

    Could you look at this page and let me know if there is anything you can do to get the video to display? The three empty headings each have a video in the post and are formatted video.

    https://housing-alternatives.com/topics/finding-safe-haven/

    Reply

      4. Looks like I will need to use a plugin to create a child theme. I can look into how to do all that in the next few days. Do you have instructions for modifying the code in the child theme if I get that sorted out at this end?

      5. HI Christine
        there is plugins to create child theme, but, to implement your changes it will need to add related template files (php files) in the child theme created.

      2. Hi
        please try this code

        .credits-inner.section-inner.clear {
        display: none !important;
        }

        after implementing, please clear your browser and cache plugin’s cache

        Om

  22. Hey, I have been struggling to adjust the theme in a few areas… site is http://windowintorrd.apps-1and1.com/. I would love to reduce the menu bar to be thinner – currently showing in orange. Also, when I moved the theme off of wordpress.com I lost the social icons that appeared below the menu, is there a way to get those back (that original site that shows the social icons is https://windowtorrd.wordpress.com/). Your help is appreciated!

    Reply

    1. Hi
      to reduce gap / height of menu in Baskerville 2 theme, try this code

      .main-navigation li > a {

      padding-top: 12px !important;
      padding-bottom: 12px !important;
      }

      .search-icon {
      height: 38px !important;
      }

      .search-icon:before {
      line-height: 40px !important;
      }

      let me know if it helps

      Om

      Reply

  24. Hi Om,

    You helped me out before, and I have another question. My website is edureach101.com. I didn’t change or do anything, and now when I go to the website, it shows:

    Fatal error: Uncaught Error: Class ‘Hustle_Module_Widget_Legacy’ not found in /home2/edureach/public_html/wp-includes/class-wp-widget-factory.php:100 Stack trace: #0 /home2/edureach/public_html/wp-includes/widgets.php(115): WP_Widget_Factory->register(‘Hustle_Module_W…’) #1 /home2/edureach/public_html/wp-content/plugins/wordpress-popup/inc/hustle-module-front.php(51): register_widget(‘Hustle_Module_W…’) #2 /home2/edureach/public_html/wp-includes/class-wp-hook.php(286): Hustle_Module_Front->register_widget(”) #3 /home2/edureach/public_html/wp-includes/class-wp-hook.php(310): WP_Hook->apply_filters(NULL, Array) #4 /home2/edureach/public_html/wp-includes/plugin.php(453): WP_Hook->do_action(Array) #5 /home2/edureach/public_html/wp-includes/widgets.php(1648): do_action(‘widgets_init’) #6 /home2/edureach/public_html/wp-includes/class-wp-hook.php(286): wp_widgets_init(”) #7 /home2/edureach/public_html/wp-includes/class-wp-hook.php(310): WP_Hook->apply_filters(NULL, Array) #8 /home2/edureach/public_html/wp-includes/plugin.p in /home2/edureach/public_html/wp-includes/class-wp-widget-factory.php on line 100

    Can you help me figure this out?

    I will pay you for your time.

    Thanks,

    Joseph D’Addario

    Reply

  25. Hey hey, first of all thanks for your help!! I wanted to use the sidebar widget “Picture” but with the frames and everything inside the sidebar widget the picture gets pretty small. Is there a possibility to shrink the frame inside the sidebar widget to get its content bigger?

    Reply

      1. Hello Om,
        thanks for your reply. The site is: https://noller.no-ip.biz/wordpress3/ on the right side you can see the picture of that “palm tree garden” and it would be great to get that white frame around it smaller to display the picture bigger.

      2. Hi cainte77
        would you mind to try this code please?

        .widget.widget_media_image {
        padding: 0px !important;
        border: none !important;
        }

        let me know if it helps

        Om

  26. Photo Credit for featured image does not seem to work. The only way I can figure to fix it is to manipulate the photo itself to add the accreditation, which is too bad, as the picture is quite nice looking by itself. Will it miraculously fix itself when I change from .com to .org? Or is there something I haven’t tried, yet? (My website is ‘private’ at the moment.)

    Reply

    1. Hi Alex
      would you mind to share me the page ur post URL where the caption is not working?
      and i think it will not solve if u change from .com to .org
      Om

      Reply

      1. Hi, Om ~

        My new URL is pollutionsolutions.info which is now .org (self-hosted). I am populating it from my .com URL notesonthevine.wordpress.com . Everything was fine at .com – I used my own picture so the credit issue was no longer a problem there, but then I decided to host the site, and changed the domain name. Now, neither Baskerville or Baskerville 2 will let me change the title font. I am considering creating an image with the name already on it, but I’m worried that after all that work, the title will show up anyway, and it will look like a double image.

        Then there are the facebook and twitter icons… I can’t find them. I loved them on the title image at .com

        Will there be an updated version of Baskerville 2 for self-hosted WordPress sites soon… please?

        In the meantime, is there any way to change the title font?
        Thanks,
        Alex

  27. All my text in the gallery’s has gone from black to grey, how can this be and do you know if I can change it to black please?

    Reply

    1. Try this

      #bwg_container1_0 #bwg_container2_0 .bwg-container-0 .bwg-title2, #bwg_container1_0 #bwg_container2_0 .bwg-container-0 .bwg-ecommerce2 {
      color: black !important;
      }

      let me know if it helps
      Om

      Reply

  28. Could you please tell me How to reduce logo size or is there any option to adjust/drag the logo bit upper or lower from the default place?
    PS: when both logo and title is selected for the site

    Reply

      1. Thanks a lot :) , I need one more help from you ; could you please help me to get an infinite scroll for a static page with the post excerpt blog display.I tried many plugins but they change my post display layouts when they load new posts .
        Thanks in advance :)

  29. Hi Alex,

    We are using your theme and have created a banner with the suggested dimensions, 1440X220. However, on the published site the image is stretched. Is there a workaround to fix this? Our site is blog.qwill.io.

    Thanks,
    Lauren

    Reply

    1. Hi Lauren
      would you mind to check if the following code works or not?

      .header.section.small-padding.bg-dark.bg-image {
      background-size: cover !important;
      padding-top: 0px !important;
      padding-bottom: 0px !important;
      height: 221px;
      }
      .header-inner {
      padding-top: 27px;

      }

      please let me know
      Om

      Reply

      2. Hi Om – This worked in that the full banner (1440X221) is now showing on desktop, but the resolution is still low. Are you able to help with that issue?

      3. HI Lauren
        please replace my previous code with this

        .header.section.small-padding.bg-dark.bg-image {
        background-size: 100%;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        height: 221px !important;
        }
        .header-inner {
        padding-top: 27px;

        }

        let me know if it helps
        Om

    2. Hi Om,

      Appreciate the second code, but it added white padding to the top of the image without fixing the compression. I’m wondering if it’s an issue with WordPress itself compressing the image.

      Thanks,
      Lauren

      Reply

  30. Hi, Om ~ I started with Baskerville .com. I now have Baskerville 2 .org, hosted by Bluehost. I had more control over my .com Baskerville theme – this one has no ability to change font for the title image area, no social icons at all, and no more ‘blogs I follow’ in the footer. Is there some update I need? I thought these would be available for the upgrade to .org – it never occurred to me that I would get less. (If I have missed them, they are very well hidden.)
    Because I cannot change the font on the title, I have been debating adding the title to the image I will eventually install, but I’m not sure the theme will allow me to omit the title once the image uploaded. You can see the site at pollutionsolutions.info

    Reply

    1. Hi Alex
      just connect your .org site to your wordpress.com site using jetpack and you should get all your facility
      please let me know if it helps
      Om

      Reply

  31. Hello,
    Is there a way to move the header menu (on Baskerville 2) so that it appears above the image at the top of the page? The menu includes the search feature and I would like that to be at the very top of the page instead of between the image and the website content.

    Thanks,
    Justin

    Reply

  32. OM Sir; Is there any way to change the effects of drop down menu bar in the mobile version?
    I need to turn my mobile version drop menu bar as in the apple.com mobile version site
    Please Sir help me,

    Reply

      1. Thanks Sir ; but I have othe site where I use Baskerville 2 theme with wordpress.org , could you please say me how can I get mobile version drop menu bar in my site same as in apple.com’s mobile version site drop menu bar.
        Please mention the available coding or plugin name sir

  33. Thanks Sir; If you don’t mind, Could you please write an article on ” let’s encrypt” which provides ” free ssl certificate ” especially for those site hosted under server that doesn’t provide ssh, cpanel ?

    Reply

      1. Thanks, but I was not able to find the perfect card for that…. can you please help me out?!

  38. Hi

    I have a submenu, when the mouse hovers above any of its items, the parent menu item changes the font color to white. when the submenu is closed (e.g, mouse is moved to another location) the fonts goes back to normal

    exampe:
    main navigation menu “a | b | c | d ” with black fonts and red on hover
    b has submenu ” b1 | b2″
    when the mouse overs above b it open “b1 and b2” and changes b into red (so far so good)
    when the mouse moves above b1 or b2 then b changes into white
    when the mouse moves to d, then b changes inyo black and d becomes red (back no normal)

    do you know what causes this behavior and how to fix it?

    thanks

    Reply

  41. Hello Om :)

    I read all questions and answers and you actually solved me 3 major issues with your answers above. You are a genius!

    I now have one issue that I would really appreciate your help! Header image looks fine in pc and ipad but not on mobile. I used the following two so far and they worked perfectly:

    .main-navigation li > a {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    }

    .search-icon {
    height: 38px !important;
    }

    .search-icon:before {
    line-height: 40px !important;
    }

    AND

    .header.section.small-padding.bg-dark.bg-image {
    background-size: cover !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 221px;
    }
    .header-inner {
    padding-top: 27px;
    }

    Coudld you please help?

    URL is yourworkplaceguru.com

    Thanks!

    Reply

    1. THanks
      sorry for the late
      try this code

      @media (min-width: 240px) and (max-width: 320px) {
      .header.section.small-padding.bg-dark.bg-image {
      background-size: cover !important;
      height: 85px !important;
      width: 319px !important;
      }
      }

      please let me know if it helps
      Om

      Reply

  42. Hi Om,

    I’m trying to fix the issue of the mobile drop down menu always being open. I tried the code you provided above regarding this issue by inserting it into CSS, but it did not work. Any insight into this?

    Thank you!

    Reply

      1. Hello – I tried the code you provided above.

        .toggled-on .sub-menu {
        display: none !important;
        }

        .toggled-on .active .sub-menu {
        display: block !important;
        }

        .main-navigation .has-children > a::after, .main-navigation .menu-item-has-children > a::after, .main-navigation .page_item_has_children > a::after {
        border: 5px solid transparent;
        border-top-color: #999;
        content: “” !important;
        display: block !important;
        margin-top: -2px;
        position: absolute;
        right: 29px;
        top: 50%;
        z-index: 1001;
        }

        jQuery(document).ready(function() {

        jQuery(‘li.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-has-children’).on(‘click’,function(){

        jQuery(‘.toggled-on li.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-has-children’).removeClass(‘focus’);

        if (jQuery(this).hasClass(‘active’) ){
        jQuery(this).removeClass(‘active’);

        }
        else{
        jQuery(this).addClass(‘active’);
        }

        });

        });

    1. thanks
      sorry i was away for illness
      i think you are searching this

      .main-navigation ul ul li {
      background-color: red !important;
      }
      please let me know if it helps
      Om

      Reply

      1. hi om. yes. i found the correct line in the css. one problem left: i‘mnor able to align the text in middle column in the footer „center“ :-((
        greets. c.

      3. sorry for the late reply
        just checked your messages
        so, what type of alignment issue you are facing for the middle column in footer?
        can you share me screenshot?
        Om

      4. hi om, in the footer area (contact, impressum etc) i would like to have the left column “align left”, the middle column “align center” and the right column “align right”.
        greetings c.

      5. For Middle column
        try this

        .column.column-2.one-third.medium-padding * {
        text-align: center !important;
        }
        is that something you are asking?
        let me know
        Om

  46. Great write-up!

    I’ve switched from Visual (WP retired my theme last year) to Baskerville 2 and have a few problems with my nave menu:
    1. replace forward slash with a pipe between menu items only
    2. replace social text with social icons – tried my Visual CSS below but Baskerville doesn’t respond like Visual i.e. icons display but not linked
    2. remove forward slash between social icons
    3. position social icons (right) but the last icon (RSS) to be inline with right-side of Sidebar
    4. header thickness truncates image in mobile device and tablet.

    Many thanks
    https://imageearthtravel.com/

    Reply

    1. HI Nilla
      for issue 1
      would you mind to try this code please

      .main-navigation li::before {
      content: “\007C” !important;
      }

      Regarding issue 2 ( replacing social text with social icons)
      ** I think you already have solved it right?

      Regarding issue 3 ( Removing forward slash between social icons)
      ** same, i am not seeing it?

      Please let me know
      Om

      Reply

  47. I Om,
    Thank you for your help!
    1.I already have that CSS for No. 1 in Customize, but it wasn’t working so thought I’d post the question here.
    2. Yes in the nav menu, but the URL links aren’t working for some strange reason.
    I also created a separate social menu (not positioned correctly yet) as thought this may be easier to style inline with the nav menu if kept seperate. The links in the social menu icon work, but the links in my nav menu social icons don’t work although URLs, etc. are identical.

    Many thanks

    Reply

    1. Hi Nilla
      sorry for the late response, was travelling..
      so
      *** i checked your css, but not getting the css you added for the pipe issue ( seems you added it wrongly? or the css not published? please check if you have published the css or not)
      ***regarding social links…i checkd and found the links are working fine (social links which are showing beside top menu)
      *** Forward slash not showing in my end between social icons
      *** Sorry i didn’t understand the RSS issue
      *** Regarding issue 4, can u share me screenshot image of header thickness truncate issue of mobile device?

      Regards
      Om

      Reply

      1. Hi Om,

        Many thanks for getting back to me and yes, I had a couple of errors in the CSS, also now removed the pipe. If anyone needs the CSS:

        /*remove forward slash*/
        .main-navigation li::before {
        content: “”;
        }

        /*remove forward slash between social icons*/
        li.socialmenu:before {
        content: “”;
        }

        Just created an actual social menu (you can see 2 menus now) so am playing around with positioning that on my header image as can’t position it inline with my nav menu. It displays where I want for Desktop, but of course, it’s hidden when displayed in mobile devices.

        The Header image in mobile/tablet devices is still truncated.
        Tablet: https://snag.gy/4NKnCh.jpg
        mobile: https://snag.gy/DIfKhY.jpg

      2. Hi Nilla
        for mobile and tablet header issue, would you mind to try the following codes please?

        @media (min-width: 300px) and (max-width: 600px) {
        .section.header {
        height: 80px !important;
        background-position: inherit !important;
        }
        }

        @media (min-width: 650px) and (max-width: 850px) {
        .section.header {
        background-position: inherit !important;
        height: 161px !important;
        }
        }

        Please let me know if they help
        Om

      3. Many thanks for the CSS, this now truncates the bottom. The social menu bar is hidden in an actual post when displayed on mobile device, but doesn’t display at all in a tablet. Could this because of this CSS?
        Cheers,
        Nilla

      4. Hi Nilla
        may be
        would you mind to check by increasing the height value for mobile and table view css code i provided please?
        please let me know what you get
        Om

      5. Thanks, have been playing around with the height as the social menu was also hidden. This is the CSS now, which may help someone else:
        @media (min-width: 300px) and (max-width: 600px) {
        .section.header {
        height: 101px !important;
        padding: 50px;
        background-position: inherit;
        }
        }

        @media (min-width: 650px) and (max-width: 850px) {
        .section.header {
        background-position: inherit;
        height: 235px !important;
        }
        }

        The tablet displays ok, iPhone 5 displays OK, but my Samsung A7 still displays the image truncated. Strange as it displays correctly in the WP dashboard mobile preview.

        Many thanks for all your help! :)

      6. Hi Nilla
        i prefer you clear the cache of the browser of your Samsung A7 :)
        as the code is working for other mobile device..so..it should work in your Samsung A7 too.
        let me know what you get
        Om

  48. Hi! I was using this theme with a free plan but when we changed to a business plan, we detected 2 issues:
    1. Sticky posts don’t work (they are marked as such)
    2. The first posts on the home page show the excerpt only but if you scroll down a bit, the posts start showing the full text.
    https://blogstreamcraft.wpcomstaging.com
    How can we fix this?

    Reply

      2. Funny thing, I rewound the blog to a recent backup and the sticky posts are magically working now, but it’s still showing full posts after the 10th post or so :(

  49. Hi Om,
    I use the them for http://www.sfnewsbrief.com and have an interesting issue. I import posts using the RSS WP Aggregator. and the Baskerville 2 theme. Some of the posts don’t have the continue reading after the excerpt. I don’t understand why what is going on is it a format issue?

    Reply

      1. I have posts that do and don’t have a featured image and they still have “Continued Reading.” The of the posts that don’t have “Continued Reading” have no featued image and one does.

  50. Three of the posts that don’t have a featured image, don’t have “Continued Reading.” One with an image dioesn’t have “Continue Reading,” on the homepage.

    Reply

  51. Hi Om,

    Thank you so much for the CSS help, it is really invaluable.
    Is there a way to change the used link font colour? I managed to change the general colour of links and the hover cover, but some are still the default green.

    Many thanks, Laura

    Reply

  52. Hey there,
    I’m trying to find out how I can center a widget in the footer, since I only have one. Can you maybe help me there?

    Thanks in advance

    Reply

  53. Hi Om
    Do you know of any way to just show a summary of the blog posts on the blog page? At the moment the whole post is being show, and as these tend to be long it’s looking a bit messy.

    Reply

      1. Hi Philip
        would you mind to check if you have this option or not?
        Appearance > Customize > Content Option

        there u will see “Blog Display” option

        please let me know if u got this or not

        Regards
        Om

      4. Installed Jetpack, found and changed the “Blog Display” option…all working and looking great.
        Thank you soooo much for your help, you’re a genius!

  55. Hi Om,

    Thanks for really detailed article, I have a small issue. I wish to change the color of the site name and tag and the hyperlinks text,

    When i use the code from question 6 (using Simple custom CSS) nothing happens. Do you have any suggestion as to why this may happen?

    Also where do I change the color or hyperlink text from the current blue ( or teal) to Red?

    Many thanks
    John

    Reply

      1. Hi Om

        The site is https://rosecroixswlancs.org.uk/

        I have worked out that the site title is a hyperlink. I have change the body a tyoe to red which has change the site title.

        I would prefer if this was not a hyper link. I can not locate a .site-title section in the css file so I assume that is why the copied code doesn’t work.

        Thanks in Advance

        Regards John

      2. Hi John
        to change the Site title’s font color

        .blog-title, .blog-title a {
        color: yellow !IMPORTANT;
        }

        to change tagline color

        h3.blog-description {
        color: black !important;
        }

        let me know if it helps

        Om

  57. Hi Om,

    Thanks for the amazing work!
    How do I change the background colour of the block at the end of my posts? (where tags, date, etc are displayed)

    Thank you for your help!
    Christine

    Reply

      2. Hi Christine

        for issue 2, please try this
        .single .post-meta-container, .single .post-meta {
        background-color: transparent !important;
        background: none !IMPORTANT;
        }

        For issue 1
        p.site-description {
        color: white !IMPORTANT;
        }

        For issue 3
        #footer h3.widget-title {
        color: black !IMPORTANT;
        font-weight: bold !IMPORTANT;
        }

        let me know if they help

        Regards
        Om

Leave a Reply