News:

Wondering if this will always be free?  See why free is better.

Main Menu

Quote&Code Enhanced!

Started by A.M.A, August 24, 2004, 06:54:13 PM

Previous topic - Next topic

A.M.A

This is some effect I've found in other forums and like it.

Sample:



1. Upload the two images ( - ) to your 'Themes\default\images' folder.
2. Open 'style.css' and look for :
/* A quote, perhaps from another post. */
.quote
{
color: #000000;
background-color: #C3B8D0;
border: 1px solid #000000;
margin: 1px;
padding: 1px;
font-size: x-small;
}

/* A code block - maybe even PHP ;). */
.code
{
color: #000000;
background-color: #cccccc;
border: 1px solid #000000;
padding: 1px;
font-family: "courier new", helvetica, "times new roman", serif;
font-size: x-small;
width: 99%;
margin: 1px auto 1px auto;
white-space: nowrap;
overflow: auto;
}

/* The "Quote:" and "Code:" header parts... */
.quoteheader, .codeheader
{
color: #000000;
text-decoration: none;
font-style: normal;
font-weight: bold;
font-size: x-small;
}

delete it and replace it with this one:
/* A quote, perhaps from another post. */
.quote
{
border-left: #808080 6px solid;
border-right: #808080 1px solid;
border-bottom: #808080 1px solid;
padding-right: 4px;
padding-left: 4px;
padding-bottom: 4px;
padding-top: 4px;
margin: 0px auto 8px;
color: #465584;
background-color: #ffffff;
font-size: x-small;
}

/* The "Quote:" header parts... */
.quoteheader
{
border-left: #808080 6px solid;
border-right: #808080 1px solid;
border-top: #808080 1px solid;
padding-right: 3px;
padding-left: 3px;
padding-bottom: 3px;
padding-top: 3px;
font-weight: bold;
font-size: 13px;
margin: 8px auto 0px;
color: #000000;
background-position: right 50%;
background-image: url(images/quoteh.gif);
background-repeat: no-repeat;
background-color: #f2f3f4;
}

/* A code block - maybe even PHP ;). */
.code
{
border-left: #c0c0c0 1px solid;
border-right: #c0c0c0 1px solid;
border-bottom: #c0c0c0 1px solid;
border-top: #e1e1e1 1px solid;
padding-right: 2px;
padding-left: 2px;
padding-bottom: 2px;
padding-top: 2px;
margin: 0px auto;
width: 99%;
color: #465584;
background-color: #f2f3f4;
font-family: courier new, helvetica, times new roman, serif;
font-size: x-small;
white-space: nowrap;
overflow: auto;
}

/* The "Code:" header parts... */
.codeheader
{
border-left: #c0c0c0 1px solid;
border-right: #c0c0c0 1px solid;
border-top: #c0c0c0 1px solid;
padding-left: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-top: 2px;
font-weight: bold;
font-size: 13px;
margin: 0px auto;
width: 99%;
color: #000000;
background-position: right 50%;
background-image: url(images/codeh.gif);
background-repeat: no-repeat;
background-color: #f7f7f7;
}
Really sorry .. real life is demanding my full attention .. will be back soon hopefully :)

Cypher7

looks nice!

what does a quote within a quote look like?

A.M.A

Quote from: Cypher7 on August 24, 2004, 07:04:23 PM
looks nice!

what does a quote within a quote look like?
like this:
Really sorry .. real life is demanding my full attention .. will be back soon hopefully :)

Cypher7


A.M.A

Really sorry .. real life is demanding my full attention .. will be back soon hopefully :)

Tony Reid

Tony Reid

[darksteel]




Luis "[darksteel]" Alvarado.
Spanish Support
¿Qué es el repair_settings?
No doy soporte por PM, publica tu duda en el foro y tendras respuestas mas rapidas.
My forum:
www.caamboard.com

nil

Very nice!

It looks very professional.

Søren Bjerg

Awesome! Saw this on another forum some time ago too (can't remember which it was), and wanted to get it on mine too... but I never got around to trying how to do it... so this is great :).

*thumbs up*
RUNE HORDES dot INFO - SMF 1.1.10 w/ Custom Profile Mod... and various permissions hooks and template changes (new topic form).

Ben_S

Liverpool FC Forum with 14 million+ posts.

A.M.A

thanks all :) am glad you find it of use.
Really sorry .. real life is demanding my full attention .. will be back soon hopefully :)

Cypher7

Quote from: Ben_S on September 12, 2004, 12:00:49 PM
Nice, added it to my board.

Ben, just a heads up... it doesn't seem to be working properly on your site... tried in IE and Firefox??

Tristan Perry

Quote from: Cypher7 on September 13, 2004, 12:24:41 PM
Ben, just a heads up... it doesn't seem to be working properly on your site... tried in IE and Firefox??
It works fine for me, tested in IE and Firefox...Is it just Ben's board you see the quote like that?

Cypher7

Quote from: Tau Online on September 13, 2004, 12:47:31 PM
Quote from: Cypher7 on September 13, 2004, 12:24:41 PM
Ben, just a heads up... it doesn't seem to be working properly on your site... tried in IE and Firefox??
It works fine for me, tested in IE and Firefox...Is it just Ben's board you see the quote like that?

