Need custom CSS for Baskerville 2 header

  • Unknown's avatar
    k8sthreads · Member ·

    I’m trying to adjust the header on my site, which uses Baskerville 2. There appears to be some kind of opacity setting which causes all the header images to look murky, and makes the white text (esp. the tagline) hard to read. Also, the default font keeps showing up for a couple of seconds every time a page loads.

    I have a premium account which should allow me to add some custom css, right? So here’s what I’m trying do accomplish: (a) Remove the overlay or whatever it is so that I can use a couple of the header images (like the sunflower) or a plain white background without the overlay being on top. (b) Get rid of the code which causes the default font (calpyso?) to load. Is this possible? I know where to paste the code, but don’t know what the code should include. Thanks.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    pranaliwp · Member ·

    Hello @k8sthreads,

    Here is what I could suggest for your problems. Let’s check them one by one.

    (a) Remove the overlay or whatever it is so that I can use a couple of the header images (like the sunflower) or a plain white background without the overlay being on top.

    Below is the CSS change you need to do for the overlay fix.

    You can add the following snippet under My Site > Customize > CSS:

    .header .cover {
    display: none;
}

    (b) Get rid of the code which causes the default font (calpyso?) to load. Is this possible?

    Here is what I think could be the possible workaround for your query regarding the font.

    With respect to web fonts implementations ( https://developers.google.com/webfonts/docs/webfont_loader ), classes such as .wf-loading, .wf-active are available. It gives you control on how to apply fonts when there is loading delay.

    CSS applied to your current title are as follows:

    .wf-active .site-title {
   font-family: "Oswald",sans-serif;
   font-style: normal;
   font-weight: 400;
}

    The presence of .wf-active class is causing this behavior. Try removing the .wf-active class and that should solve your issue.

    .site-title {
   font-family: "Oswald",sans-serif;
   font-style: normal;
   font-weight: 400;
}

    Please let me know if it worked. Let us get deeper if it is not working.

    Thanks,
    Pranali

  • The topic ‘Need custom CSS for Baskerville 2 header’ is closed to new replies.