0

I am trying to use custom css on my Squarespace site to change the color of the preview text that appears when I embed a link.

Here is my website, for reference.

The text I'm trying to change is all of the grey text, as it's difficult to read on the black background.

I googled how to do it and came across an extension which helps identify the correct block on Squarespace; I ended up with this code. 

#block-yui_3_17_2_5_1514510493603_23123 p {color: #cccc08}

The tutorial I used said to use p, h1, h2, and h3 in order to change the color of various text blocks.

However, upon injecting this code and testing it out, it doesn't work exactly as intended. When I refresh my website, the text is displayed as the correct color (yellow) initially. However once the page is fully refreshed and loaded, it displays as the original grey text. If you click the link on my website, you'll see what I mean.

Wondering what exactly I am doing wrong, and what I need to do in order to change the color of the text as intended. If there is another, easier way to do this which I do not know about - that would be useful too!

Thanks!

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Coines
  • 3
  • 1
  • 1
    What do you mean by injecting? – Sami Kuhmonen Jan 02 '18 at 08:51
  • I mean adding it to the website. On Squarespace there is a tab you use to add Custom CSS to any page on your site – Coines Jan 02 '18 at 08:58
  • Is it not just your class of description you'd change the color: attribute on? – Xoog Jan 02 '18 at 08:59
  • 1
    @sconner87 You are actually correct! If there was some way I could change all of the embedded text color at once, that would be optimal. That way I do not need to make any changes when I upload future content. However, I do not know how to do so. – Coines Jan 06 '18 at 00:46
  • Embedly has some basic style properties they allow on the free plan. `data-card-theme="dark"` would work well on a black background and you can select it when using their [link creation tool](http://embed.ly/code?url=http%3A%2F%2Fgoogle.com) – ermik Jan 08 '18 at 00:14

1 Answers1

0

You can't adjust foreign content that is loaded via iframe.

Please refer to the question about modifying iframes and the Wikipedia article on Same-origin policy. These restrictions exist on content loaded from other websites. In your case embedly.com is something you don't "own" and that's why you are not allowed change it.

The only way to change such foreign content is to have the content owner (in this case – Embedly) provide you with access. They do! Embedly allows to style their "cards" but this feature is only available on a paid plan. Please refer to Embedly developer documentation for more information.

ermik
  • 408
  • 3
  • 17
  • 1
    Changing it to the dark theme in Embedly, like you suggested in your comment above, worked! Thank you! – Coines Jan 09 '18 at 04:13
  • Hi @Coines! No problem. if this or any answer has solved your question please consider [accepting it](https://meta.stackexchange.com/q/5234/179419) by clicking the check-mark. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. There is no obligation to do this. If you need any more help feel free to reach out directly or post another question (make sure you search the website first). – ermik Jan 09 '18 at 21:50