Yup... although I've only checked a few... and by a few, I mean one!!

Søren Bjerg

The quotes on Ben_S's site looks like they're supposed to in those threads I just checked out (using Firefox) :).
RUNE HORDES dot INFO - SMF 1.1.10 w/ Custom Profile Mod... and various permissions hooks and template changes (new topic form).

Ben_S

#15
Quote from: Cypher7 on September 13, 2004, 12:24:41 PM
Quote from: Ben_S on September 12, 2004, 12:00:49 PM
Nice, added it to my board.

Ben, just a heads up... it doesn't seem to be working properly on your site... tried in IE and Firefox??

Hmm, odd works fine in firefox for me, not looked in IE but noone has mentioned anything.

Just looked in IE and it looks ok too, although as a side note I've just noticed it stops the css from validating, will take a look at that tomorrow.
Liverpool FC Forum with 14 million+ posts.

Cypher7

Quote from: Ben_S on September 13, 2004, 07:32:39 PM
Hmm, odd works fine in firefox for me, not looked in IE but noone has mentioned anything.

Just looked in IE and it looks ok too, although as a side note I've just noticed it stops the css from validating, will take a look at that tomorrow.

Just tried using IE/Firefox on a brand new XP Pro machine... same problem!?!

Søren Bjerg

Mozilla/5.0 (Windows; U; Windows NT 5.1; rv:1.7.3) Gecko/20040913 Firefox/0.10
IE 6.0.2900.2180.xpsp_sp2_rtm.040803-2158

Still looks right to me in both.
RUNE HORDES dot INFO - SMF 1.1.10 w/ Custom Profile Mod... and various permissions hooks and template changes (new topic form).

Ben_S

Odd, looks fine to me in both IE and Firefox on 3 different computers.

My members don't seem to like it though.
Liverpool FC Forum with 14 million+ posts.

Cypher7

Quote from: Ben_S on September 14, 2004, 01:45:41 PM
Odd, looks fine to me in both IE and Firefox on 3 different computers.

My members don't seem to like it though.

Odd indeed, I tried it on my machine at home and my bro's machine... and still it wasn't putting the link in properly!?

Members probably don't like it cos they don't like change...!

[Unknown]

I suggest:

/* A quote, perhaps from another post. */
.quote
{
border-left: #808080 6px solid;
border-right: #808080 1px solid;
border-bottom: #808080 1px solid;
padding: 4px;
margin: 0px auto 8px;
color: #465584;
background-color: #ffffff;
font-size: x-small;
}

/* The "Quote:" header parts... */
.quoteheader
{
border-left: #808080 6px solid;
border-right: #808080 1px solid;
border-top: #808080 1px solid;
padding: 3px;
font-weight: bold;
font-size: small;
margin: 8px auto 0px;
color: #000000;
background-position: center right;
background-image: url(images/quoteh.gif);
background-repeat: no-repeat;
background-color: #f2f3f4;
}

/* A code block - maybe even PHP ;). */
.code
{
border-left: #c0c0c0 1px solid;
border-right: #c0c0c0 1px solid;
border-bottom: #c0c0c0 1px solid;
border-top: #e1e1e1 1px solid;
padding: 2px;
margin: 0 auto;
width: 99%;
color: #465584;
background-color: #f2f3f4;
font-family: "courier new", helvetica, "times new roman", serif;
font-size: x-small;
white-space: nowrap;
overflow: auto;
}

/* The "Code:" header parts... */
.codeheader
{
border-left: #c0c0c0 1px solid;
border-right: #c0c0c0 1px solid;
border-top: #c0c0c0 1px solid;
padding: 2px;
font-weight: bold;
font-size: small;
margin: 0 auto;
width: 99%;
color: #000000;
background-position: center right;
background-image: url(images/codeh.gif);
background-repeat: no-repeat;
background-color: #f7f7f7;
}


That should validate, methinks.  Also, it should more reliably show the image in the right place.

-[Unknown]

Ben_S

Will test it tomorrow. although will reduce the font and graphic size as people seem to hate it and prefair the original way of doing quote. Fancy features eh, who needs em ;).
Liverpool FC Forum with 14 million+ posts.

Ben_S

That validates, change the font size a bit, looks good.
Liverpool FC Forum with 14 million+ posts.

Cypher7

looks well...

I hate to be a royal pain in the ass... buuuut, it still doesn't show the links for me, no matter where I look from.

Is it anything to do with the fact that I am viewing as a guest?

Ben_S

Parsing of YSE style quotes doesn't work properly in RC1. Try a newer post with a quote.
Liverpool FC Forum with 14 million+ posts.

[Unknown]

Quote from: Ben_S on September 19, 2004, 02:29:47 PM
Parsing of YSE style quotes doesn't work properly in RC1. Try a newer post with a quote.

It works here, though, right?

Quote from: Roper on September 19, 2004, 02:29:47 PM
test

-[Unknown]

Ben_S

Liverpool FC Forum with 14 million+ posts.

Cypher7

