Coordinating color of quote picture...? ~ at Runboard.com


Temple of Illusia
 »  Illustrated Secrets of Design .
 »  »  Coordinating color of quote picture...?
Support | Search Illusia

   Runboard       

Jump to Page:  1  2 

 
NeverMINDtheBOLLOCKS
Citizen
Worldly Traveler

Registered: 09-2007
Province: New York
Posts: 6
Karma: 0 (+0/-0)
Avatar
Reply | Quote
Coordinating color of quote picture...?

Hi. emoticon

I've seen several posts about this already, but not pertaining to what I need help with...

When you
quote
 something, I noticed some boards it show a little " picture next to it. I kinda would like this on my board... problem is, not only do I have no clue how to put it there, I'm not sure about the colors. I have no idea how to make it work so it matches the board, especially since the posts are a different shade of green every other one. Is there any way I can do this? Do I even need to? It's okay if you can't help, I'm just tweaking the board a bit. emoticon

Last revised by NeverMINDtheBOLLOCKS, 4/3/2008, 6:03 pm


---
ImageImageImageImage
Image
4/3/2008, 5:57 pm PM NeverMINDtheBOLLOCKS AIM
 
Lesigner Girl
Minerva
Worldly Traveler (premium)
Runboard staff member
Registered: 11-2005
Province: SW MI, USA
Posts: 5128
Karma: 89 (+103/-14)
Avatar
Reply | Quote
Re: Coordinating color of quote picture...?

Welcome to Illusia, nMtB! emoticon

It helps if you have a decent image editor like Photoshop or the Gimp. To make it easy, copy this quote mark “ and paste it in as text, using bold Times New Roman or Georgia (or another serif font that makes nice curly quotes), hex color code #188718, and a font size somewhere between 40-70px should work, depending on how big you want it. You could use a different color, but this shows light on the dark and dark on the light quite well.

If you don't have a decent image editor, just let me know what font style and font size and I'll make one for you. You should be able to determine this by taking a screen grab of a quote at your board, pasting it to paint, and then using the text tool to add a quote to it.

Save this image with a png extension and upload to your image host.

It looks best if you take "quote:" out of your Custom Language set, then use this in your CSS:

