Quote Box Outline Theme

[salmo]

Is it possible to get a more distinctive box around quoted text in a reply.

Thanks in advance for your help,

salmo

[Tumbleweed]

I'm not sure what you mean about distinctive but you can style it pretty much how you want it via  Admin > Themes >Advanced Styles & Visual Editor and then toward the bottom you click on quote to put in your styles.

Is there something specific you were wanting to do that isn't an option there?

[Stinky666]

May 12, 2013 12:00:28 GMT -8 salmo said:

Is it possible to get a more distinctive box around quoted text in a reply.

Thanks in advance for your help,

salmo

How about adding a arrow, such as like: exdat.freeforums.net/post/213

If so, you can achieve it by doing the below..

---

Add Arrows To Quotes in Posts

Admin > Themes > Advanced Styles & C.S.S > Style Sheet
Scroll to the very bottom line. Place your cursor and press enter 2 times.
Highlight the below, ctrl+c (copy) and then ctrl+v (paste) it into the new line in the style sheet.

/* CSS Arrows for Quotes (Posts) */
div.message > div.quote { position: relative; background: #3a474d; border: 1px solid #3a474d; padding: 1px; }
div.message > div.quote:after, div.message > div.quote:before { top: 19px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
div.message > div.quote:after { border-color: rgba(58, 71, 77,.0); border-bottom-color: #3a474d; border-width: 11px; left: 0%; margin-left: -20px; transform: rotate(270deg); -ms-transform: rotate(270deg); /* IE 9 */ -webkit-transform: rotate(270deg); /* Safari and Chrome */ }
div.message > div.quote:before { border-color: rgba(58, 71, 77,.0); border-bottom-color: #3a474d; border-width: 13px; left: 0%; margin-left: -25px; margin-bottom:-3px; transform: rotate(270deg); -ms-transform: rotate(270deg); /* IE 9 */ -webkit-transform: rotate(270deg); /* Safari and Chrome */ }

The brown parts are the hex colours you want your border to be.
The purple part is how far you want your arrow to be from the top of the quotes border.
The red part is the RGB Decimal of your border. Go to colorhexa.com and type in your hex, click search and then
on the left side you should see "RGB Decimal", replace the above "58, 71, 77" with your one - leave rgba( and .0) as they are.

[salmo]

May 22, 2013 6:41:02 GMT -8 Stinky666 said:

May 12, 2013 12:00:28 GMT -8 salmo said:

Is it possible to get a more distinctive box around quoted text in a reply.

Thanks in advance for your help,

salmo

How about adding a arrow, such as like: exdat.freeforums.net/post/213

If so, you can achieve it by doing the below..

---

Add Arrows To Quotes in Posts

Admin > Themes > Advanced Styles & C.S.S > Style Sheet
Scroll to the very bottom line. Place your cursor and press enter 2 times.
Highlight the below, ctrl+c (copy) and then ctrl+v (paste) it into the new line in the style sheet.

/* CSS Arrows for Quotes (Posts) */
div.message > div.quote { position: relative; background: #3a474d; border: 1px solid #3a474d; padding: 1px; }
div.message > div.quote:after, div.message > div.quote:before { top: 19px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
div.message > div.quote:after { border-color: rgba(58, 71, 77,.0); border-bottom-color: #3a474d; border-width: 11px; left: 0%; margin-left: -20px; transform: rotate(270deg); -ms-transform: rotate(270deg); /* IE 9 */ -webkit-transform: rotate(270deg); /* Safari and Chrome */ }
div.message > div.quote:before { border-color: rgba(58, 71, 77,.0); border-bottom-color: #3a474d; border-width: 13px; left: 0%; margin-left: -25px; margin-bottom:-3px; transform: rotate(270deg); -ms-transform: rotate(270deg); /* IE 9 */ -webkit-transform: rotate(270deg); /* Safari and Chrome */ }

The brown parts are the hex colours you want your border to be.
The purple part is how far you want your arrow to be from the top of the quotes border.
The red part is the RGB Decimal of your border. Go to colorhexa.com and type in your hex, click search and then
on the left side you should see "RGB Decimal", replace the above "58, 71, 77" with your one - leave rgba( and .0) as they are.

Hi Stinky,

You have a very cool website.

I followed your instructions and added the code to the style page an it enhances the look of the quote but it only works after the post is created.

Is there a way of altering how it looks while the user is editing the reply?


Thanks for your help.

PS How do you make your avatars come alive that is very cool

[Stinky666]

May 24, 2013 10:59:57 GMT -8 salmo said:

May 22, 2013 6:41:02 GMT -8 Stinky666 said:

How about adding a arrow, such as like: exdat.freeforums.net/post/213

If so, you can achieve it by doing the below..

---

Add Arrows To Quotes in Posts

Admin > Themes > Advanced Styles & C.S.S > Style Sheet
Scroll to the very bottom line. Place your cursor and press enter 2 times.
Highlight the below, ctrl+c (copy) and then ctrl+v (paste) it into the new line in the style sheet.

/* CSS Arrows for Quotes (Posts) */
div.message > div.quote { position: relative; background: #3a474d; border: 1px solid #3a474d; padding: 1px; }
div.message > div.quote:after, div.message > div.quote:before { top: 19px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
div.message > div.quote:after { border-color: rgba(58, 71, 77,.0); border-bottom-color: #3a474d; border-width: 11px; left: 0%; margin-left: -20px; transform: rotate(270deg); -ms-transform: rotate(270deg); /* IE 9 */ -webkit-transform: rotate(270deg); /* Safari and Chrome */ }
div.message > div.quote:before { border-color: rgba(58, 71, 77,.0); border-bottom-color: #3a474d; border-width: 13px; left: 0%; margin-left: -25px; margin-bottom:-3px; transform: rotate(270deg); -ms-transform: rotate(270deg); /* IE 9 */ -webkit-transform: rotate(270deg); /* Safari and Chrome */ }

The brown parts are the hex colours you want your border to be.
The purple part is how far you want your arrow to be from the top of the quotes border.
The red part is the RGB Decimal of your border. Go to colorhexa.com and type in your hex, click search and then
on the left side you should see "RGB Decimal", replace the above "58, 71, 77" with your one - leave rgba( and .0) as they are.

Hi Stinky,

You have a very cool website.

I followed your instructions and added the code to the style page an it enhances the look of the quote but it only works after the post is created.

Is there a way of altering how it looks while the user is editing the reply?


Thanks for your help.

PS How do you make your avatars come alive that is very cool

So you want it to also show in the "preview" on the posting page?

[salmo]

Yes if it is possible to do that it would be great. 

[Stinky666]

salmo, I just tried several things and can't get it to work. No doubt I am doing something stupidly wrong haha.
Hopefully someone like Tumbleweed or Brian or Shrike or someone else.