Quote from: Ben_S on September 19, 2004, 02:29:47 PM
Parsing of YSE style quotes doesn't work properly in RC1. Try a newer post with a quote.

Yup... sorry I kept visiting the same page, with that post/quote! It was working the whole time...

oops :-[

Ben Dragon

This is an excellent modification which I have adapted into my system along with some minor tweaks like text colour modification within the quotes.

However, I've found that if there is a quote nested within a quote the text within that nested quote is blue.

Since I have my quote background set to blue this makes it difficult to read.

While finding the line that affects the main quote window text colour has been easy, I cannot find the line that modifies the text colour of the quote nested within a quote.

Can anyone offer some direction?

A.M.A

try changing the red line:
Quote.quote
{
border-left: #808080 6px solid;
border-right: #808080 1px solid;
border-bottom: #808080 1px solid;
padding: 4px;
margin: 0px auto 8px;
color: #465584;
background-color: #ffffff;
font-size: x-small;
}
Really sorry .. real life is demanding my full attention .. will be back soon hopefully :)

Ben Dragon

That changes the text colour for the main quote window, but didn't effect the quote within quote window.

:(

[Unknown]

In your CSS, do you have:

.quote .quote

Or something?  By default, quotes within quotes should (I think) be the same as any others.

-[Unknown]

Ben Dragon

#32
Before going any further with this I have a question;

        Would the "Quote" script pick up the colour of the text from the original post?

        i.e., if someone was quoting this text you are reading, (which is blue), would it come out as blued text in the quoted reply?

If it does, as I'm beginning to suspect, then I think I've found the problem.



A.M.A

Quote from: Ben Dragon on October 04, 2004, 10:34:16 PM
Before going any further with this I have a question;

        Would the "Quote" script pick up the colour of the text from the original post?

        i.e., if someone was quoting this text you are reading, (which is blue), would it come out as blued text in the quoted reply?

If it does, as I'm beginning to suspect, then I think I've found the problem.



yes it does
Really sorry .. real life is demanding my full attention .. will be back soon hopefully :)

Ben Dragon

Quote from: A.M.A on October 04, 2004, 11:32:41 PM
Quote from: Ben Dragon on October 04, 2004, 10:34:16 PM
Before going any further with this I have a question;

        Would the "Quote" script pick up the colour of the text from the original post?

        i.e., if someone was quoting this text you are reading, (which is blue), would it come out as blued text in the quoted reply?

If it does, as I'm beginning to suspect, then I think I've found the problem.



yes it does

Heh, heh, heh...  :)

Well, that settles that.

Thanks for your help!
:D

Kirby

You are awesome A.M.A., this is really cool :)

FileHeaven

#36
Work on all web browsers now :D
I think this style is better than your classic ... : D
I've made it​​...
This is Code Img

This is Quote Img


/* A quote, perhaps from another post. */
.quote
{
   border: #fddb9b 1px solid;
   border-radius: 15px;   padding: 3px;
   margin: 0px auto 8px;
   color: #3a3a3a;
background: #fff6e6; /* old browsers */
background: -moz-linear-gradient(top, #fff6e6 0%, #feeed3 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff6e6), color-stop(100%,#feeed3)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff6e6', endColorstr='#feeed3',GradientType=0 ); /* ie */
   font-size: 10px;
}

/* The "Quote:" header parts... */
.quoteheader
{
   border: #fddb9b 1px solid;
   border-radius: 15px;   padding: 3px;
   font-weight: bold;
   font-size: 12px;
   margin: 8px auto 0px;
   color: #3a3a3a;
background: #feeed3; /* old browsers */
background: -moz-linear-gradient(top, #feeed3 0%, #fddb9b 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feeed3), color-stop(100%,#fddb9b)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feeed3', endColorstr='#fddb9b',GradientType=0 ); /* ie */
}


/* A code block - maybe even PHP ;). */
.code
{
   border: #afcdeb 1px solid;
   border-radius: 15px;   padding: 3px;
   margin: 0px auto 8px;
   color: #3a3a3a;
      background: -webkit-gradient(linear,left top, left bottom, from(#e6efff), to(#d3e3fe));
   font-size: 10px;
}

/* The "Code:" header parts... */
.codeheader
{
   border: #afcdeb 1px solid;
   border-radius: 15px;   padding: 3px;
   font-weight: bold;
   font-size: 12px;
   margin: 8px auto 0px;
   color: #3a3a3a;
background: #D3E3FE; /* old browsers */
background: -moz-linear-gradient(top, #D3E3FE 0%, #AFCDEB 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#D3E3FE), color-stop(100%,#AFCDEB)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D3E3FE', endColorstr='#AFCDEB',GradientType=0 ); /* ie */
}


Sorry for my bad english :/

Arantor

Just remember that -webkit-gradient doesn't work on IE, Firefox or Opera...

FileHeaven

#38
I use GoogleChrome and worf fine

Arantor

Yes, which isn't IE, Firefox or Opera... Which is 90% of the browser users out there who don't see the effect.

FileHeaven

hahahhaha  :D :D :D :D :D... If someone knows how to make this that can see everyone??


Advertisement: