Code change to rearrange word placement

• 

  randysmith52 · Member · Aug 28, 2015 at 3:55 pm

  • Copy link
  • Add topic to favorites

  On one of my wordpress blogs I would like to make a change in the code. As you can see in this post, https://gracequotesorg.wordpress.com/counseling ….the words (book title and author) are all centered and lowered after the book icon. Can you assist me to get the words justified left and possibly raised in each box? Just looking for some fine-tuning to make the wording look better? Thanks very much!

  Here is the original code:

  <table border=”0″ cellpadding=”3″ cellspacing=”0″ width=”100%”> <tr> <td valign=”top”><img title=”526071: Instruments in the Redeemer"s Hands: People in Need of Change, Helping People in Need of Change” align hspace alt=”526071: Instruments in the Redeemer"s Hands: People in Need of Change, Helping People in Need of Change” width=”180″ border=”0″ height=”180″ vspace src=”http://ag.christianbook.com/g/product/5/526071.gif” /></td> <td valign=”top”><b>Instruments in the Redeemer’s Hands: People in Need of Change, Helping People in Need of Change</b>
  By Paul David Tripp </td> </tr> </table>

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

• 

  g471n · Member · Aug 28, 2015 at 4:17 pm

  • Copy link

  Hi randysmith52

  Try the following line of custom CSS.

  .entry-content td {
      vertical-align: middle;
      display: inline-block;
  }

• 

  g471n · Member · Aug 28, 2015 at 4:18 pm

  • Copy link

  To enter custom CSS

  Select Appearance > Customize > CSS from your Admin Dashboard and enter the custom CSS there.

  You need to be on the WordPress.com Premium Plan for custom CSS to save. You can only preview custom CSS on the free plan.

• 

  randysmith52 · Member · Aug 28, 2015 at 4:24 pm

  • Copy link

  Thanks! Where in my code should I be entering the new code you passed along? Kind of new at this :)

• 

  randysmith52 · Member · Aug 28, 2015 at 4:24 pm

  • Copy link

  Thanks! Where in my code should I be entering the new code you passed along? Kind of new at this :)

• 

  timethief · Member · Aug 28, 2015 at 4:31 pm

  • Copy link

  I have an different solution that does not require upgrading.

  See here please > http://en.support.wordpress.com/visual-editor/#alignment

  The alignment icons in the WordPress editor are for aligning text; they are not for aligning images. They are used to achieve wrapping text around images on either the right or left hand side, or to display an image that’s centered without text on either side of it.

  Align-left means position left, with the rest of the content wrapping around the right side of the image.

  Align-right means position right, with the rest of the content wrapping around the left side of the image.

  Align-center means position center, with no wrap-around (= the rest of the content below the image).

  If the text beside the images does not occupy the same amount of space that the image beside it does then the text wrapping will continue and the images and text that follow will have a staggered appearance.

  To prevent the staggered effect what you do is insert the following snippet of code into the Text (HTML) editor after each image/text pair:
  <div style="clear:both;"></div>

• 

  randysmith52 · Member · Aug 28, 2015 at 4:35 pm

  • Copy link

  I tried pasting the code in my CSS but can’t get it to make a difference.

• 

  randysmith52 · Member · Aug 28, 2015 at 4:36 pm

  • Copy link

  Thanks, timethief, I’ll take a look!

• 

  timethief · Member · Aug 28, 2015 at 4:38 pm

  • Copy link

  I tried pasting the code in my CSS but can’t get it to make a difference.

  What I posted is not a CSS editing solution. I hope it works for you.

• 

  randysmith52 · Member · Aug 28, 2015 at 4:43 pm

  • Copy link

  Timetheif, can you give me an example of where your code needs to be inserted using my original code:

  <table border=”0″ cellpadding=”3″ cellspacing=”0″ width=”100%”> <tr> <td valign=”top”><img title=”526071: Instruments in the Redeemer”s Hands: People in Need of Change, Helping People in Need of Change” align hspace alt=”526071: Instruments in the Redeemer”s Hands: People in Need of Change, Helping People in Need of Change” width=”180″ border=”0″ height=”180″ vspace src=”http://ag.christianbook.com/g/product/5/526071.gif” /></td> <td valign=”top”><b>Instruments in the Redeemer’s Hands: People in Need of Change, Helping People in Need of Change</b>
  By Paul David Tripp </td> </tr> </table>

• 

  g471n · Member · Aug 28, 2015 at 4:43 pm

  • Copy link

  The code timethief gave you needs to be used in the HTML in your page editor.

  The CSS I gave you needs to be entered and saved in the custom CSS editor.

  To enter custom CSS

  Click Appearance > Customize > CSS from your Admin Dashboard and enter the custom CSS there.

  You need to be on the WordPress.com Premium Plan for custom CSS to save. You can only preview custom CSS on the free plan.

• 

  randysmith52 · Member · Aug 29, 2015 at 1:12 pm

  • Copy link

  Thanks to all for your assistance, but…

  g471n, I tried pasting the code in my CSS window, but it made no difference. Does this CSS feature only apply to my premium account and not a different wordpress site I operate and have connected?

  timethief, I tried pasting your code in various places in the html code with no success. Can you look at my example from above and tell me exactly where to paste your code?

  Thanks again, Randy

• 

  g471n · Member · Aug 29, 2015 at 2:54 pm

  • Copy link

  Hi Randy

  The CSS code I gave you only applies to your WordPress.com site – gracequotesorg.wordpress.com and is specific to the theme you are using.

  You need to be on the WordPress.com Premium Plan for custom CSS to save.