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

Site URL: https://www.weacceptcryptocurrency.com/

I want to make the period at the end of my homepage header the same color as the logo of my site (in top-left). Is this only possible with CSS customization?

Can you take screenshot?

Sure, I want to make this period the same color as the logo on the top-left of my homepage.

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>

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.

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.

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.

13 hours ago, WeAcceptCrypto said:

hsl(167, 89%, 38%)

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

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:

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

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?

2 hours ago, AlexSantos said:

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

 

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:

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).

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.

Just now, tuanphan said:

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

Hey Tuan, no need I just fixed it. Thank you!

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

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! 

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;
}