Home Forums Weaver Xtreme Theme How do I control the height of superscripts?

This topic contains 7 replies, has 2 voices, and was last updated by  scrambler 3 weeks, 5 days ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #61185

    kdawson
    Participant

    Weaver Xtreme places superscripts quite high up above the baseline — see this example. I can control the line spacing so that the <sup> does not cause uneven line spacing — that is not the issue. What I cannot seem to affect is how high above the baseline the superscript appears. I have tried adding custom CSS in the Weaver Xtreme Admin panel, under Main Options > Custom CSS Rules. The legend says that CSS rules specified there will be applied last and will therefore be effective. I have tried adding to sup { }: vertical-align:.5em or vertical-align:5px or vertical-align:text-top. None of them change the appearance at all; it looks like the theme applies something like vertical-align:1.4em and will not be dissuaded from that.

    How can I get handle on superscript positioning?

    #61186

    scrambler
    Moderator

    My sup text with Xtreme is not that high, so please provide a link to the page where the superscript is with details where to look.

    The default styling in Xtreme appears to be

    sup {font-size:0.85em;top:-0.5em;line-height:0;vertical-align:baseline;}

    You may have a plugin that is changing that style, in which case you may need to use !important on each property to override.

     

    #61187

    kdawson
    Participant

    That screenshot was from this blog post, 3rd paragraph.

    #61188

    scrambler
    Moderator

    I edited my post while you answered, so check it back.

    You have some in page style changing the theme default styling

    <style>
      sup, sub { font-size: .7em; vertical-align: text-top !important; line-height: 1em; }
      sub { vertical-align: sub; }
      .figlef { float: left; margin: 8px 12px 0 0; text-align: center; }
      .figrig { float: right; margin: 8px 0 0 12px; text-align: center; }
      .figcen { text-align: center; }
      .figlef img, .figrig img, .figcen img {
        border: 1px solid grey; margin-bottom: 0 !important; }
      .figcap { font-family: sans-serif; margin-top:.8em; padding: 0; font-size:.8em;
        line-height: 1.15em; color: #333; text-align:center; }
      .quo { width: 80%; font-size: .9em; border: 2px solid grey; margin: 1em auto;
        padding: 15px 18px; background-color: #e9e5dc; line-height: 1.5em;
        border-radius: 8px; }
      .runinhead { color: #cc3301; font-family: sans-serif; font-size: .95em;
        font-weight: bold; font-style: italic; }
    </style>

    If you did that start by removing it, if not try to figure out where it comes from so you can go back to the theme defaults I mentioned above.

     

    #61189

    scrambler
    Moderator

    You actually have more custom CSS messing it up before the one I mentionned

    sup, sub {
     font-size: .7em;
     vertical-align: super;
     line-height: 1em;
    }
    sub {
     vertical-align: sub;
    }
    
    And in the theme Global Custom CSS Rule box
    /* Custom CSS rules for Plain sub-theme */
      sup, sub { font-size: .7em; vertical-align: .5em !important; line-height: 1em; }
      sub { vertical-align: sub; }
    
    

    The culprit for the position is the vertical align one

    If you cannot find the source of these CSS,  try an overriding rule in the weaver Global Custom CSS Rule box like below using !important

    sup {vertical-align:baseline !important;}

    #61190

    kdawson
    Participant

    Thank you! That’s got it.

    I don’t know where the custom CSS you mention in the comment immediately above comes from. (It looks like mine though.) The larger block of CSS  you cite earlier I got rid of. Added the vertical-align:baseline to Weaver’s overrides. All looks good now.

    Thanks again! On the evidence of this question, Weaver’s support is simply outrageously good.

    #61194

    kdawson
    Participant

    I’ll append this question here because I’m pretty sure I broke something by going into Appearance > Weaver XTreme Admin for the previous question.

    I use Google Fonts (via the Easy Google Fonts plugin) and after making the simple CSS change noted above, none of my Google fonts show up any more. All my headers are generic sans-sefif. I see that font-family: inherit is in effect and all of my specified fonts are ignored.

    Any idea where in the XTreme settings I may have disturbed something? I don’t see anything suggestive in the settings, except for one XTreme Plus option (which I don’t have) that talks about disabling Google font integration.

    #61198

    scrambler
    Moderator

    I don’t see how some CSS would break the font, but I have no idea how your plugin works and how you select the added font.

    You can try removing all your Custom CSS to confirm if that is the issue.

    If not and you are using a plugin and not Xtreme Font tool, then try removing the plugin ad redoing the install and selection, or may be speak with them

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.