Made new quote and code styles

[Joker™]

tbh i see this better in tips and tricks than as a mod

yup im also thinking as coding is too theme specific i must put code in open . So should i start a new thread for codes ?

[Bugo]

So should i start a new thread for codes ?

Not necessarily.

[Antechinus]

Everything looks bad in IE but wasn't implying your design was bad - more the case of just wondering if there was new code that worked for IE (just deluding myself really lol)

I've used similar code to do corners on themes I've made and you just have to accept the downfall's of IE and hope that more and more people make the migration over to "better" browsers

That's why I still use images for rounded corners. IE is still the world's most popular browser whether we like it or not, and people do want their sites to look good to all visitors.

[Joker™]

So here we go FOR SMF2.0 RC3


I'm mentioned this whole stuff for default theme, (try ourself for your own theme , it may work )


themes\default\index.css


Find:

Code Select Expand


/* 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;
}

/* Alterate blockquote stylings */
blockquote.bbc_standard_quote
{
   background-color: #d7daec;
}
blockquote.bbc_alternate_quote
{
   background-color: #e7eafc;
}



Replace:

Code Select Expand


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

/* Alterate blockquote stylings */
blockquote.bbc_standard_quote
{
   background-color: #f2f6f8;
}
blockquote.bbc_alternate_quote
{
   background-color: #f2f6f8;
}





Find:

Code Select Expand


/* A code block - maybe PHP. */
code.bbc_code
{
   display: block;
   font-family: "dejavu sans mono", "monaco", "lucida console", "courier new", monospace;
   font-size: x-small;
   background: #eef;
   border-top: 2px solid #999;
   border-bottom: 2px solid #999;
   line-height: 1.5em;
   padding: 3px 1em;
   overflow: auto;
   white-space: pre;
   /* Show a scrollbar after about 24 lines. */
   max-height: 24em;
}

/* The "Quote:" and "Code:" header parts... */
.codeheader, .quoteheader
{
   color: #666;
   font-size: x-small;
   font-weight: bold;
   padding: 0 0.3em;
}



Replace:

Code Select Expand


/* A code block - maybe PHP. */
code.bbc_code
{
display: block;
font-family: verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
font-size:9pt;background: #edf0e3;
color: #3a3a3a;
border: 1px solid #AFBA81;line-height: 1.5em;
padding:3px 1em;
overflow: auto;
white-space: pre;
/* Show a scrollbar after about 24 lines. */
max-height: 24em;
}

/* The "Quote:" and "Code:" header parts... */
.codeheader, .quoteheader
{
color: #333;
font-size: 0.9em;
font-weight: bold;
padding: 0 0.3em;
}

.codeheader a
{
color:#fefefe;
}

.codeheader
{
color:#fff;
background:#787F58;
border-left:2px solid #787F58;
padding:1px 0.5em;
}



Add quote1.png(attached here) to themes\default\images\theme


Note: Do make backup of your index.css before trying the above codes


Also for Internet Explorer there will be no round curved borders in Quotes.To see the IE look Click here


For changes see attached pics

[Nibogo]

Note: This mod wasn't approved in the Mod Site because is CSS Invalid isn't any serious but people should know it when do the changes.

Moved to Tips and Tricks

[Joker™]

Note: This mod wasn't approved in the Mod Site because is CSS Invalid isn't any serious but people should know it when do the changes.

Moved to Tips and Tricks

*EDIT , the code i used validates on CSS3.

http://jigsaw.w3.org/css-validator/  << is validating as per CSS 2.1 standards , can curve modification will surely fail to pass that.

[waruna]

I'm using SMF 2 RC2.0 but the code in index.css is totally different from yours. How to attach the file so that you can take a look at my css file? Thanks a lot.

[Joker™]

I'm using SMF 2 RC2.0 but the code in index.css is totally different from yours. How to attach the file so that you can take a look at my css file? Thanks a lot.

RC2 has venerability , my advice upgrade to RC3.

If you want to continue put ur file code in [ code ] [ /code ] tag here , if i get time ,i'll see it

[big red]

  Hello

  2 things:

#1 - how to add the quote (reverse) image to the"end" of the quote?

#2 - how to wrap the quote around the words only?. By this i mean, sometimes i only wish to quote a few words in a sentence and want the quote to "end" after the last word instead of running the entire length of the post.

    Thanks!

[Joker™]

#1 - how to add the quote (reverse) image to the"end" of the quote?

USe some software like Photoshop etc, reverse the image and adjust the css code accordingly

#2 - how to wrap the quote around the words only?. By this i mean, sometimes i only wish to quote a few words in a sentence and want the quote to "end" after the last word instead of running the entire length of the post.

You mean what i did just right now (quoting your 2 questions separately)?
Just put the words between the quote tag which you want to quote.

[big red]

#1 - how to add the quote (reverse) image to the"end" of the quote?

USe some software like Photoshop etc, reverse the image and adjust the css code accordingly

#2 - how to wrap the quote around the words only?. By this i mean, sometimes i only wish to quote a few words in a sentence and want the quote to "end" after the last word instead of running the entire length of the post.

You mean what i did just right now (quoting your 2 questions separately)?
Just put the words between the quote tag which you want to quote.

    No 

   #1 - the quote image (the 2 little dots at the beginning) - can this be included at the "end" of the message?

   #2 - i mean if someone says "nice post" and i want to quote "nice post", i want the quote background to "end" right after nice post. Right now, it doesn't end after post - it continues on the entire width of the post.

[big red]

"nice post"

  See - the whole way across the post - i want it to stop after these 2 words 

[lucas-ruroken]

css3?

[big red]

css3?

  Hello

    Sorry but i'm definitely still in the code learning stage 

[lucas-ruroken]

I don't see all topics.... yeah! it's css3

[Chalky]

Thank you, this has worked great!!  I like the idea of having a close quote at the end, only where in the code would I need to add this?