HTML to 'Box' in content

  • 1
  • Question
  • Updated 8 years ago
  • Answered
So, I'm in search of some HTML help today, in terms of 'boxing in' my content.

The ambition I have is to set some of my content, which mainly consists of small images/graphics, with a different colour behind it, as if it is in a box. I assume you could use HTML to add this 'box' into part of the background.

The alternate solution of putting all the graphics in an image editing programme and adding the background/box would not be convenient, due to the constantly changing content of the box, and the fact that the images/graphics are all hyperlinked to different destinations.

Any help will be greatly appreciated.
Photo of Jim Trott

Jim Trott

  • 84 Posts
  • 9 Reply Likes
  • unsure

Posted 8 years ago

  • 1
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Do you mean something like...

www.journee.co.uk?

If so, I can help...
Photo of Jim Trott

Jim Trott

  • 84 Posts
  • 9 Reply Likes
Indeed, something like that. Lovely website, by the way.
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hi Jim,
Looks like Andi's going to give you a hand with this one - thanks, Andi!
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Thanks Tim, I have Yola Silver so I can add custom CSS to all of my website but, if you are Yola Free, you will have to add the CSS to every page. The way to create boxes like that are as follows:

PLEASE NOTE: I have had to add <!--- and ---> to the lines of HTML code so that the Yola forum does not try and work this code. Please leave these out when using the code on your website.

Create the CSS. This may sound complicated but it really isn't, follow it logically and it will work. My CSS is as follows:

div.contentbox-wide{
width: 860px;
background-position:center;
background: #FFF url('resources/css/modules/css_box_hatch_wide_header.png') no-repeat;
background-position:100% 0%;
border:medium #FF6600 solid ;
padding:5px;
padding-top:1px;
font-family: Gill Sans MT, Arial,Helvetica,sans-serif;
font-size:14px;
color:#000000;
margin-bottom: 4px;
margin-left: -3px;
line-height:100%;
}

I also have different content boxes for narrow and times but these are just because they are different sizes.

I shall now explain what all of the CSS means:

div.contentbox-wide{
--- This is the name you will apply to the CSS block, keep it simple as you will have to add this name to all of your text boxes or HTML Widgets - make it logical. The name MUST be in the following format: div.(insert name here) it is best practise to apply something like contentbox-(with variations here) --- (Required)

width: 860px;
--- This is how wide you want your content box --- (Required)

background-position:center;
--- This is telling the browser where to position the image of the background of the Content box --- (Recommended)

background: #FFF
--- This applies a background colour to the content box. For all of the colour codes, visit: http://html-color-codes.com/ (optional, if left blank, it will have a blank background)

url('resources/css/modules/css_box_hatch_wide_header.png') no-repeat;
--- This provides the link to the image - make sure that it starts from the resources/... as lots of people make the mistake of using "sitebuilder/restricted" and this is only viewable to people logged in to your Yola account. You can use this link but make sure that you delete all of the address before the resources/.... The no-repeat bit means that my image will not repeat itself. You could change this to repeat-x (which will make it repeat across the content box) or repeat-y (repeat down the content box). You could have "repeat-x repeat-y" to repeat across and down. --- (Required)

background-position:100% 0%;
--- This is standard, it tells the browser where to put the background image ---
(Required)

border:medium #FF6600 solid ;
--- This is the border around the outside. You can change the colour (use the above link) and you can change the border style - dashed or dotted (instead of solid) --- (recommended - looks better and houses the content)

padding:5px;
--- Padding is the amount of space inside the box, you can have padding-top -bottom -left or-right, I used this to make the text stand away from the edges of the box. --- (optional but recommended for certain images)

padding-top:1px;
--- Padding-top is the amount of space between the top of the box and any content, you can have padding-top -bottom -left or-right, I used this to make the title central in the image. --- (optional but recommended)

font-family: Gill Sans MT, Arial,Helvetica,sans-serif;
--- This applies a text to the content box, you can change this but I recommend that you keep it the same as the rest of your website --- (Optional)

font-size:14px;
--- Rather obvious this one... --- (Optional)

color:#000000;
--- This is the text colour --- (Optional)

margin-bottom: 4px;
--- This determines the amount of space at the bottom of the content box between the box and the next piece of content. I would recommend about 4-5 pix. --- (optional but recommended)

margin-left: -3px;
--- Same as above but, determines the amount of space to the left. I used a negative number because I wanted the content box to be central across the page. --- (Optional)

line-height:100%;
--- This determines how big the gap is between the lines of text. I used this because it allows me more control, for less advanced users of CSS, best to leave this one out... --- (Optional)
}

