Baskerville 2 By Anders Norén :Modifications of header, footer, sidebar, contents, customization and documentations

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

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

Or can take my personal help.

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;
}
If you have any issue feel free to ask me question here in comments section

OR

Pay me some, I will help you for CSS Issue PersonallyCLICK HERE….

103 Responses to Baskerville 2 By Anders Norén :Modifications of header, footer, sidebar, contents, customization and documentations

  1. dandradiss says:

    Hi, do I need to have a premium account on WP in order to be able to access the css code area?

    Liked by 1 person

  2. dandradiss says:

    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.

    Like

  3. dandradiss says:

    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

    Like

  4. enriquetaregala says:

    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

    Like

  5. tammiecorcoran says:

    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.

    Like

  6. mattkasemer says:

    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?

    Like

  7. mattkasemer says:

    I sent you an email and a facebook message. Thanks!

    Like

    • 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

      Like

      • mattkasemer says:

        Hi Om,

        I added this all to my custom css and it doesn’t seem to help. Any suggestions?

        Like

      • can you share me screenshot of your custom css portion please?

        Like

      • mattkasemer says:

        I have sent you a screen shot through email

        Like

      • yes checked Matt, you used my code between /* */
        please remove those

        Om

        Like

      • Matt
        i missed this code

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

        please let me know

        Om

        Like

      • mattkasemer says:

        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;
        }

        Like

      • Hi Matt
        i checked and found the thickness issue solved?
        have u cleared your browser cache?
        please let me know
        Om

        Like

      • mattkasemer says:

        Sorry, it does work! Only the hover question 🙂

        Like

      • mattkasemer says:

        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?

        Like

      • 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

        Like

      • mattkasemer says:

        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;
        }

        Like

      • 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

        Like

      • mattkasemer says:

        Yes this works. My site changes at 1000px, I have noticed.

        Like

      • Hi Matt..
        regarding hover color issue..
        i didnt understand the issue…
        would u mind to clarify?

        Like

      • mattkasemer says:

        Hi Om,

        Concerning the hover issue, I want the color to change when I hover my cursor over it, like the text does – notice how it tuns slightly to grey.

        Also, I would like to know how to change the navigation bar thickness for all the mobile versions as well, not just the desktop version.

        I have sent you payment through fiverr for your help – it is appreciated.

        Like

      • 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

        Like

      • mattkasemer says:

        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…

        Like

      • Hi Matt
        can you share me screenshot what you are referring please?
        Om

        Like

  8. Hi, great job!

    How do I change the font for the tagline? (Under the title?)

    Thanks

    Like

  9. jimmiedeesairguns says:

    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

    Like

    • HI Jimmie
      please share me the site url you are working
      and tell me where you want to move the social icons
      Om

      Like

      • jimmiedeesairguns says:
      • jimmiedeesairguns says:

        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

        Like

      • 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

        Like

      • jimmiedeesairguns says:

        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

        Like

      • Hi Jimmie
        yes you can paste it there
        or
        you can use Simple Custom Css

        also
        !important is to give privilege to the css code

        Om

        Like

      • jimmiedeesairguns says:

        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

        Like

      • 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

        Like

      • jimmiedeesairguns says:

        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

        Like

      • jimmiedeesairguns says:

        Hello Om,

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

        Many thanks,
        Jimmie

        Like

      • 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

        Like

      • jimmiedeesairguns says:

        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

        Like

      • thanks..just checked and found you didn’t use my provided code

        Like

      • jimmiedeesairguns says:

        Sorry, I forgot to hit save and publish! It’s live now.

        Like

      • can u create new image for mobile version? link 304x300px in dimension?
        if u provide me such image i can check

        Like

      • jimmiedeesairguns says:

        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

        Like

      • share me image url..i will check and let u know

        Om

        Like

  10. Hi Om, Thanks for helping me before. I have another question:

    My site looks fine on my laptop, but it looks different on my ipad and my phone. On the phone especially, the header image looks cut off.

    the site: http://www.edureach101.com

    I can send you screenshot of the phone view if you’d like

    Like

  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

    Like

  12. jimmiedeesairguns says:

    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

    Like

  13. Ms. Natalie says:

    I was wondering if you could tell me how to change the color of the tagline as well? 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 )

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: