Fixing the "rope" graphic

  • davidbrittan · Member ·

    Hi. The little “rope” graphic in the header is one of many elements that make Adaline such an elegant theme. But on my site, it renders correctly only at tablet and mobile size. At full, desktop size it is too bold and thick to be perceived as a rope. It looks more like a caterpillar, a waxed mustache, or something less polite. I’ve tried using different fonts and different browsers, with no change. How do I fix it? Thanks.

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

  • lelandf · Theme Author ·

    Hi there David,

    Thanks for the feedback.

    Do you see the same “caterpillar” on the Adaline Demo site? https://adalinedemo.wordpress.com/

    I looked at your site at thenecessary.net and was greeted with a Coming Soon page. I’m wondering if you are using another font besides Roboto? If so, would it be possible for you to lift the Coming Soon page so I can see what your site looks like and get a better idea of what’s going on?

    In the meantime, we can at least try decreasing the font size and letter spacing to the same point it’s at on tablet/mobile.

    At 600px, Adaline decreases the font size of the “~~~~~~” text from 48px to 34px which may appear less bold with the font you are using.

    Try this Custom CSS to get that same font size and letter spacing at all widths:

    body .site-branding::after,
body .site-info::before {
    font-size: 34px;
    letter-spacing: -12px;
}

    Here’s a guide on adding Custom CSS to your WordPress.com site just in case you’re not familiar: https://wordpress.com/support/custom-design/editing-css/

    Please let me know how it goes and if you have any further questions.

    Best regards,
    Leland

  • davidbrittan · Member ·

    Thanks for the reply, Leland. I’ve made the site public so you can get a glimpse. I inserted the Custom CSS, but it didn’t fix the caterpillar (I’ve since deleted the CSS).

    The font I’m using is indeed different — Noto Serif. Roboto seems to have disappared from my font menu. There’s only Roboto Slab, which is very different. I’ve tried many other headline fonts and sizes, but the caterpillar stays.

    I hope it helps you to see the site-under-construction. Thanks!

  • lelandf · Theme Author ·

    Hmm, this is a weird one.

    To get the caterpillar to appear as it does on the demo, Roboto font with 100 font weight needs to be loaded and that’s not happening on your site right now. It appears the thinnest Roboto font weight loaded on your site right now is 300 which looks quite thick in comparison.

    I even tried copying the fonts I believe your site is currently using and my caterpillar remains normal: https://cloudup.com/ctlkkoiovVv

    Is that what your Custom Fonts panel looks like? I’m not a WordPress.com staffer, just a theme author so I don’t have the ability to check these things myself.

    In other words, I’m not able to recreate the issue with the Roboto 100 font not loading, as even with both fonts customized, certain fonts on my demo site remain still-present. Not sure why that would be, it may be some inconsistency on WordPress.com’s platform outside of my control.

    What happens when you click those “X” buttons? This should revert the fonts back to the theme defaults, maybe that will help?

    If not, here’s what I can offer:

    – CSS code to completely hide the caterpillars
    – CSS code to make the caterpillar even bolder, like this: https://cloudup.com/cjrSqckZOGv

    Best regards,
    Leland

  • davidbrittan · Member ·

    For some reason it never occurred to me to click the X’s on the font menu. That fixes the caterpillars — and brings back your very nice font combination, which I’m inclined to keep.

    Thanks for your help, Leland!

  • lelandf · Theme Author ·

    Awesome! Thanks for the update.

    Best regards,
    Leland

  • The topic ‘Fixing the "rope" graphic’ is closed to new replies.