Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
WeAcceptCrypto

How to Change Color of One Text Element Within Text Block?

Question

13 answers to this question

Recommended Posts

  • 1
13 hours ago, WeAcceptCrypto said:

hsl(167, 89%, 38%)

You can use W3schools color picker to convert an HSL value to hexadecimal.

image.png.a71aab9b1a1f03686084b2cf54a850b8.png

 

You can try the following inside a code block. I used an h1 in my example.

So what I have chosen to do is create a code block and insert the code.

I created a div and inside it I added a class="word" attribute. Later on I used the class by calling my class that I chose to arbitrarily call .word. This will help me add some CSS styling against it, in this case I asked for my class called word to assume the color: white. A little later down I called the .word class and used the after selector to apply color and content, your color and the "." (dot) content.

<h1>
<div class="word">Testimonial</div>
<style>
.word {
 color: white;       
}
.word:after {
 color: #0bb792;
 content: ".";
}
</style>
</h1>

In my case, it looks like this:

image.thumb.png.adf2658876fbb54c43dad766b4269a95.png

I am not that great with code but I believe this is very nice solution because it is all inside one code block, both the HTML and CSS which styles it and the text is easy enough to edit, just double click the code block and you can define any text and change colors. You won't need to move around the Squarespace interface by going to Design>Custom CSS, it will all live in a little code block and will always work as expected. You only need to worry about the h1, h2, h3 or which ever font size you chose.

I hope this not only helps you with your goal but that the links encourage you to use w3schools which is an excellent reference. Think of it like a wikipedia of code. Along the top bar of w3 are sections for HTML, CSS, (both are markup languages), and then javascript, python etc which are actual programming languages.

If this doesn't work out tuanphan was also generous enough to give a helping hand.

Cheers
—Alex

Edited by AlexSantos

Share this post


Link to post
  • 0

You may need to change the <p> tag but I would just use straight html for this. Any other thoughts?

<p>This is some text<font color="red">!</font></p>

image.thumb.png.276beb6ce0342f30b2c8976cf7eb41dc.png

Perhaps this can be done in markdown as well but I just chose HTML markup.

Here it is on a test page with plain text.

image.png.f32e31eca42a319e74ac998556f46629.png 

Share this post


Link to post
  • 0

Hi Alex, thank you for your response.

I believe this must be done with CSS rather than HTML because it's a specific color of green I want. It's not a standard green but the green that matches the logo color. The color code for this green, from the "Colors" tab in the "Design" section of the site, is: hsl(167, 89%, 38%). I don't exactly know what that stands for, but I figure the solution must be to have the text "refer" to that part of the color pallet of the site.

Share this post


Link to post
  • 0

I thought I will answer yesterday,...then I forgot your question [and some other members, can't find their post!!!]

First you need to bold or italic or underline.... the dot. This will make dot use different HTML. Then we can use CSS for it.

Next, please let me know, I will check again.

 

 

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0
15 hours ago, tuanphan said:

I thought I will answer yesterday,...then I forgot your question [and some other members, can't find their post!!!]

First you need to bold or italic or underline.... the dot. This will make dot use different HTML. Then we can use CSS for it.

Next, please let me know, I will check again.

 

 

 

Hi Tuan, no stress! I appreciate all of your help regardless! 

The period is already bolded. I wouldn't want to italicize or underline it because that would look weird on the page (just tested it). Unless you mean just italicize and underline to change color and then I can remove the italics or underline after?

Share this post


Link to post
  • 0
2 hours ago, AlexSantos said:

You can use W3schools color picker to convert an HSL value to hexadecimal.

image.png.a71aab9b1a1f03686084b2cf54a850b8.png

 

You can try the following inside a code block. I used an h1 in my example.

So what I have chosen to do is create a code block and insert the code.

I created a div and inside it I added a class="word" attribute. Later on I used the class by calling my class that I chose to arbitrarily call .word. This will help me add some CSS styling against it, in this case I asked for my class called word to assume the color: white. A little later down I called the .word class and used the after selector to apply color and content, your color and the "." (dot) content.


<h1>
<div class="word">Testimonial</div>
<style>
.word {
 color: white;       
}
.word:after {
 color: #0bb792;
 content: ".";
}
</style>
</h1>

In my case, it looks like this:

image.thumb.png.adf2658876fbb54c43dad766b4269a95.png

I am not that great with code but I believe this is very nice solution because it is all inside one code block, both the HTML and CSS which styles it and the text is easy enough to edit, just double click the code block and you can define any text and change colors. You won't need to move around the Squarespace interface by going to Design>Custom CSS, it will all live in a little code block and will always work as expected. You only need to worry about the h1, h2, h3 or which ever font size you chose.

I hope this not only helps you with your goal but that the links encourage you to use w3schools which is an excellent reference. Think of it like a wikipedia of code. Along the top bar of w3 are sections for HTML, CSS, (both are markup languages), and then javascript, python etc which are actual programming languages.

If this doesn't work out tuanphan was also generous enough to give a helping hand.

Cheers
—Alex

Wow, thank you so much for this insightful reply. I just bookmarked that color picker resource. I used your code suggestion along with the HTML to bold the text and achieved the desired effect. Looks awesome!! I didn't even know you could add code blocks like that inside of other blocks (new to SquareSpace).

Share this post


Link to post
  • 0
6 minutes ago, WeAcceptCrypto said:

Hi Tuan, no stress! I appreciate all of your help regardless! 

The period is already bolded. I wouldn't want to italicize or underline it because that would look weird on the page (just tested it). Unless you mean just italicize and underline to change color and then I can remove the italics or underline after?

You can bold, italic, then I will use CSS to remove bold/italic & change color.


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0
1 hour ago, WeAcceptCrypto said:

Wow, thank you so much for this insightful reply. I just bookmarked that color picker resource. I used your code suggestion along with the HTML to bold the text and achieved the desired effect. Looks awesome!! I didn't even know you could add code blocks like that inside of other blocks (new to SquareSpace).

You're welcome. I am glad that I could help you. w3schools is a very good resource. The site doesn't look great but it is rich with content. For the code I offered, you can refer to w3schools to paste little bits of it to learn what it does and how to use it.

Happy to help.
—Alex

Share this post


Link to post
  • 0
On 2/5/2020 at 7:06 AM, AlexSantos said:

You're welcome. I am glad that I could help you. w3schools is a very good resource. The site doesn't look great but it is rich with content. For the code I offered, you can refer to w3schools to paste little bits of it to learn what it does and how to use it.

Happy to help.
—Alex

Hi! I am trying to do something similar...

https://www.meltyogastudio.com/

I want the word melt to be in #33cccc I am totally new to all of this! 

Share this post


Link to post
  • 0
1 hour ago, meltyogastudio said:

Hi! I am trying to do something similar...

https://www.meltyogastudio.com/

I want the word melt to be in #33cccc I am totally new to all of this! 

Add to Home > Design > Custom CSS

div#block-1051f2c05bb7ab5f7634>div>h1:nth-child(3) {
    color: #33cccc;
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...