0
Welcome Guest! Login
0 items Join Now

SOLVED Blockquote Inside Articles

Last Post
Search Topic

  • SOLVED Blockquote Inside Articles

    Posted 14 years 3 months ago
    #614443
    • JeffShinn's Avatar
    • JeffShinn
    • Sr. Rocketeer
    • Posts: 122
    • Thanks: 1
    • Software Engineer (BS CET/MS CS)

    Re: SOLVED Blockquote Inside Articles

    Posted 14 years 3 months ago
    • You could style it using a span from within the editor. Use CSS to style the block of text with a background image of the quotes snd the text to be bold and the slightly different color. Once you have the style named (say "stylized-quotes" you can reference that in your span in the article creation.

      This is how I create custom header tags and such and add icons to headers.

      Hope that helps and was clear enough :D

      EDIT: I found this article which may be very helpful too: www.smashingmagazine.com/2008/06/12/bloc...-and-good-practices/

      Jeff
    • When someone is impatient and says, "I haven't got all day," I always wonder, How can that be? How can you not have all day?
    #614827
    • Yves's Avatar
    • Yves
    • Preeminent Rocketeer
    • Posts: 9214
    • Thanks: 5

    Re: SOLVED Blockquote Inside Articles

    Posted 14 years 3 months ago
    • Hyperion, for example, has blockquote styles like you are looking for, look at the class="quotes":
      demo.rockettheme.com/jun08_j15/index.php...temid=28#blockquotes

      CSS used:
      blockquote.quotes {
     display: block;
     background: url(../images/typo/quote-start.png) 0 5px no-repeat;
     padding: 0px 20px 0 38px;
     margin: 20px 0;
     font-size: 120%;
     line-height: 150%;
     width: auto;
     color: #666;
     border: 0;
     }
 
blockquote.quotes p {
     padding: 0 38px 0 0;
     margin-top: 0;
     background: url(../images/typo/quote-end.png) 100% 100% no-repeat;
     }
    • Yves
    #614842

  • Re: SOLVED Blockquote Inside Articles

    Posted 14 years 3 months ago
    • Thank you, Jeff! This has definitely led me in the right direction. I can't seem to get this to work, but I know I must be pretty darn close.

      Here's my CSS:
      stylized-quotes {
background-image: url(images/open-quote.png);
background-repeat: no-repeat;
background-position: left 5px;
padding-left: 30px;
font-style: italic;
}
stylized-quotes span {
background-image: url(images/close-quote.png);
background-repeat: no-repeat;
background-position: right bottom;
display: block;
padding-right: 30px;
}

      Here's my HTML from within the article:
      <blockquote style="text-align: center;"><span class="stylized-quotes">Everyone knows to use block quotes as a way to highlight, well, a quote. And while this is a good technique to use, you should also try a pull quote every once in a while.</span></blockquote>

      Here's the published article:
      dhoulmagus.nintendonerds.com/news/ds/ite...t-vi-how-i-love-thee

      EDIT: I just recently changed ".stylized-quotes" to this "stylized-quotes" in my CSS and still cannot see the quote images.
    • Last Edit: 14 years 3 months ago by NintendoNerds.
    #614869
    • JeffShinn's Avatar
    • JeffShinn
    • Sr. Rocketeer
    • Posts: 122
    • Thanks: 1
    • Software Engineer (BS CET/MS CS)

    Re: SOLVED Blockquote Inside Articles

    Posted 14 years 3 months ago
    • Hey not a problem!

      I think I found the problem, it is with your images/close-quote.png and images/open-quote.png. Those point ot within the CSS directory, you need out of there, so just change each to:

      background-image: url(../images/open-quote.png);
      background-image: url(../images/close-quote.png);

      That should do it

      Jeff
    • When someone is impatient and says, "I haven't got all day," I always wonder, How can that be? How can you not have all day?
    #614878
    • JeffShinn's Avatar
    • JeffShinn
    • Sr. Rocketeer
    • Posts: 122
    • Thanks: 1
    • Software Engineer (BS CET/MS CS)

    Re: SOLVED Blockquote Inside Articles

    Posted 14 years 3 months ago
    • Oops, your images are outside the template directory actually, so you can either move them to the "/templates/rt_zephyr_j15/images/" directory or point the background image to where they are, which is:

      dhoulmagus.nintendonerds.com/images/

      so you'll need a few more of the double periods...more like

      background-image: url(../../../images/open-quote.png);
      background-image: url(../../../images/close-quote.png);

      I would most likely myself put them in the template's image directory as they are styled to fit the template currently used. Just a thought...

      Jeff
    • When someone is impatient and says, "I haven't got all day," I always wonder, How can that be? How can you not have all day?
    #614883

  • Re: SOLVED Blockquote Inside Articles

    Posted 14 years 3 months ago
    • OK, I moved them to the "/templates/rt_zephyr_j15/images/" and I'm still not seeing them in the article. :shock:
    #614900
    • JeffShinn's Avatar
    • JeffShinn
    • Sr. Rocketeer
    • Posts: 122
    • Thanks: 1
    • Software Engineer (BS CET/MS CS)

    Re: SOLVED Blockquote Inside Articles

    Posted 14 years 3 months ago
    • I am using FireBug in Chrome and I am not seeing the call to the beginning and end quote backgrounds anymore. The quote has changed, so check to see if you have accidentally deleted the class calls in the HTML view of the editor, happens to me all the time on those WYSIWYG editors like TinyMCE. This is why I love the RokPad extension...

      Don't you love the troubleshooting aspect of web dev? I drive myself crazy sometimes over these little things :cheesy:

      Don't forget now that the images are moved you still need to add one single ../ to your background call in your CSS so that it isn't looking in the CSS directory for images/blahblahblah

      Good luck

      Jeff

      NOTE: Got meeting the rest of the day so I will not be able to check this thread again until tonight so hopefully everything works out perfectly :)
    • When someone is impatient and says, "I haven't got all day," I always wonder, How can that be? How can you not have all day?
    #614919

  • Re: SOLVED Blockquote Inside Articles

    Posted 14 years 3 months ago
    • Well, this is what I'm using:

      Here's my CSS:
      stylized-quotes {
background-image: url(images/open-quote.png);
background-repeat: no-repeat;
background-position: left 5px;
padding-left: 30px;
font-style: italic;
}
stylized-quotes span {
background-image: url(images/close-quote.png);
background-repeat: no-repeat;
background-position: right bottom;
display: block;
padding-right: 30px;
}

      Here's my HTML from within the article:
      <blockquote style="text-align: center;"><span class="stylized-quotes">Don't be surprised if you're taking on the role of a hero trying to rescue and rid the world from evil. If you're a Dragon Quest fan, this is only to be expected.</span></blockquote>
    • Last Edit: 14 years 3 months ago by NintendoNerds.
    #614937

  • Re: SOLVED Blockquote Inside Articles

    Posted 14 years 3 months ago
    #614945

Time to create page: 0.073 seconds