Creating a text box with tint background

  • Author
    Posts
  • #704642

    ontheliner
    Member

    Is it possible to drop a box of text, set on a colour-tinted background, into the main column of my blog, and position it either set left or right, so that text wraps round it, just as with a photograph? Your Support pages include such a box tinted blue and containing “Contents” and “Related” links
    Thanks – Shapersofthe80s.com

    The blog I need help with is shapersofthe80s.com.

    #704899

    Sure it is. Example code (to be used in the HTML editor, of course):

    <div style="width:120px;float:right;background-color:#HEX;margin-left:18px;padding:12px;">
    BOXED TEXT HERE
    </div>REGULAR TEXT HERE

    Replace HEX with the code for the color you prefer; good palettes here:
    http://www.december.com/html/spec/color.html
    Change the width number to adjust the width of the colored box.
    Change the margin-left number to adjust the space between the regular text and the box.
    Change the padding number to adjust the space between the borders of the colored box and the text inside it.

    Further adjustments or refinements possible, if necessary.

    #704946

    ontheliner
    Member

    Excellent! And I see I can change the font style within the box with a <span> command. Thanks panaghiotisadam

    #704950

    You’re welcome.

    The span tag is used for characters, words or phrases inside a paragraph. If you wish to change the font style of all the boxed text, you don’t use a span tag, you add the right command to the rest of the commands of the div tag that controls the box. I can make this clearer for you if you link to the post or page in question.

    #704976

    ontheliner
    Member

    Understood – it works just as you say. (I’ve been picking up the basics of html as I go!)

    Thanks again.

The topic ‘Creating a text box with tint background’ is closed to new replies.