Support » Plugin: Fonts Plugin | Google Fonts Typography » Force styles causes problems

  • Resolved bensontel2

    (@bensontel2)


    I must force styles to get the menu items to show correctly in the header. But this limits any block level changes. For example, I can’t change the color in sub-headings. The changes show in the editor but not when I view the page.

    If I don’t force styles the menu items are tiny and unreadable. Please help. I have the pro version, updated and reinstalled. Thank you.

    The page I need help with: [log in to see the link]

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author DannyCooper

    (@dannycooper)

    Hi @bensontel2,

    I would recommend resetting all the settings to default, and then using the more specific “Advanced” settings as opposed to the ‘Basic’ ones.

    That means not using ‘Base Typography’ control but instead using the ‘Navigation Typography’ and ‘Content Typography’ controls independently. That will remove the need to use the force setting.

    Let me know if I can help with anything else.

    Thanks

    Thread Starter bensontel2

    (@bensontel2)

    Thank you, Danny. I set the basic to default as you recommended. I can style text at the block level now, big thanks.

    There are still some issues I’m hoping to resolve.

    1) I could not use Tulpen One as a menu item as the font kept reverting to tiny type in the pull-down menu — no matter what setting I used in navigation.

    I was forced to use Open Sans light which performed better. Even Open Sans light shows as bold in the top-level pull-down menu but fine on the bottom menu.

    2) What selectors only affect the Menu and Search buttons at the top right? Is there a separate selector for the top level of the pull-down menu (not the menu at the bottom of the page)?

    • This reply was modified 10 months, 1 week ago by bensontel2.
    • This reply was modified 10 months, 1 week ago by bensontel2.
    • This reply was modified 10 months, 1 week ago by bensontel2.
    • This reply was modified 10 months, 1 week ago by bensontel2.
    • This reply was modified 10 months, 1 week ago by bensontel2.
    Plugin Author DannyCooper

    (@dannycooper)

    Hi @bensontel2,

    All menus (standard, mobile and footer) should be controlled by the single Advanced Settings → Navigation Control.

    The icon buttons ‘Menu’ and ‘Search’ might need an independent control. I will look into that.

    Would having that independent setting solve your problem?

    • This reply was modified 10 months, 1 week ago by DannyCooper.
    Thread Starter bensontel2

    (@bensontel2)

    Yes, I think it might. Thank you.

    I’ve set the font back to Tulpen One because that’s what I want, but –as you can see– the font is way too small on the top-level pull-down menu, but the sub menus seem correct.

    Plugin Author DannyCooper

    (@dannycooper)

    It could be that because the theme is reducing the letter-spacing on the top level menu it’s making it look too small even though it’s not.

    The theme default is:

    .modal-menu > li > a, .modal-menu > li > .ancestor-wrapper > a {
        font-size: 2rem;
        font-weight: 700;
        <strong>letter-spacing: -0.0375em;</strong>
    }

    Add this to your Custom CSS instead:

    .modal-menu > li > a, .modal-menu > li > .ancestor-wrapper > a {
        letter-spacing: 0.1em;
    }
    • This reply was modified 10 months, 1 week ago by DannyCooper.
    • This reply was modified 10 months, 1 week ago by DannyCooper.
    Thread Starter bensontel2

    (@bensontel2)

    I added this to custom css but no luck yet. I noticed the default made the font bold which I don’t want, too.

    .modal-menu > li > a, .modal-menu > li > .ancestor-wrapper > a {
    letter-spacing: 0.1em;
    }

    I noticed that everything before { is showing in red in the additional css.

    • This reply was modified 10 months, 1 week ago by bensontel2.
    Plugin Author DannyCooper

    (@dannycooper)

    It’s because when you pasted the code it changes the symbols to special characters:

    https://jmp.sh/HljkmEC

    You need to make sure they are the actual symbols ( > )

    Thread Starter bensontel2

    (@bensontel2)

    Okay. I have to go out now, but will be back and figure out how to put the symbols in. Thanks.

    Thread Starter bensontel2

    (@bensontel2)

    I got the code in right now, but it doesn’t alter the default.
    https://drive.google.com/file/d/1cE_PY0gX0UlPrVZHomh209q_m1JbZMoo/view?usp=sharing

    Plugin Author DannyCooper

    (@dannycooper)

    That’s still the same problem as before, where it says & gt; that is the HTML special character representation of >

    You will need to replace each & gt; with >;

    • This reply was modified 10 months, 1 week ago by DannyCooper.
    • This reply was modified 10 months, 1 week ago by DannyCooper.
    • This reply was modified 10 months, 1 week ago by DannyCooper.
    • This reply was modified 10 months, 1 week ago by DannyCooper.
    Thread Starter bensontel2

    (@bensontel2)

    Thank you so much!

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Force styles causes problems’ is closed to new replies.