How do I style my own extension with Coral?

Avatar

Avatar
Shape 1
Level 1
ml38989156
Level 1

Likes

4 likes

Total Posts

2 posts

Correct reply

0 solutions
Top badges earned
Shape 1
Validate 1
Boost 3
Boost 1
View profile

Avatar
Shape 1
Level 1
ml38989156
Level 1

Likes

4 likes

Total Posts

2 posts

Correct reply

0 solutions
Top badges earned
Shape 1
Validate 1
Boost 3
Boost 1
View profile
ml38989156
Level 1

21-12-2018

Hello,

I've created my own extension, she's working very well, I'm very proud of her, but she's a bit...  Ugly.

How can I integrate Coral UI with my extension so that I can design my interface is in keeping with the rest of Launch?  Is there a CDN I can use?

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Seeker
Employee
brandon_pack
Employee

Likes

30 likes

Total Posts

40 posts

Correct reply

10 solutions
Top badges earned
Seeker
Unlock
Publish 1
Ignite 1
Give Back 3
View profile

Avatar
Seeker
Employee
brandon_pack
Employee

Likes

30 likes

Total Posts

40 posts

Correct reply

10 solutions
Top badges earned
Seeker
Unlock
Publish 1
Ignite 1
Give Back 3
View profile
brandon_pack
Employee

03-01-2019

Just as a side note, Adobe is moving from Coral to a new, but similar, specification called "Spectrum" which is what the Launch UI now uses.   The CSS has been open-sourced if you want to use anything from it.  In the futurte JS and other components will be open-sourced as well:  GitHub - adobe/spectrum-css: The standard CSS implementation of the Spectrum design language.

Answers (2)

Answers (2)

Avatar

Avatar
Coach
MVP
StewSchilling
MVP

Likes

342 likes

Total Posts

279 posts

Correct reply

85 solutions
Top badges earned
Coach
Give Back 25
Springboard
Bedrock
Validate 1
View profile

Avatar
Coach
MVP
StewSchilling
MVP

Likes

342 likes

Total Posts

279 posts

Correct reply

85 solutions
Top badges earned
Coach
Give Back 25
Springboard
Bedrock
Validate 1
View profile
StewSchilling
MVP

21-12-2018

You can just view frame source on the view of an extension that uses Coral.

Such as:

https://assets.adobedtm.com/extensions/EP9f64ab5391d540b0bb8658a244bbeb36/dist/dataElements/javascri...

This has the following in the head :

<link rel="stylesheet" href="//assets.adobedtm.com/activation/reactor/coralui/3.17.0/css/coral.css">

<script src="https://use.typekit.net/buj6cmr.js"></script>

<script>try{Typekit.load({ async: true });}catch(e){}</script>

Avatar

Avatar
Coach
MVP
StewSchilling
MVP

Likes

342 likes

Total Posts

279 posts

Correct reply

85 solutions
Top badges earned
Coach
Give Back 25
Springboard
Bedrock
Validate 1
View profile

Avatar
Coach
MVP
StewSchilling
MVP

Likes

342 likes

Total Posts

279 posts

Correct reply

85 solutions
Top badges earned
Coach
Give Back 25
Springboard
Bedrock
Validate 1
View profile
StewSchilling
MVP

03-01-2019

Did this answer your question?  If so, please mark it as correct.  If you are still stuck, let me know and I'll see if I can help.  We at Search Discovery are using Coral UI for styling on all three of our Launch extensions.