Changing Coloured Box

  • 1
  • Question
  • Updated 8 years ago
  • Answered
I have light grey boxes in my website where I put news articles etc but it there a way to get the top section another colour so that I can put the headings in a different colour from the rest of the news.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes

Posted 8 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Craig

Can you please let me know the code you used and I may be able to tweak it for you.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
How do you insert the code in here?
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
FIRST... put the <!-- BEFORE THE CODE - that's what you didn't do, then also put the --> after the code.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
are you thinking kind of like what I did on my website? The title background's are different colors than the body!?

Your code has to be modified and it can most likely be done outside the html editor.

Click into your text widget, place the insertion point just after your title and press enter... DO NOT press Shift + Enter as this doesn't enter a break.

You should now have two codes, one for your title and one for your text. Go into your html and change the background color hex to the color you want. The first hex will be for your title and the second one will be for your body.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
I can also provide you with my codes if you'd like, they are slightly different than yours.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
<!--<style type="text/css"> .craigbox { margin: 4px; width: 100%; padding: 10px; background-color: #F6F6F6; border: 1px solid #CCCCCC; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; } </style> <div class="craigbox" style="width: 470px;"><br><img style="margin: 4px; padding: 0px; float: left; font-weight: bold;" src="resources/Shoes.gif?timestamp=1264024115200"><br></div> -->
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
I'm working with the code, if I can fix it, I'll give you the fixed code.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Donald what I want is for the word NEWS in my website to be inside the grey box but in a new colour ie Green
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
so then, all you need to do is use the code I provided you. Type NEWS in the title section and change the rgb accordingly.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
Try this...

<!--
<div style="border-top: 3px solid green; border-left: 3px solid green; border-right: 3px solid green; padding: 10px; text-align: center; background-color: rgb(153, 102, 0); color: rgb(51, 255, 51);"><b><font face="Arial" size="3">Title</font></b></div> <div style="border-style: solid; border-color: green; border-width: 2px 3px 3px; padding: 10px; text-align: justify; background-color: rgb(166, 109, 51); color: rgb(0, 51, 0);" align="left"><strong><font face="Arial" size="2">Body Information/Text</font></strong></div>
-->

You won't want the same colors, change the title background color with the first rgb and the body background color with the third rgb. The title text is the second rgb and the body text is the second rgb. The text should be able to be changed using the palette.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
No Donald this is not what Im looking for my boxes have rounded corners etc and all i need is an added code if its possible as explained above!!
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
Yea, LOL. I don't want to be a bearer of bad news but... LOL, your colors can't be changed anyways LOL

I have to go for now, but if you don't get this solved by tomorrow, I'll try to work with it for you. :)
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
just a hint to fix this. My code works almost the way you want, if you search the internet, you might be able to find out how to round corners, I infact, think Duke might know how. Maybe you can use my code to round the corners. Just a suggestion. I'll talk to you tomorrow, I gotta get some rest before I gotta wake up and go work for four measly hours.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Craig

A really easy way to format your text is to add your code to the HTML button on your text toolbar. Then you can use the text toolbar to edit your text as you please. You can add color, bold, etc..

I hope that helps!
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
yea, but you can't add background color that way. That's what he's referring to.

He wants his title BACKGROUND color to be different from that of his body background.

Craig,

With your code, you can duplicate the code in the same html editor and it'll make another one of the same but with a very small space in between (another words, the body portion won't be connected to the title portion) but if you work it right, your users will clearly know what's a title and what's not even though in different tables. That's always an option.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Yeah I kind of want it the way Duke has his although with mine I want the rounded corners Sanja??
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Here are a few rounded corner applications that you can use to generate your code:

http://www.roundedcornr.com/

http://roundedcornermaker.com/

http://cssround.com/

http://www.css3.info/preview/rounded-... (this ones just gives you the css for it)

I hope that helps. Please let me know if you have further questions.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
I already have rounded corners, im looking for a code to change the colour of my heading within this box to another colour rather than the grey which I wsh to stay the same for my content!! I want it to look similar to that of Duke's but obviously my boxes have the round corners......
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Craig

I've been going over this quite a few times and unfortunately, I am not able to make it work. One thing I did note though is that the code you're using does not work on IE. This is a known bug with IE. I don't know if you want to continue using that code or not.

Probably the best thing to do is to use one that has images for your corners. Here's one that may work for you: http://www.vertexwerks.com/tests/side...

John Mc also suggest a bunch of different sites that enable you to do rounded corners. You can look at this thread here: http://forum.yola.com/yola/topics/i_w...
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Hi Sanja I have given up the idea lol but what is frustrating me at the minute is i cannot for some reason change the colour of my rouded text boxes by changing the background colour html code?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Craig

To change the background color, look for this snippet of code:

background-color: #F6F6F6

Replace #F6F6F6 with a different hex value number.

Let me know if you have trouble with this.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Its good Sanja I tried that but it wasnt working but I have sorted out what the problem was!!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I'm glad you were able to figure out how to resolve the problem. :)
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
yea Craig, like I said above, you can't change the code anyways. I tried and couldn't, but if you sorted out the problem, maybe you were successful at changing the color. It was funny to change the code that creates the color and the color didn't change.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Hi donald it was to do with the same code being used in multiple boxes but the thing you have to change is the . craigbox to another name of your chice and ensure the div code matches this and you can create multiple boxes like this in different colours!!