Styling text within short codes with css

We are using Event manager plugin on our site and calling the latest event title on to our home page using <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>

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.

In Chrome, I can right click, inspect and then search for the element that needs changing

<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 …”

But I can’t work out what style to add to correct the problem and where to add the code.

Site is http://dev.londonhr.org/

Any help would be much appreciated:)

thanks

Colin

When I view the generated source I get this invalid html.

<div class="”aligncenter”" style="transition: none 0s ease 0s; text-align: inherit; line-height: 64px; border-width: 0px; margin: 0px; padding: 0px; letter-spacing: 0px; font-weight: 600; font-size: 60px;" center="" !important;="" text-shadow:="" 1px="" 2px="" #000;”="">Managing change in today’s</div>

The whole style tag is corrupt as it seems the inline styles you have added are tagged on at the end of that rule but corrupted in the process.

Specifically this:

center="" !important;="" text-shadow:="" 1px="" 2px="" #000;”="">

That is not css or any valid html.

It may be that your script does not allow you to add any inline styling into that section as it seems to be making its own up from data attributes.

e.g.

data-textAlign="['inherit','inherit','inherit','inherit']"

(But that may be for something unrelated.)

I do notice that the quotation marks you are using are invalid (you are using smart quotes).

You are using these:

<div class=”aligncenter”

and

style=”text-align: center !important; text-shadow: 1px 1px 2px #000;”

and they should be like this:

<div class="aligncenter"

style="text-align: center !important; text-shadow: 1px 1px 2px #000;"

Firstly I suggest you go through all those inline styles and change the smart quotes as shown and then we can look and see what is happening,

The class you are adding aligncenter is not working because it is being seen as ”aligncenter” - i.e. the smart quotes are part of the class name now. If you remove the smart quotes and use proper quotes you can then use css to add the styles.

e.g.

.aligncenter {text-align:center!important;}

2 Likes

Thanks Paul, I’ll look at those

Thanks Paul that worked perfectly, much appreciated :slight_smile:

2 Likes

Hi Colin,

I just checked your page in Linux Chromium and found the span element you pointed to. It seems the problem is with the style attribute in the nested div in that span. (Inappropriate nesting by the way, it would rather be the other way around. Or the div changed to a span too.)

The near parent .tp-caption is declared text-align:center; and parents in between is declared text-align:inherit; so the “center” value should be passed on.

But, I think that declaring text-align on an inline element could be seen as non applicable as the text-align property needs a block formatting context to apply, and instead be considered “unset”. And because it has overridden the previous value the “unset” computes to the initial “start” value.

That could explain why the “center” value is ignored, the span is a link in the cascading chain and overrides it with “inherit” but is then considered initial as the declaration doesn’t apply, and the computed value to inherit is “left” and apply to the div, that has the formatting context.

Another issue is the code itself. The page’s source code for the div:

<div class=”aligncenter” style=”text-align: center !important; text-shadow: 1px 1px 2px #000;”>Managing change in today’s</div> </span>

The Inspector however, shows how the browser while trying to correct errors, reads that code:

<div class="”aligncenter”" style="transition: none 0s ease 0s; text-align: inherit; line-height: 51px; border-width: 0px; margin: 0px; padding: 0px; letter-spacing: 0px; font-weight: 600; font-size: 47px;" center="" !important;="" text-shadow:="" 1px="" 2px="" #000;”="">Managing change in today’s</div> </span>

The rendered result shows that the usual quotation mark “0x0022” used in code, here and there instead is the right double quotation mark “0x201d” that usually comes in pair with its left part “0x201c” in English text documents.

I think they are too many to be typos, so I suspect the editor at hand happen to be a word-processor too smart for code, configured to silently replace neutral quotation marks with the right paired quotation mark. Pun intended. :grin:

Edit) Left the post hanging unfinished for more urgent matters for some hours and now I think @PaulOB covered it all.
Then I think my post might add some detail in the matter so I submit it as it is. :slight_smile:

1 Like

Poor thinking, I’m afraid. Browsers are smarter than I, obviously. And also: this span had display:block set in another rule-block I didn’t notice. :blush:

To be clair: An inline element can’t apply a new text-alignment, right, but its new value is passed on and becomes the next inherited.

As @PaulOB explained already; the class’ two right-double-quote-marks became rendered as letters in the class name so the alignment rule didn’t work. :slight_smile:

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.