# Style Embeds in Multiple Hosts **URL:** https://meta.discourse.org/t/style-embeds-in-multiple-hosts/62742 **Category:** Administrators **Tags:** how-to **Created:** [May 15, 2017, 7:57pm UTC](https://meta.discourse.org/t/style-embeds-in-multiple-hosts/62742 "2017-05-15T19:57:42Z") **Posts on this page:** 1 **Page:** 1
### Author: ![Patrick\_David](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/patrick_david/32/119657_2.png) [@Patrick\_David](https://meta.discourse.org/u/Patrick_David) #### Post date: [May 15, 2017, 7:57pm UTC](https://meta.discourse.org/t/style-embeds-in-multiple-hosts/62742/1 "2017-05-15T19:57:42Z")
A while back [styling for embedded discourse](https://meta.discourse.org/t/styling-of-embedded-discourse/31956) was added, where we could specify CSS for the embeds. The only problem was when we got the ability to embed in multiple allowed hosts - there was still only the single styling available across all of the hosts (which is painful if one host is on a light background and the other is dark). After [some back-and-forth](https://meta.discourse.org/t/embedding-in-more-than-one-host/62002) I was finally able to [submit the ability to define a **Class Name**](https://github.com/discourse/discourse/pull/4857) that could be added to the embedded page (per host) to target CSS better. * * * In a nutshell, adding a **Class Name** to a domain (at `/admin/customize/embedding`): ![](https://global.discourse-cdn.com/meta/original/3X/d/5/d51e0d8c15d995a7bc230270fc0073bcf2ffb748.png) Will add that value to the `` tag of the embedded page. At that point, if you go to `admin/custome/themes` and `Edit CSS/HTML` → `Embedded CSS`, you can target any of the defined **Class Name** s for the specific host: ![](https://global.discourse-cdn.com/meta/original/3X/e/c/ec6ce60bc877ef6c53b76ec30804a6f9a73e4b3a.png) Precede your style with the class selector on the `` tag. As in my example above, if I want to change the text color for my embed globally: ```css html.digikam { color: #9e9e9e; } ``` but use a different color on a different embedded site: ```css html.pixls { color: #333333; } ``` Or I can modify the button color: ```css html.digikam footer .button { background-color: #0068c6; } ``` Rinse and repeat for all of the allowed hosts that you define a **Class Name** for… Thank you x1000 to @eviltrout for being patient with me, and especially to @darix who guided me through actually doing it. 😃 More in-depth writeup on my personal blog: > **[Pat David: Styling Discourse Embeds](https://patdavid.net/2017/05/styling-discourse-embeds/)**