adding text boxes into posts with certain heights and colours

• 

  naddybags · Member · Jan 7, 2014 at 12:58 am

  • Copy link
  • Add topic to favorites

  Basically I want to make 4 text boxes. The background colour should be #571B3C and the text would be bold, white and in Arvo font. The text boxes should be the width of the text and with a 27 height. And be able to put the boxes on the same row with images in between.

  If you want more details:
  I am struggling a little bit making some text boxes. Me and my friend are making a blog dedicated to reviewing games.
  At the top of each post I would like to have basic information on the games set out. I have 4 simple images representing player numbers, average time of play, cost, and type of game. Next to each image I want text with the values.

  I know I can make an image in paint and upload it but that would mean changing the values and uploading everytime we do a review so I would prefer text boxes in the css so i can have a draft post template we can use

  If that makes sense can someone please help!

  The blog I need help with is: (visible only to logged in users)

• 

  justpi · Member · Jan 7, 2014 at 9:19 am

  • Copy link

  Assuming the height of the images is 27px, here’s one way to do it:

  Text editor:

  <p class="info">
  <img src="IMAGE1 URL HERE" /><span>INFO1</span><img src="IMAGE2 URL HERE" /><span>INFO2</span><img src="IMAGE3 URL HERE" /><span>INFO3</span><img src="IMAGE4 URL HERE" /><span>INFO4</span>
  </p>

  CSS editor:

  .info span {
  background-color: #571B3C;
  color: #FFFFFF;
  display: inline-block;
  font-size: 90%;
  font-weight: bold;
  margin: 0 10px;
  padding: 3px 8px;
  vertical-align: top;
  }

• 

  naddybags · Member · Jan 7, 2014 at 1:24 pm

  • Copy link

  Hi!
  Thank you so much.
  I have one follow up question. The images I am using are little white icons with the purple background. So is there a way to eliminate the gaps between the images and the text.
  Thank you for your help. I was going crazy trying to figure it out on my own.
  Nads

• 

  justpi · Member · Jan 7, 2014 at 4:02 pm

  • Copy link

  You’re welcome.
  To eliminate the gaps, turn this:
  margin: 0 10px;
  to:
  margin: 0;

  But if you want no gaps, and if the purple of the images is the same as the bg color for the text, this could be done in a simpler way. So give me the URL of one of the icons please.

• 

  naddybags · Member · Jan 8, 2014 at 1:33 am

  • Copy link

  yeah the images are 27px high and same purple shade. The urls for them all are:
  http://ludimusinlondinio.files.wordpress.com/2014/01/meeple2.png?w=720
  http://ludimusinlondinio.files.wordpress.com/2014/01/time2.png?w=720
  http://ludimusinlondinio.files.wordpress.com/2014/01/money2.png?w=720
  http://ludimusinlondinio.files.wordpress.com/2014/01/gameplay2.png?w=720

  And they would be appearing in that order.

  Thanks again.

• 

  justpi · Member · Jan 8, 2014 at 7:47 am

  • Copy link

  Text editor:

  <p class="info">
  <img src="IMAGE1 URL" />INFO1<img src="IMAGE2 URL" />INFO2<img src="IMAGE3 URL" />INFO3<img src="IMAGE4 URL" /> INFO4
  </p>

  CSS editor:

  .info {
  background-color: #571B3C;
  color: #FFFFFF;
  display: inline-block;
  font-size: 90%;
  font-weight: bold;
  line-height: 1.7;
  padding-right: 3px;
  }
  .info img {
  vertical-align: bottom;
  }

  Change the 90% to adjust the size of the text, change the 1.7 to adjust its vertical positioning.

  Note: the URL of the images is up to and including “png”. The “?w=720” part means display a 720px wide version if the original is wider than that, so you don’t need it.

• 

  naddybags · Member · Jan 15, 2014 at 11:51 pm

  • Copy link

  Hi
  Just wanted to say thank you again. Have made all the alterations and it works!!!
  And now I’m editing all the old posts to make them fit lol.
  Thank you for help