Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Topic started by: Spectrum..!! on July 14, 2011, 01:15:31 PM

Title: Theme with rounded quote.
Post by: Spectrum..!! on July 14, 2011, 01:15:31 PM
What would be the theme or the code (see annex)?

SMF 2.0

Thank you.
Title: Re: Theme with rounded quote.
Post by: Deaks on July 14, 2011, 06:04:13 PM
that can be done in index.css using css3 just search for the word quote
Title: Re: Theme with rounded quote.
Post by: ARG01 on July 15, 2011, 12:06:29 AM
Look for this in index.css:
/* A quote, perhaps from another post. */
blockquote.bbc_standard_quote, blockquote.bbc_alternate_quote
{
font-size: x-small;
color: #000;
line-height: 1.4em;
background: url(../images/theme/quote.png) 0.1em 0.1em no-repeat;
border-top: 2px solid #99A;
border-bottom: 2px solid #99A;
padding: 1.1em 1.4em;
margin: 0.1em 0 0.3em 0;
overflow: auto;
}


Change to:
/* A quote, perhaps from another post. */
blockquote.bbc_standard_quote, blockquote.bbc_alternate_quote
{
font-size: x-small;
color: #000;
line-height: 1.4em;
background: url(../images/theme/quote.png) 0.1em 0.1em no-repeat;
border: 3px solid #000; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius:
padding: 1.1em 1.4em;
margin: 0.1em 0 0.3em 0;
overflow: auto;
}


Change the 3px and the #000 to your border size and color preferences.  ;)
Title: Re: Theme with rounded quote.
Post by: Sir Osis of Liver on July 15, 2011, 12:29:56 AM

Does that work in IE?

Title: Re: Theme with rounded quote.
Post by: ~DS~ on July 15, 2011, 01:02:53 AM
People still use IE? :P
Title: Re: Theme with rounded quote.
Post by: Deaks on July 15, 2011, 03:15:11 AM
may work on new versions of ie
Title: Re: Theme with rounded quote.
Post by: Joker™ on July 15, 2011, 04:40:38 AM
I think the quote style shown in OP attachment are making use of box-shadow also.

☺Spectrum..!!☻ you want to add that shadow effect read more about it here (http://css-tricks.com/snippets/css/css-box-shadow/).
Title: Re: Theme with rounded quote.
Post by: Spectrum..!! on July 15, 2011, 07:06:48 AM
Worked well in IE:


border: 3px solid #000; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius:  5px;


Tks guys.
Title: Re: Theme with rounded quote.
Post by: Joker™ on July 15, 2011, 07:15:07 AM
Quote from: ☺Spectrum..!!☻ on July 15, 2011, 07:06:48 AM
Worked well in IE:
IE 9? If yes try it on IE 8 also if you care about IE.

I doesn't even test my themes on it. If someone is on IE he/she don't  deserve a nice layout, coz when we have so many decent browsers out there why a user is still stuck at IE.
Title: Re: Theme with rounded quote.
Post by: Spectrum..!! on July 15, 2011, 07:21:12 AM
Yes, it was in IE9 on the IE8 think I can see that.
Title: Re: Theme with rounded quote.
Post by: Sir Osis of Liver on July 15, 2011, 02:42:41 PM

I'll try it in 8.  Thx.

Title: Re: Theme with rounded quote.
Post by: ARG01 on July 15, 2011, 05:21:42 PM
Seems to work for me in all browsers. I have not tried it in IE6 but then again, anyone still using IE6 is just asking to have serious issues.  ;D
Title: Re: Theme with rounded quote.
Post by: Spectrum..!! on July 16, 2011, 10:40:22 AM
Want to see the work in IE 6?

See annex...
Title: Re: Theme with rounded quote.
Post by: ARG01 on July 16, 2011, 11:16:24 AM
Quote from: ☺Spectrum..!!☻ on July 16, 2011, 10:40:22 AM
Want to see the work in IE 6?

See annex...

IE6 is a dinosaur so I wouldn't be too pressed to work extra time to get any cod to accommodate it.  ;)