Jump to content


Photo
- - - - -

Custom CSS Speech Bubbles


  • Please log in to reply
1 reply to this topic

#1 buildingblocks

buildingblocks

    Member

  • Members
  • 14 posts

Posted 26 July 2012 - 05:11 AM

OK, I think I'm getting in a little over my head here, but I'm having fun! I am trying to create speech bubbles for the quotes on my "Join Us" page (

Please Login or Register to see this Hidden Content

) and found a website that claims to do it with custom CSS:

Please Login or Register to see this Hidden Content

Since I only want to do this for the one page, I first installed a Wordpress plugin:

Please Login or Register to see this Hidden Content

and then copy and pasted the CSS code from the site listed above into a .css file and FTPd it all to my pagelines theme directory. Here's the code that the site supplied: /* Bubble with an isoceles triangle ------------------------------------------ */ .triangle-isosceles { position:relative; padding:15px; margin:1em 0 3em; color:#000; background:#f3961c; /* css3 */ -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; background:-moz-linear-gradient(top, #f9d835, #f3961c); background:linear-gradient(top, #f9d835, #f3961c); } /* creates triangle */ .triangle-isosceles:after { content:""; display:block; /* reduce the damage in FF3.0 */ position:absolute; bottom:-15px; left:50px; width:0; border-width:15px 15px 0; border-style:solid; border-color:#f3961c transparent; } I added the
markings to the HTML of my Join Us page, but nothing seems to be happening. Like I said, I can follow directions, but otherwise I am in a little deep! Thanks for your great support and service. This community has been outstanding. -Dianna

#2 Stefan

Stefan

    Business Manager

  • Administrators
  • 158 posts
  • LocationTransylvania
  • Framework Version:trunk
  • Country: Country Flag

Posted 26 July 2012 - 09:16 AM

Hey there, So instead uploading a custom CSS file, just use a selector for the page, like: body.page-id-123 {CSS code here} Of course you replace the page ID with your page's id. And you add the code to the Custom CSS box located in PageLines > Site Options > Custom Code. Let us know if that works! :)