Box with text in

  • 2
  • Question
  • Updated 9 years ago
  • Answered
Hi all
I would like to know if it is possible to make or draw a box
then put text in it, an example is http://www.total-fishing.com/
or do you have to use HTML
Many thanks

Steve
Photo of SteveC

SteveC

  • 29 Posts
  • 0 Reply Likes

Posted 9 years ago

  • 2
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Hi Steve.

There are numerous ways to create a box with Yola.

It depends if you want rounded corners or not.

This is a great resource for making rounded corner box's of your own... http://www.roundedcornr.com/

I use box's on my site http://hexham.info -- Its an easy method but because IE sucks it shows as square corners, Chrome, Firefox and Safari show rounded.
The good thing about the method i use is that it does not require images so you can easily change the colour and the gradient of the corners.
If you like the box's on my site and want the code just ask.

For a very simple box just use this code.
<!--

<div style="width: 100%; padding: 10px; background-color: #ffffff; border: 1px solid #CCCCCC;">
<br>
</div>

-->
You can change the width, padding and the border and background colour.

If you add that code to a text widget using the html editor you will just beable to type straight into it.

Lee.
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Thanks Lee! Good stuff :)
Photo of SteveC

SteveC

  • 29 Posts
  • 0 Reply Likes
Hi Lee
Using IE at the moment, may have to change
Will let you know how I get on
Thanks
Steve
Photo of JC

JC

  • 354 Posts
  • 15 Reply Likes
Question for UK Duke, Am also so interested in this. I do have code for rounded corners, but have no idea how to make like yours on your site.
Is it possible to advise code, if you do not mind? ie, similar to the ones for the images in boxes on your 'places' page??? Hugely appreciated if you can.
Thank you.
JC
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Hi JenC,

I left you the code for the boxs on my site below, i just re read your question, the boxs on my places page are done with Picnik.com
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
@ JenC

This is the code for rounded corners.

Instructions
As there is alot of code its better to use CSS. That just means instead of writing all the code every where we want the box's we write it once then call it.

You can either add section 1 (below) to a HTML widget at the top of every page that you want the box's to appear on, or if your using Yola Pro you can copy the CSS to a file and link to it from each page.

With section 2 (below) you add this code exactly where you want the boxs 'to be, add the code to a text widget through the HTML editor then just edit the text box as you normally would.

SECTION 1 - Add or Link to every page.
<!--

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

border: 1px solid #CCCCCC;
border-width: 1px;

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

-->
I have split the code into 4 pieces, first the box, then its the border, then the 2 sets of rounded corner code, these both do the same thing for different browsers, so always have the moz- and the webkit- values the same.

SECTION 2 - Add directly to the page where you want the box
<!--

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

-->

If you need any more advice on changing any of the border or box characteristics just ask.

Lee.
Photo of JC

JC

  • 354 Posts
  • 15 Reply Likes
Hi, thanks for this. Have worked a while and fine. One question, and am probably tired as have worst toothache and dentist unsure where from! So not so good! Anway back to concentrating ... Can you advise on how I centre box on the page. Do I use "center" somewhere??? thanks.
Photo of JC

JC

  • 354 Posts
  • 15 Reply Likes
Duke, many thanks, again. Quick question on this .... if I would like to add dots or dashes around the box? How to do so? Only other question was the centre on page thing,but asked that just now. So will await your answer for that. Am so out of touch of design, used to do way back when it all started. Lots to relearn. Again, much appreciated.
JenC
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
You could probably just add an align="center" to the div code
<!-- <div align="center" class="yolaboxlee"> -->

To add a dotted or dasked line change the css, now it reads
border: 1px solid #CCCCCC;
make it:
border: 1px dotted #CCCCCC;
or
border: 1px dashed #CCCCCC;