Align graphic next to txt

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?

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

Thanks for the reply.

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

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

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.

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

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.

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

Ah, I see what I did wrong.

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

Thanks for fixing this!

Hi @Nate_Sheridan,

Glad that we are able to help you.

Thanks