Event list widget – change of font and spacing

Home Forums Calendar Products Events Calendar PRO Event list widget – change of font and spacing

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #94965
    ninapostans
    Participant

    Hi – I’m a bit of a novice at this so please bear with me. I’ve read the user guide for CSS and still don’t know whether this is working. I’m trying to change the line spacing, font size and cap the title of each event on my site but nothing’s working. Can you assist please/

    #95508
    Brook
    Participant

    Howdy,

    I will do my best to help. Unfortunately since CSS is a language one does need to learn it before being able to do much with it, much like any common tongue. However, I will give you a quick example and hopefully that will help clarify things.

    On my own theme the events list widget container has a class of ‘tribe-events-adv-list-widget’. Within the widget there is an

      element with the class ‘hfeed’. Each <h4> within ol.hfeed is an event title. So, if I wanted to make those event titles all caps I would add the following CSS rule:

      .tribe-events-adv-list-widget .hfeed h4 {
      text-transform: uppercase;
      }

      Using a similar procedure I would target other elements with my CSS rules.

      Does that make sense? If not it is quite possible that are not yet fluent enough in CSS to make CSS changes. Perhaps it would be appropriate to hire a developer to make them for you?

      Please let me know if I can be of further assistance. Thanks!

      – Brook

    #96353
    ninapostans
    Participant

    Hi Brook,

    Thank you for getting back to me and for your thorough explanation!
    I’m still having trouble with this. Where do I insert this code? I tried inserting it into my style sheet and it doesn’t work. Unfortunately, budget doesn’t allow for me to hire a developer yet. I’ve managed to work out how to apply code and updates to other plugins that provide CSS edits under their ‘Widgets’ but it looks like I’ll have to apply this code somewhere else?

    I would be hugely grateful if you can help! Thank you.

    #96457
    Brook
    Participant

    Howdy ninapostans,

    I would be glad to assist you with where to put this. Inside your theme’s CSS file is the best place. It is possible that your theme adjusts some aspects of widgets, like maybe they have different classes, or use <h2>s instead of <h4>s. Many themes do. As I said that code is specific to my own theme (though sometimes it transfers fine).

    However, using the technique I described above, you should be able to create a new rule specific to your own theme. Using something like Chrome’s inspector you can find out more about the element you want to style, and the parent/container elements. Using that info you can create rules. This does take a bit of practice and knowledge though. If you are not specific enough, you might find your CSS rule targets more than just the widget, for instance.

    I can not find the events list widget on your site, so I can not even get you an example specific to your theme. But, really that is outside of our scope of support anyways. You say that you do not have the budget to hire a developer, and I completely understand that. But, you must understand we do not have the budget to hire a developer for you, either. As stated in our scope of support when it comes to customizations like this we would be glad to “point you in the right direction”. But, it is up to you to head in that direction. And certainly you would have to have the knowhow to actually make it to that destination once you’ve been pointed there.

    I really really hope you understand. Please let me know if you have questions, or need me to point something else out. Cheers!

    – Brook

    #97101
    ninapostans
    Participant

    Hey Brook – thanks for taking the time to answer my last question. You have been a great help! No worries if my request was a little cheeky but I am hugely grateful for the advice you’ve given me so far. I’ll take a look at Google Chrome Inspector. Thank you again. You guys do a fab job.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Event list widget – change of font and spacing’ is closed to new replies.