Support » Plugin: Elementor Page Builder » Font size in sidebar widget

  • Resolved petebm

    (@petebm)


    Hi
    Is there any way to change the style of text in the sidebar widget? I’ve added a ‘Recent posts’ widget to the sidebar & the headings are much too big (https://imgur.com/a/OHXm9Nz). I’m using the Parabola theme, & I’ve tried changing the Post Title font and Widget title font in Parabola settings, but that had no effect.
    I’m sure it must be possible!

    Thanks

Viewing 12 replies - 1 through 12 (of 12 total)
  • Although there are no Style options for the Sidebar widget, you can assign it a class in the Advanced tab of the widget, and then set the headings size via CSS. So for example, if you add the class “esidebar” (without the quotes and with no preceding dot) to the Advanced > CSS Classes tab of the sidebar widget, then go to Customizer > Additional CSS and add this:

    .esidebar h2 { font-size: 16px; }

    You should see your sidebar h2 headings (assuming they actually are h2’s on your site) change to 16px. If your heaadings are h3 or h4, etc. change the h2 in the CSS to whichever yours are.

    The developers appreciate ideas for improvement, so if you like, you can submit a Feature Request on Github, which is where they take feature requests, to add style options to the Sidebar widget, if that is possible to do. You can submit the feature request at https://github.com/elementor/elementor/issues/new/choose which gives you the opportunity to follow the discussion about ideas you submit, and track development progress of any that get implemented. You can learn more about how to submit requests at https://github.com/elementor/elementor/blob/master/.github/CONTRIBUTING.md

    Wow.
    What an incredibly clear & helpful answer, that solved my problem completely. The headings are in fact h3, but your method seems faultless.

    Thank you @cavalierlife! I’m off to Github to put in a feature request . . .

    Ah, sorry, there’s a follow-up, which I hope you won’t mind if I include here. Now the text size for the widget headings is sensible, the over-large gap between the widgets is more obvious. I’ve looked around & found various custom css solutions for this, but none seem to have any effect.

    Can you help?
    Thanks

    Could definitely help with that but would need a URL to look at in order to do so.

    Certainly (I’m not going to say no, am I?!) It’s https://website1.therileyrmcentre.co.uk/latest/; please don’t be too harsh about the site – it’s a work in progress!

    Currently you have this CSS affecting that spacing:

    .widget-container {
    padding: 1.3em;
    margin: 0 0 1.2em 0;
    }

    Change that 1.3em and 1.2em as desired to smaller numbers to match whatever you’d like it to be.

    That does it – spot on.

    Many thanks again

    Pete

    Apologies for the piecemeal fashion of these queries / requests – but I’d now like to be able to alter the body text format. Mainly to get a bulletized list, which I presume is

    , but despite copying the formatting css for the heading, I can’t get anything to affect the body. I realise this is down to my ignorance of css, but after 30 mins of rummaging on Google & trying different lines, I’m opting for the easy way out, & hoping I learn something at the same time.

    Thanks

    I’m guessing you added code that disappeared above. Use the code button in the editor here to wrap your code in, so it stays with your message. In any case, you haven’t given enough information to know what you’re trying to do.

    This might also be helpful: https://www.w3schools.com/css/css_list.asp

    You’re being too kind; there was no code as the various things I tried would probably make you fall about laughing, so I didn’t want to put any on display.

    The latest – which I know would obviously not give the bullets that

      would give, but would at least have had a noticeable effect if it’d worked, was

      .esidebar body {font-size: 22px; font-weight: bold}

      As you can see, I’m just copying what you did for the heading h2, but attempting to have an effect on the ordinary paragraph text. What I’m trying to achieve is to make the list of post headings in the sidebar bullets a) because the widget heading is & b) just to make them stand out anyway.

      Thanks for the css link; that’s the sort of thing I was looking at too

    Ok, there won’t be a body in the sidebar, so that code won’t work.

    If you’re going to sink your teeth into adjusting CSS, you’ll need to learn to use your browser’s inspector tool. Basically, what you do is right-click on the part of the page you want to alter, in this case any of the text in the sidebar that you want to affect. Then choose Inspect Element in Firefox or Inspect in Chrome. See https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS or https://developers.google.com/web/tools/chrome-devtools/ . Once you’ve entered the Inspector you can see what that particular element is named so you know what to use (instead of body for example) as the selector that you want to change.

    This is beyond the scope of the Elementor plugin, so you should consider taking one of the many free courses available online for learning about CSS. In a day or two, you could learn the basics and feel more comfortable with changing things.

    Thanks again, @cavalierlife. I know about the inspector tool, & used it to try to find what the element was. When that failed, I turned to you. However, a quick look at your link showed me that I was looking at the wrong part of it – the ‘main’ window rather than the Filter styles one. So thank you for the pointer – I’ll work on that; I’m always happy to learn!

    All the best
    Pete

Viewing 12 replies - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.