Background with coloured text

  • 1
  • Question
  • Updated 9 years ago
  • Answered
Hi there,

Im looking to get a text box with a grey background with black text and a dark Green heading, does anyone know how to do this?
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes

Posted 9 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
You can definitely add a background to a text widget! Here is some code that you can use:

<div style="border: 2px solid red; width: 400px; height: 211px; background-color: pink;">This is where your text goes</div>

You can drag a text widget onto your page, click on the little HTML icon on the Edit Toolbar and paste in that code. Here is what the various pieces of the code do, each of which you can change to suite what you are trying to accomplish:

1. Width is how wide the area will be.
2. Height is how tall it will be.
3. Border is how thick it will be should you choose to have one, and after that you put the color of the border in this case solid red.
4. Background-color is the color of the background.
5. You can put the text you wish to appear where you see: "This is where your text goes".
6. Click OK.

You can change the various pieces to make it the size and color that you prefer.

Note: Because this is in a text widget, you can also type directly into the text widget instead of putting the text you wish to appear in the HTML code. You can also highlight the text and use the Edit Toolbar to change its various attributes such as color and size.

I hope this helps!
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Yeah thats great but what i need for the background is a specific colour of grey how do i go about doing this?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Craig

You can replace background-color: pink with a hex value number. So, it would look like this: background-color: #5dc4d3.

You can use the HTML101 to use the color chart to get the right grey color if you wish: http://html101.yolasite.com/html-colo...

Please let me know if you have any trouble with this.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Thats great but the only problem is I want to be able to type the text straight into the box without having to go into the html part!!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Craig

If use a text widget, you can go into the HTML button on your text toolbar. Add your code through there. Then, you can easily format your text using the text toolbar.

I hope this helps!
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
No you cannot!! once you insert a text widget and place html code within it and once you start typing in the box your grey background disappears so I need someone who knows how to do this. All I want is a greay background and for me to be able to add text to it without the background disappearing.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Craig, can you please post the URL to where you have placed this code on your site? I'd like to see what's going on. Also, can you please let me know which browser you are using? I'm using Firefox and did not have a problem with using the text editor to add my text and format it within the grey box. I'm sure that we will get this sorted out.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Im also using firefox
Photo of Ruth

Ruth

  • 2819 Posts
  • 135 Reply Likes
Hi Craig,

Sanja isn't online at the moment, but I'm going to alert her to this thread so that she is able to help you when she comes online a bit later on.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Craig

Thanks for providing the information. I have taken the liberty of going into your site builder to see how this code is behaving. I was able to type directly in the grey box with no problems. The background did not disappear on me.

This is what I did, I click on the text widget and then just started typing. If you're having trouble with this, perhaps I can add the text for you?

Please give this a try and let me know how you'd like to proceed. You can also try using a different browser to see if that helps any.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Hi there,

I have tried this but manage to get to type in the box in question after about the 10th attempt of double clicking in the grey shaded box which is not very helpful. I just want to type once I click in the box at the first attempt and not have to go through a big polava. Im sure I have already done this once before and never had these problems!!
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
<!--

What you basically have to do is add something to keep it open - like a <p> or a <br> -- so Sanja's original code would look like this.

<div style="border: 2px solid red; width: 400px; height: 211px; background-color: pink;"><br></div>

or with <p> </p> tags if you prefer that spacing.

I would go 1 step further and add all values to a small CSS file.

Try this out see how it goes for you.

Add this to the top of your page:

<style type="text/css">
.craigbox
{
margin: 0px;
width: 100%;
padding: 10px;
background-color: #F6F6F6;
border: 1px solid #CCCCCC;

-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;

-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
}
</style>

Then on the page just add this

<div class="craigbox"><br></div>

if you want to control the width use this:

<div class="craigbox" style="width: 300px;"><br></div>

-----------------------------------------------------------------------------------------

In the CSS you can change the background colour etc. its all pretty straight forward.

The bottom 2 sets of 4 (i.e. -moz and -webkit) make the edges round in firefox and safari - both sets of values do the same thing just for separate browsers, so if you change 1 set change the other to match. If you want the corners to be square just use the value 0px

If you need any help just ask -

Lee.

-->
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks Lee!

Craig, I hope Lee's suggestion helps. I'm sorry that you had such trouble. Since I did not have any trouble, I'm wondering if it may help to update your Flash and your browser version? I'm not sure what version you're using so this may or may not help. You can also try clearing the cache in your browser as well as this may also help.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
PERFECT Lee, thanks
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Lee how do you move your text a bit more to the left as I want it closer to the left hand side than it is currently!!
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
the padding should do it - try padding: 1px

Glad it worked out.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Lee, excellent work!

Craig, I'm glad that you were able to find something that worked for you. :)
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Hi guys,

I tried changing the padding to 1px as advised but the writing in the box never moved any further left unfortunately.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
It does work craig look:

10px padding


1px padding


Remember you need a bit of padding in elements or it looks squashed.

Make sure you did not delete the ; which follow the value. it should read,

padding: 1px;

Lee.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Still never worked Lee when typing inside the box the margins stay the same no matter what I change the padding to, never mind!!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I, too, am able to make the changes to the padding and see this work as displayed by Lee's screenshots.

This would suggest to me that perhaps there is something amiss with your computer? I remember when I first joined Yola, I had problems with coding as well. Everyone else could make it work except me. I got myself a new computer and everything was working smoothly.

I would suggest you trying this on a friend's computer and see if you're able to make the code work. This would give a good indication is this problem is localized to your computer.

You can also double-check that you have the latest browser, flash and javascript.