Need CSS help for Affinity theme to change font size and overlay

  • lindacassidylewis · Member ·

    I’m using the Affinity theme and would like to know the CSS statement to slightly increase the top menu font size.

    I would also like to remove the dark overlay from the panel images. Previously, I tried a CSS statement that removed the overlay from the header image, but it also made it hard to read the site title and top menu, so is there a way to use an overlay across the top, but remove the overlay from the header image?

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

  • kosiew · Member ·

    hi,

    You can change the menu font size via the Customizer. First select a Base Font, then click on a Size you want.
    https://screenshots.firefox.com/c1uufNn12yVpX3gV/wp20180808.wordpress.com

    ” is there a way to use an overlay across the top, but remove the overlay from the header image?”
    Are you saying you want the overlay (the section that contains Linda Cassidy Lewis and the menu items) to always stay at the top and the rest of the scrollable page to start just below it ?

    ——————————–
    : : Fixed at top
    ——————————-
    ^
    |
    | rest of page scrollable
    |
    v

  • wpx2 · Member ·

    Hi @lindacassidylewis

    You can increase the font size of the top menu by adding this custom CSS code to your theme:

    .main-navigation ul li {
    font-size: 15px;
}

    You can change the font-size: 15px to whatever number fits your desire.

    Regarding the overlays, the two CSS codes below will do the trick.

    This code is to remove the dark overlay from the header image:

    .custom-header {
    background-color: transparent;
}

    This code is to add an overlay across the top of the theme:

    .header-wrapper {
    background-color: rgba(0, 0, 0, 0.5);
}

    You can change the opacity of the overlay across the top by changing the number 0.5 either by increasing it for darker overlay, or by decreasing it for more transparent overlay.

    All the CSS codes above should be placed in the CSS editor in your Dashboard.
    To access the CSS editor, first launch your site customizer then click on the CSS tab to access the CSS editor.

    Let me know if this helps.

  • lindacassidylewis · Member ·

    Thank you, but that enlarges all the fonts on the page, and I just wanted to enlarge the menu font.

  • lindacassidylewis · Member ·

    WPX2, thank you for the help. I used your CSS for the .main-navigation and .header-wrapper, which did exactly what I hoped. Yay! But using transparent for the custom header bleached out the photo, so I used another statement which changed the opacity to 1.

    Now, if I might be so bold, I have two other requests. With the overlay removed from the header image, the tagline (let me tell you a story) looks blah, so I’d like to play around with the color and/or font size. Could you tell me how to do that?

    Also, is there a way to remove the overlay from the featured images used for the other panels?

  • wpx2 · Member ·

    Hi @lindacassidylewis

    You are welcome.

    Let’s start with how to remove the overlay from other panels.

    The code below will remove the overlay from all the panels in your website’s main page: 

    .in-panel .custom-header-image {
    opacity: 1 !important;
}

    Regarding the tagline’s (let me tell you a story) font size and color, the following CSS code will do the work:

    .site-description a {
   font-size: 50px;
   color: #ff0000;
}

    You can change the font-size: 50px to whatever number fits your desire.

    Each color on the web has a code. The color code #ff0000 will make the tagline’s color Red. If you want to know how to find the codes of colors, check this topic :
    https://en.support.wordpress.com/custom-design/custom-colors/#color-picker

    When you find the color your want just copy its code and paste in the place of #ff0000.

    Let me know if this helps.

  • lindacassidylewis · Member ·

    WPX2, yes, thank you. That’s exactly what I needed. :-)

  • wpx2 · Member ·

    Hi @lindacassidylewis

    You are welcome.

    Happy to help :)

  • The topic ‘Need CSS help for Affinity theme to change font size and overlay’ is closed to new replies.