Align graphic next to txt

[Nate_Sheridan]

Hi,

I have a headline style where the full stop needs to be adifferent colour to the text, and different colour again depending on the page the healine appears.

I have created a Healine element as a component with custom parameters linked to a graphic acting as the fullstops, to good effect. However when the text is spread over 2 lines the graphic or ‘fullstop’ does not apear next to the text.

I have added the following code to ensure the graphic appears next to the text on a single line, but doesnt address the 2 line issue: .x-text-content { display: inline-flex; }

Has anyone got a solution to this?

[tristup]

Hi @Nate_Sheridan,

Thanks for reaching out.
I would suggest you add the full stop into the content wrapped with the span tag and add the custom CSS code to set the color in Customize > Element CSS as described in the following screenshots.

Hope it helps.
Thanks

[Nate_Sheridan]

Thanks for the reply.

How do I then map that colour to a paramater so it can be changed within the paramater output?

[tristup]

Hi @Nate_Sheridan,

You can set the parameter value through the Dynamic Content tag in the Element CSS, as shown in the given screenshot.

Hope it helps.
Thanks

[Nate_Sheridan]

Thats great to see we can reference dynamic ocntent in CSS this way!

But unfortunatly this did not work for me. Doesnt seem to be targeting the span.

[tristup]

Hi @Nate_Sheridan,

In that case, we need to investigate it further, can you please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password
– The component you have created and the specific page where you have used it.

To create a secure note, click the key icon underneath any of your posts.

Thanks

[Nate_Sheridan]

Ok, great.

Access details attached above.
If you launch Cornerstone, then Components, Then choose ‘Headings’ you will see i’ve tried to create a custom component that seperates the full-stop from the title so the colours can be edited independently on page and section.

I like the idea of using a component for colour pickign as all the saved banded colours will there.

Many thanks.

[tristup]

Hi @Nate_Sheridan,

I have checked and found that the Dynamic Content tag to fetch the color is wrong. I have changed it to the following and now it is working fine.

$el span {
    color: {{dc:p:FullStopColour}};
}

Thanks

[Nate_Sheridan]

Ah, I see what I did wrong.

Should have referenced the ‘paramarer’ and not ‘post meta’.

Thanks for fixing this!

[tristup]

Hi @Nate_Sheridan,

Glad that we are able to help you.

Thanks