Possible to change blockquote image of The Journalist theme?

• 

  shimworld · Member · Oct 20, 2008 at 12:27 am

  • Copy link
  • Add topic to favorites

  I’m enjoying The Journalist theme everyday except that I think the blockquote image that it uses doesn’t do justice to its great design.

  Example: http://shimworld.wordpress.com/2008/10/09/save-the-sharks-save-the-world-stop-shark-finning/

  the blockquote right below the image look OK with the gray quotation marks image but the one that appears in comments doesn’t look that appealing. There were times I noticed the graphic doesn’t appear completely in certain posts.

  SAVE THE SHARKS SAVE THE WORLD. STOP SHARK FINNING.

  I have seen other themes that use a simple yet elegant vertical line. It’s not a big problem but just wondering out loud if this can be changed.

• 

  vivianpaige · Member · Oct 20, 2008 at 3:48 am

  • Copy link

  If you have the CSS upgrade, yes.

• 

  shimworld · Member · Oct 20, 2008 at 9:37 am

  • Copy link

  CSS upgrade, that I have. I tried to search here to no avail and while Google gave me good results, the tips are applicable for self-hosted WordPress themes. Aside from an indented vertical line on the left of the text, I see you have a gray box which is also neat.

• 

  vivianpaige · Member · Oct 20, 2008 at 12:18 pm

  • Copy link

  It’s really simple: in the CSS code for the blockquote, there is a background image
  ‘
  blockquote {
  background:url(images/quote.gif) no-repeat top left;
  padding:0 0 0 60px;
  min-height:50px;
  }

  `
  Instead of the image, use a color (if you want) and add a border.

• 

  shimworld · Member · Oct 20, 2008 at 10:52 pm

  • Copy link

  Thanks Vivianpaige

  I settled with this after I came across a tip from http://codex.wordpress.org/CSS_Troubleshooting and added your background tip to remove the theme’s quotation marks

  blockquote {
  position:relative;
  background:url(images/quote.gif) no-repeat top left;
  border-left:solid blue 2px;
  margin:10px 50px;
  padding:5px;
  }

  Having come this far, I have another question. Which setting controls how far the blue line extends beyond the last sentence? I notice the bottom bit is consistently longer than the top.

  Same example http://shimworld.wordpress.com/2008/10/09/save-the-sharks-save-the-world-stop-shark-finning/

• 

  vivianpaige · Member · Oct 21, 2008 at 3:01 am

  • Copy link

  It’s probably the margin – try playing with it. (And if I can make a suggestion – try a different shade of blue – that one seems awfully bright for the theme)

• 

  shimworld · Member · Oct 23, 2008 at 7:52 am

  • Copy link

  I’ve finally settled with a dotted line and a light gray box although there are a number more ways to enhance it but risks over doing it. Your earlier suggestion to install the Firefox CSS add-on helped me understand how a reference blog had done it and I just tweaked the line thickness and colour.

  blockquote {
  position:relative;
  background:#F5F4F4 url(images/quote.gif) no-repeat top left;
  border-left:1px dotted #2c455b;
  margin:8px 30px;
  padding:8px;
  }

• 

  vivianpaige · Member · Oct 23, 2008 at 1:26 pm

  • Copy link

  Yes. Only thing is you no longer need

  url(images/quote.gif) no-repeat top left

  in the background line. As you can see, it is being overridden by the color.

• 

  shimworld · Member · Oct 23, 2008 at 1:35 pm

  • Copy link

  Great. Thanks again!