Changing background color in text content box

  • Question
  • Updated 4 years ago
  • Answered
How do I change the color of a text background box from white to a different color?
Photo of Doug McItnosh

Doug McItnosh

  • 2 Posts
  • 0 Reply Likes
  • unconcerned

Posted 7 years ago

  • 5
Photo of Grace

Grace, Champion

  • 361 Posts
  • 4 Reply Likes
Photo of Marije

Marije, Official Rep

  • 4636 Posts
  • 234 Reply Likes
Hi dg,

You can try these steps:
1. Add the text widget to your page
2. Click in it so that the text toolbar appears
3. Click on the HTML button in the text toolbar
4. Paste this code into the HTML editor that opens:

<!-- <div style="background-color:red;">
Enter some text here
</div> -->

5. You can edit the text 'Enter some text here' to display the text you would like to use.
6. Please ignore <!-- and --> those are there to stop the code from being interpreted.
7. You can change the color by writing it (ie. blue, green, red, yellow). Or you can use HTML color values (ie. rgb(255,0,255) instead of the color. You can find a list of colors on a resource like W3Schools:

Hope that works for you!
Photo of Joy


  • 19 Posts
  • 2 Reply Likes
I don't seem to be able to get this to work! Might your experts be able to put in a facility to change the background colour of a text box? Would that be very complex? I hate having to waste time trying to figure out html, which I swore off years ago when I first took a look at it - I'm too old now to learn a new written language. In the meantime the only way I can put text into different coloured box is by creating an image on picnik, which seems rather a round-about way of doing things. Am I missing something really simple? Note - my sole knowledge of html is < BR > which doesn't help very much!!!!
Photo of Monique

Monique, VP of Customer Support

  • 6276 Posts
  • 442 Reply Likes
Hi joyousjam
Regrettably the only way to do this right now is with CSS - as Marije has suggested above. I fully understand your not wanting to go this route and SynthaSite is there so that you don't have to! However, the reality is that certain features are still in development, but they can currently be achieved by editing code (no good for most people). So the short answer is right now this can't be done without the Picnik work around or editing the code. We do have plans for something along these lines in a future release. To get some idea, look at the color blocks on the new Burlap style - right now they are fixed - in future we would like to allow users to select their own colors. Let us know if this is something like what you have in mind.
Photo of gill.r


  • 8 Posts
  • 0 Reply Likes
Yay, this has worked for me - thanks. I have tried to make a horizontal rule using html too but I can't get that to work - any ideas?
Photo of Emmy


  • 5892 Posts
  • 298 Reply Likes
Hello stresshead,
You can add a horizontal rule to your page by dropping an html widget onto the page where you want it to appear and entering:
(remove the <! - - and - -> at the beginning and end.)
Photo of gill.r


  • 8 Posts
  • 0 Reply Likes
Hello Emmy
I tried that but it won't work. It just shows a blank box
Photo of gill.r


  • 8 Posts
  • 0 Reply Likes
OK, thank you Emmy. I need to go now but I will check back tomorrow to see if you found anything. Just a thought, but I'm using Firefox browser, perhaps Horizontal Rules don't show up in Firefox?
Photo of Emmy


  • 5892 Posts
  • 298 Reply Likes
That was a good thought; but I have seen this work using Firefox and am thinking it is a problem with the style. I will get back with you tomorrow with more info. Thanks!
Photo of Christo


  • 95 Posts
  • 13 Reply Likes
Hi stresshead, and thank-you for pointing this out. We have resolved the problem in development, and it should be fixed with our next release.
Photo of gill.r


  • 8 Posts
  • 0 Reply Likes
OK, thank you. How will I know when the next release is available? Also, the answer by Marije to the original question on this page - the code to put a colour block in a text box works well and looks really good, so thanks everyone for all your help. Maybe I'm a happy head now instead of a stresshead.
Photo of Emmy


  • 5892 Posts
  • 298 Reply Likes
I don't have an exact date on the release, but it will be soon.
Photo of WowKidW


  • 28 Posts
  • 1 Reply Like
Im trying to add the code on the HTML but it wont work.
Has this been resolved?
I need to change the background colour of the text. Thank you.
Photo of Sanja

Sanja, Official Rep

  • 10614 Posts
  • 479 Reply Likes
Hello WowKid

I have responded to you on your other thread:
Photo of Alayna Fenster Langnas

Alayna Fenster Langnas

  • 3 Posts
  • 0 Reply Likes
I was able to do this after a few tries. You have to place it at the beginning of the html
Photo of Randy


  • 643 Posts
  • 8 Reply Likes
I came across this if anyone is interested.
Photo of svclubnzS


  • 28 Posts
  • 1 Reply Like
Ok so I used the above advice from the first reply to change the color of the content box... It worked. The problem is that now I can not create a margin for the text. The text sits jamed hard right up against the colour edge. Any idea on how to bring the text in a bit. Other than centering it.
Photo of Sanja

Sanja, Official Rep

  • 10645 Posts
  • 482 Reply Likes
Hello svclubnz

You can adding a padding code. This is what it would look like:

<!--<div style="padding: 10px; background-color: red;">
Enter some text </div>-->

You can adjust the padding numeric value to suit your purposes.

Please let me know if you have any further trouble with this.
Photo of safi ullah

safi ullah

  • 142 Posts
  • 9 Reply Likes
hey i want to add a background only around the one content and rest theme remain same like you can see anime list in background the text is written on it i want to add that background you can see it on anime list background here

this is content code what to edit so that i can get a back ground

#content {
background: #FFF;


This reply was created from a merged topic originally titled
can anyone edit this code.