Eleven40 theme blockquote in widget area

Community Forums Forums Design Tips and Tricks Eleven40 theme blockquote in widget area

This topic is: not resolved

This topic contains 4 replies, has 2 voices, and was last updated by  mikeohope 10 months, 2 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #88854

    mikeohope
    Member
    Post count: 4

    Hi everyone

    Hoping someone can help me (almost no CSS skills) with the appearance of a testimonial in the sidebar on Eleven40.

    I have used blockquote to add the testimonial but as you can see it pushed it across so that it looks a bit weird. http://bit.ly/1kVNQBS

    Is is relatively easy to retain the font and styling but to wrap around the quotation mark and to utilise the full width of the widget space?

    I only want to change the blockquote for this specific area – not across the site.

    Any tips would be greatly appreciated.

    Cheers
    Mike

    • This topic was modified 10 months, 2 weeks ago by  mikeohope.
    • This topic was modified 10 months, 2 weeks ago by  mikeohope.
    http://bit.ly/1kVNQBS
    #88864

    nutsandbolts
    Keymaster
    Post count: 3202

    You could probably use .sidebar .blockquote in your stylesheet to style only that instance of the blockquote.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #88877

    mikeohope
    Member
    Post count: 4

    Thanks Andrea

    To be honest I would not know where to start. I see that there is a particular font under blockquote in the CSS edit but have no idea where I would add the sidebar change or how I would get it to wrap around (novice).

    #88878

    nutsandbolts
    Keymaster
    Post count: 3202

    Okay, here’s what I would do if it was me personally.

    Use a text widget and put this in (replacing the text with your own).

    <img class="alignleft" src=http://highprofileenterprises.com/wp-content/themes/eleven40/images/blockquote.png><em>Text of the block quote goes here.</em>

    The image class will allow the text to wrap around the image, and the <em> tags will make the text italic. So it’s not an actual blockquote but it will look like one. Hopefully that makes sense!


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #88882

    mikeohope
    Member
    Post count: 4

    Thanks very much.

    That’s very helpful. I’ll give it a try and let you know how I get on.

    Cheers Andrea

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.