.postlistquotedtext blockquote {
   padding-left: 20px;
   background:url(http://url_to_quote.png) left top no-repeat;
}

* html .postlistquotedtext blockquote {
   background:none;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://url_to_quote.png',sizingMethod='crop');
}


The 2nd half of that is a hack for IE6 and lower, which don't support png transparency without using the IE-proprietary filter. You need to replace both bolded parts with the url to your image, because you are speaking to different browsers with each half of that CSS.

For the padding-left, leave enough padding to accommodate your quote image.

Let me know if you need more help. emoticon

Last revised by Lesigner Girl, 4/3/2008, 8:51 pm


---
Image
Customization tutorials & Q&A
4/3/2008, 8:49 pm PM Lesigner Girl Read Blog
 
NeverMINDtheBOLLOCKS
Citizen
Worldly Traveler

Registered: 09-2007
Province: New York
Posts: 6
Karma: 0 (+0/-0)
Avatar
Reply | Quote
Re: Coordinating color of quote picture...?

I really don't have Photoshop or any of that... it'd be great if you could help.

And for the font, I'm trying not to be too picky, but I'd like it to look something like this (with the color you suggested emoticon ) around size 60 or so (unless you think another size looks better) I just did this in paint....

Image

For that I used a font called "Perpetua Titling MT"... but I flipped it horizontally, so it was facing the other way. I can't really find a font that looks like that on it's own, and I know I sound like a total crazy person right now, haha... I just want it to be right. XD

---
ImageImageImageImage
Image
4/4/2008, 8:18 am PM NeverMINDtheBOLLOCKS AIM
 
NeverMINDtheBOLLOCKS
Citizen
Worldly Traveler

Registered: 09-2007
Province: New York
Posts: 6
Karma: 0 (+0/-0)
Avatar
Reply | Quote
Re: Coordinating color of quote picture...?

Wow... I just reread that. I sound waaay too picky. Just Times New Roman would be awesome. XD

---
ImageImageImageImage
Image
4/4/2008, 3:20 pm PM NeverMINDtheBOLLOCKS AIM
 
Lesigner Girl
Minerva
Worldly Traveler (premium)
Runboard staff member
Registered: 11-2005
Province: SW MI, USA
Posts: 5128
Karma: 89 (+103/-14)
Avatar
Reply | Quote
Re: Coordinating color of quote picture...?

I don't have that font and it doesn't look free, but I managed to cheat and get a nice black and white copy to work from here. emoticon

[ edited images out because I took them off my site ]

Take your pick, and please upload it to your own image host because I'll be deleting it from mine. Then just use the CSS I posted above and voila! emoticon


Edit: I'm pretty picky myself. emoticon

Last revised by Lesigner Girl, 4/5/2008, 3:02 pm


---
Image
Customization tutorials & Q&A
4/4/2008, 10:27 pm PM Lesigner Girl Read Blog
 
NeverMINDtheBOLLOCKS
Citizen
Worldly Traveler

Registered: 09-2007
Province: New York
Posts: 6
Karma: 0 (+0/-0)
Avatar
Reply | Quote
Re: Coordinating color of quote picture...?

Thank you sooo much! emoticon You're the best. emoticon

---
ImageImageImageImage
Image
4/5/2008, 10:44 am PM NeverMINDtheBOLLOCKS AIM
 
Lesigner Girl
Minerva
Worldly Traveler (premium)
Runboard staff member
Registered: 11-2005
Province: SW MI, USA
Posts: 5128
Karma: 89 (+103/-14)
Avatar
Reply | Quote
Re: Coordinating color of quote picture...?

You're very welcome, Gen! emoticon

---
Image
Customization tutorials & Q&A
4/5/2008, 3:01 pm PM Lesigner Girl Read Blog
 
Pastor Rick
Citizen
Worldly Traveler (premium)

Registered: 07-2005
Province: Texas Country
Posts: 222
Karma: 7 (+8/-1)
Avatar
Reply | Quote
Re: Coordinating color of quote picture...?

I used a gif image with my board (transparent background) and just needed this in my CSS:

blockquote {
background-image: url(http://i81.photobucket.com/albums/j212/pelinor/quoteleft.gif);background-repeat:no-repeat
}

---
Image
·TNZ·DE·TRD·ITB·
4/7/2008, 8:59 pm PM Pastor Rick Read Blog
 
Lesigner Girl
Minerva
Worldly Traveler (premium)
Runboard staff member
Registered: 11-2005
Province: SW MI, USA
Posts: 5128
Karma: 89 (+103/-14)
Avatar
Reply | Quote
Re: Coordinating color of quote picture...?

I did that here as well, but it wouldn't have looked right with the color of the image being lighter than the dark background and darker than the light background.

---
Image
Customization tutorials & Q&A
4/8/2008, 7:48 pm PM Lesigner Girl Read Blog
 
Pastor Rick
Citizen
Worldly Traveler (premium)

Registered: 07-2005
Province: Texas Country
Posts: 222
Karma: 7 (+8/-1)
Avatar
Reply | Quote
Re: Coordinating color of quote picture...?

Just got up for a glass of water... We really could use a 2nd text color option for the posted message areas...

---
Image
·TNZ·DE·TRD·ITB·
4/9/2008, 12:54 am PM Pastor Rick Read Blog
 


Add to this discussion

Jump to Page:  1  2 




Powered by AkBBS 0.9.5b  -  Link to us   -  Blogs   -  Hall of Honour   -  Chat
Click here to get your own free message board
You are not logged in (login)      Board's time is: 12/1/2008, 7:40 pm EDT
Back To Top
Runboard Stats