Now, once you have created your CSS (I would recommend that you create it in either Dreamweaver or in Notepad, and save somewhere on your system.

Copy all of the code and paste either into the CSS editor (Yola Silver or Premium users only) or into a HTML Widget (Free Users) at the top of every page where you would like the Content Boxes.

Now, find the section of content where you would like the content box, if it is a HTML widget (like the maps I have) paste the following code at the top of the HTML widget. <!---"<div class="box-name">"---> replacing box-name with the name you applied to the CSS code (the first line). Then, at the end of the HTML widget, add <!---"</div>"--->. Make sure that the <!---"<div class="box-name">"---> is at the start, so that the browser knows which part of the content you want in the content box, and make sure that the <!---"</div>"---> is at the end so that the browser knows where to end the Content box.

If you are applying this to a text box, click inside the text box to open up the Yola Text Toolbar, then click on the HTML button at the end, and then add the <!---"<div class="box-name">"---> before the <!---"<p> &nbsp </p>"---> and add the "" after, this again tells the browser where to place the content.

Hope this helps, if you have any issues let me know. If I have missed anything out, please let me know!

Kind Regards,

Andi North
Photo of Jim Trott

Jim Trott

  • 84 Posts
  • 9 Reply Likes
Hi Andi,

That's incredibly helpful! Really quite wonderful that you explained what each line of CSS means and all.

The only hitch I can see is that I'd quite like to box images in, and I've done so using the Image Widget, which doesn't have the option of editing HTML, as far as I'm aware. Is there a workaround for this?

Thanks again!
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Hi Jim,

Glad you liked it, thought that I would try and make it as simple as possible for you. I need to dig a bit deeper into exactly what you would like from these content modules.

Okay, are the image all of different widths? (Height does not matter)

Please could you also share the URL of your website so that we can look closer. I am not aware of a work around at the moment but, I would suggest that you use an HTML Widget and insert the images that way.

The code would be as follows:

<!---

<div class="box-name"><p><font class="Apple-style-span" size="5" color="#FFFFFF"><b>IMAGE TITLE GOES HERE</b></font></p>

<img style="width: 818px; margin: 4px; padding: 0px;" src="IMAGE LINK IN HERE">
</div>

--->

Andi
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Fantastic help Andi! Thanks!!
Photo of Jim Trott

Jim Trott

  • 84 Posts
  • 9 Reply Likes
Hi Andi,

The URL is: This one, TVPres.UK

The images on the frontpage, the graphics, which display what has recently been updated are the images I'd like to have 'boxed' in. So, the BBC HD, BBC One, BBC Two boxes and so on. They are all the same size.

Regards,

Jim
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Okay, of you could describe how you would like the boxes to look, whether you would like them to have headings, or whether you would like a background for them.

If you could post the images so that I could see exactly what you need then that would also be very helpful.

To post the images, post the link in the format:
http://http://tvpresuk.yolasite.com/r... location here)

Thanks.
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Okay, what you'll need to do is to set up the CSS with the appropriate code, then using an HTML widget, use either of the following codes:

If you would like a title for the images...
<!---

<div class="box-name"><p><font class="Apple-style-span" size="5" color="#FFFFFF"><b>IMAGE TITLE GOES HERE</b></font></p>

<img style="width: 818px; margin: 4px; padding: 0px;" src="IMAGE LINK IN HERE">
</div>

--->

If you do not want a title

<!---

<div class="box-name">

<img style="width: 818px; margin: 4px; padding: 0px;" src="IMAGE LINK IN HERE">
</div>

--->

You can then change the links to the images and it will work. You will also have to add the name of your CSS code into it - instead of box-name, use the name you've alloacated in your CSS.
Photo of Jim Trott

Jim Trott

  • 84 Posts
  • 9 Reply Likes
Thanks ever so much Andi! That works brilliantly.
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
No problem, glad it worked and that you're happy!