Event Manager: styling text within short codes with css

  • Resolved colin_jump

    (@colin_jump)


    5 years, 7 months ago

    Hi,
    We are using Event manager plugin on our site and calling the latest event title on to our home page using [events_list limit=”1″ orderby=”event_start_date”]#_EVENTNAME <br/>[/events_list]

    I want to be able to have the title text (#_EVENTNAME) aligned centre on the page but it aligns it left, I’ve tried using css but can’t work out how to do it. We can align the whole short code in the centre of the page but not style the text to be centred. Any help would be much appricated:)

    thanks

    Colin

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

Viewing 9 replies - 1 through 9 (of 9 total)
  • Stonehenge Creations

    (@duisterdenhaag)

    5 years, 7 months ago

    Have your tried something like this:
    [events_list limit=”1″ orderby=”event_start_date”]<p class=”aligncenter”>#_EVENTNAME</p>[/events_list]

    Stonehenge Creations

    (@duisterdenhaag)

    5 years, 7 months ago

    Better yet:

    <div class=”aligncenter”>[events_list limit=”1″ orderby=”event_start_date”]#_EVENTNAME<br />[/events_list]</div>

    Thread Starter colin_jump

    (@colin_jump)

    5 years, 7 months ago

    Yes tried that, all this does it centre the whole title to the centre of the page not take out the align left of the text. thanks for trying.

    Stonehenge Creations

    (@duisterdenhaag)

    5 years, 7 months ago

    Not clear what you mean… Perhaps a link to your website would help. I cannot find it on the link you provided in the first message.

    I only see one event name (first thing on the page) and that is (sort of) centered, but moves when you scroll???

    Thread Starter colin_jump

    (@colin_jump)

    5 years, 7 months ago

    Hi Patrick, I’ve reduce the event title so you can see what I mean, The title, (Managing change in today’s) today’s is on a second line and aligned left not centre. Hope that makes sense.

    Stonehenge Creations

    (@duisterdenhaag)

    5 years, 7 months ago

    Aha, now I see. It seems something that has nothing to do with Events Manager, but with your theme.

    First of all, it uses a lot (!) on inline styling, which could hurt your SEO.

    <div class=”tp-mask-wrap”>
    Problem is here:
    <span class=”tp-caption tp-resizeme rs-parallaxlevel-2″>

    There is a line (hard-coding styling):
    style=”… text-align=inherit …”

    In Chrome, is you right click, inspect and then search for that div, you can temporarily change the code, by double clicking the source code on the right.

    Change “text-align: inherit” to “text-align: center”, hit enter and you’ll see that that is what needs to be changed in your theme.

    Since it’s outputted by the theme, EM cannot solve this.

    Thread Starter colin_jump

    (@colin_jump)

    5 years, 7 months ago

    Thanks Patrick I’ll take a look much appricated

    Stonehenge Creations

    (@duisterdenhaag)

    5 years, 7 months ago

    Try this (just in case)
    I also noticed you had double “” in the div… Try this code (literally)

    <div class=”aligncenter” style=”text-align: center !important;”>[events_list limit=”1″ orderby=”event_start_date”]#_EVENTNAME[/events_list]</div>

    Stonehenge Creations

    (@duisterdenhaag)

    5 years, 7 months ago

    Also… Your original title is very long, so the letters are outside of the orange boxes. Try adding a little text shadow to make the white font more readable over the light image 😉

    <div class=”aligncenter” style=”text-align: center !important; text-shadow: 1px 1px 2px #000;”>[events_list limit=”1″ orderby=”event_start_date”]#_EVENTNAME[/events_list]</div>

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Event Manager: styling text within short codes with css’ is closed to new replies.