HELP with boxed info

  • 1
  • Question
  • Updated 9 years ago
  • Answered
Trying to get a rounded box with a Header attached to the top of it so that I can also type within it to put on my website has anyone got any ideas how to do this code I have tried but cant get the box to work out as below: -

Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes

Posted 9 years ago

  • 1
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
where did you get the screen shot? leave the URL.
Photo of Ruth

Ruth

  • 2819 Posts
  • 135 Reply Likes
Thanks for your help with this, Lee.
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Hey Craig

Check this thread out it may be exactly what you are looking for my friend...

http://forum.yola.com/yola/topics/the...

It is super easy and straight forward.

Happy site building
Ed

You can find me with my head in the honey pot here..

You can find many of my threads here... Just look for the light bulbs
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Hi Duke,

I seen it here: - http://gr0w.com/ but I bviously would like may own heading different colours etc

Cheers

C
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Thanks Ed but its not what im looking for but handy to bookmark that page cheers

C
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Hi Craig,

I looked at the site but they are using some pretty advanced CSS which is hard to break down.

After an hour (yes an hour, you owe me one) of research i have found the easiest to apply code which is similar to what you show above. (although maybe the options Ed gave would be eaiser)

This goes in a html widget at the top of the page.

*{ font-family: tahoma; } fieldset { border:1px solid green } legend { padding: 0.2em 0.5em; color:green; font-size:90%; text-align:right; }

Then add a 2 column widget and in 1 column add a text box... click the html funtion button and add this code there

Title Add your content here


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

By adding it to the text widget you will be able to just add text and format it like you normally would in a text widget. (remeber to add the code first in the html function) - by using the 2 column widget you can control the width of the box.

If you want to change the color its in the CSS part - color:green

Let me know if its ok - Lee.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
thats great lee but how do you get the title centred?
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
<!--

sorry craig -

not all the code show'd up

<fieldset> <legend align="center">Title</legend> <p>Add your content here<br></p> </fieldset>

-->
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
cheers for that lee only problem is it shows up grey no matter if you change the css, strange?
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
oops my mistake its working now!
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
it will show without colour in the site builder but will work on the published site. Thats because your using a text widget.

Is it ok for you? - Not exactly as you wanted i know - the rounded corners are a big story - If i get a spare hour sometime i'll work out how to do it.

:) Lee.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Cheers Lee it will do for me just now. Thanks for you help yet again i will try the rounded corners see if i get somewhere!!