News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

Enchanced Quote... More stylish?

Started by kerrang!, May 20, 2007, 07:14:29 PM

Previous topic - Next topic

kerrang!

Hey,

Recently I've had a few complaints (if you can call them that ???) that the standard look of the quote, is very basic and boring. I've noticed a few other smf forums which have a nice appearance and I was wondering if anyone here knew how I could improve the look of the quote (bbcode)

Personally I'm not so bothered, although keeping our members happy is best. so I thought I'd ask the nice forum  :)

Cheers,
~Kerrang...

P.s Sorry for being such a newbie.. I did read you could improve it by the css file although I don't know coding and I'm nearly 100% useless. d'oh (much appreciated)
I'm my own worst enemy! :P

Css Help <--Having difficulty matching the look of the code function with the style of "quote".. =)

Deaks

depends really on how you want to change it...
~~~~
Former SMF Project Manager
Former SMF Customizer

"For as lang as hunner o us is in life, in nae wey
will we thole the Soothron tae owergang us. In truth it isna for glory, or wealth, or
honours that we fecht, but for freedom alane, that nae honest cheil gies up but wi life
itsel."

Tanks

i use this in style.css for my quotes


.quote {
color: #000000;
background-color: #FFFFFF;
background: url(images/gbback.jpg);
background-repeat: repeat-y;
background-position: right;
border-top: 1px solid #333;
border-left: 1px solid #333;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
margin: 1px 11px 11px 11px;
padding: 8px;
}


And this image for the background



And here is what it looks like

http://pixfarm.net/upload/1/originals/6f/6fd0f93696fbf0ad64bd57402168052f.jpg

Hope its of any help  ;)


kerrang!

Hey thanks for the response buddies =)

@Tanks; I really like yours.

Would anyone here know if it's possible to add onto the code above and adapt it a bit. I was thinking along the lines of how another community I run looks (this is using IPB though) http://www.poetryartonline.com/forum/index.php?showtopic=1192

With the colour behind "quote", side and the symbol image. (with the image inside the quote itself being able to be streached without showing half white and then the image) also are their possiblites of having dashes, dots etc instead of the full boarder?

I'm not sure how easy this would be but any ways of adding these additions to the code would be very appreciated.

Once again thank you :)
~Kerrang!
I'm my own worst enemy! :P

Css Help <--Having difficulty matching the look of the code function with the style of "quote".. =)

Tanks

Using the image up in the top is not that hard.. let me see if i can be of any assistance here..

First change the quoteheader


.quoteheader, .codeheader {
background: #E4EAF2 url(images/css_img_quote.gif) no-repeat right;
border: 1px dotted #000;
border-bottom: 0;
border-left: 4px solid #8394B2;
color: #000;
font-weight: bold;
font-size: 10px;
margin: 2px auto 0 auto;
padding: 3px;
}


Then change the quote


.quote {
background: #FAFCFE;
border: 1px dotted #000;
border-left: 4px solid #8394B2;
border-top: 0;
color: #465584;
padding: 4px;
margin: 0 auto 0 auto;
}


Remember to upload this image to your theme's images folder  ;)



This code is untested but it should give you the same quote as that site  ;) Please backup your style.css before trying this  ;)

kerrang!

Quote from: Tanks on May 21, 2007, 04:52:08 PM
Using the image up in the top is not that hard.. let me see if i can be of any assistance here..

First change the quoteheader


.quoteheader, .codeheader {
background: #E4EAF2 url(images/css_img_quote.gif) no-repeat right;
border: 1px dotted #000;
border-bottom: 0;
border-left: 4px solid #8394B2;
color: #000;
font-weight: bold;
font-size: 10px;
margin: 2px auto 0 auto;
padding: 3px;
}


Then change the quote


.quote {
background: #FAFCFE;
border: 1px dotted #000;
border-left: 4px solid #8394B2;
border-top: 0;
color: #465584;
padding: 4px;
margin: 0 auto 0 auto;
}


Remember to upload this image to your theme's images folder  ;)



This code is untested but it should give you the same quote as that site  ;) Please backup your style.css before trying this  ;)
Wow! Thank you..

It looks great buddy, Thanks again for all your help with this. =)
~Kerrang!

P.s It works fine, I appreciate the warning. cheers :)
I'm my own worst enemy! :P

Css Help <--Having difficulty matching the look of the code function with the style of "quote".. =)

Tanks

there is a flaw in this.. i just found it.. you will have to do this


.quoteheader {
background: #E4EAF2 url(images/css_img_quote.gif) no-repeat right;
border: 1px dotted #000;
border-bottom: 0;
border-left: 4px solid #8394B2;
color: #000;
font-weight: bold;
font-size: 10px;
margin: 2px auto 0 auto;
padding: 3px;
}


And the add a style for codeheader


.codeheader {
(put some css here)
}


Sorry i did not see this before but the quoteheader and the codeheader shares the same CSS style so you have to break them up... i hope you figure it out  ;)



kerrang!

#7
Hey Tanks,

I noticed after that it didn't fully change the look of the code. I've probably done this wrong, but I broke the code up like you mentioned and then copied the "quote" style and changed the colour and added the "code graphic" and then added a quote section to the file.

It now adds the side color, yet the code is scroll-able at the bottom and it currently doesn't look like the quote's design. (more a squeezed quote) I'll add a screenshot in a moment.

Would you mind helping solve this buddy?
~Kerrang!

P.s Here's the code... (huge thanks to any help)
Quote/* The "Quote:" header part... */
.quoteheader
{
   background: #E4EAF2 url(http://www.newbiegen.com/community/Themes/default/images/css_img_quote.gif) no-repeat right;
   border: 1px dotted #000;
   border-bottom: 0;
   border-left: 4px solid #8394B2;
   color: #000;
   font-weight: bold;
   font-size: 10px;
   margin: 2px auto 0 auto;
   padding: 3px;
}

/* The "Code:" header part... */
.codeheader
{
   background: #FDDBCC url(http://www.newbiegen.com/community/Themes/default/images/css_img_code.gif) no-repeat right;
   border: 1px dotted #000;
   border-bottom: 0;
   border-left: 4px solid #8394B2;
   color: #000;
   font-weight: bold;
   font-size: 10px;
   margin: 2px auto 0 auto;
   padding: 3px;
}

/* A code, perhaps from another post. */
.code {
      background: #FAFCFE;
   border: 1px dotted #000;
   border-left: 4px solid #8394B2;
   border-top: 0;
   color: #465584;
   padding: 4px;
   margin: 0 auto 0 auto;
}   

-Edit-


The code I thought would work adds the side line, although as the image shows the rest doesn't go. :)
I'm my own worst enemy! :P

Css Help <--Having difficulty matching the look of the code function with the style of "quote".. =)

Tanks

Kerrang, I am sorry but i have absolutely no idea why it does that  :o

But then again, i am only just learning CSS  :D

Let me know if you work it out.. i cant see anything in the code that explains this behavior so i really cant help you fix it.  :-[

kerrang!

I think this is the code section which is making the above image display incorrectly. Would anyone here know how I could make the code look the same as the style for quotes?

Here's the code  :) (It does look different from the image above, as I've removed the copy I did for the code block. yet tanks code for slitting the code does.
Quote
/* A code block - maybe even PHP ;). */
.code
{

   color: #000000;
   background-color: #dddddd;
   font-family: "courier new", "times new roman", monospace;
   font-size: x-small;
   line-height: 1.3em;
   /* Put a nice border around it. */
   border: 1px solid #000000;
   margin: 1px auto 1px auto;
   padding: 1px;
   width: 99%;
   /* Don't wrap its contents, and show scrollbars. */
   white-space: nowrap;
   overflow: auto;
   /* Stop after about 24 lines, and just show a scrollbar. */
   max-height: 24em;
}

Quote from: Tanks on May 22, 2007, 01:36:52 AM
Kerrang, I am sorry but i have absolutely no idea why it does that  :o

But then again, i am only just learning CSS  :D

Let me know if you work it out.. i cant see anything in the code that explains this behavior so i really cant help you fix it.  :-[

Hey Tanks,
No worries buddy, Thanks for the help you given me. (It's really appreciated)
/--------------------/
~Kerrang!
I'm my own worst enemy! :P

Css Help <--Having difficulty matching the look of the code function with the style of "quote".. =)

kerrang!

Apologise for the double post.

Would it work if I replaced the code which makes the "quote" look how it does, with the "codes" style? I haven't tried yet, but I don't want to fiddle with things before. (even with a saved backup)

If anyone can help me use the same style for the "code" as "quote" from the details above I would greatly appreciate it.

~kerrang!

(It's times like this I wished I knew coding)  :-X
I'm my own worst enemy! :P

Css Help <--Having difficulty matching the look of the code function with the style of "quote".. =)

Tanks

Try this


/* The "Code:" header part... */
.codeheader
{
   background: #FDDBCC url(http://www.newbiegen.com/community/Themes/default/images/css_img_code.gif) no-repeat right;
   border: 1px dotted #000;
   border-bottom: 0;
   border-left: 4px solid #8394B2;
   color: #000;
   font-weight: bold;
   font-size: 10px;
   margin: 2px auto 0 auto;
   padding: 3px;
}

/* A code, perhaps from another post. */
.code {
      background: #FAFCFE;
   border: 1px dotted #000;
   border-left: 4px solid #8394B2;
   border-top: 0;
   margin: 1px auto 1px auto;
   padding: 1px;
   width: 99%;
   /* Don't wrap its contents, and show scrollbars. */
   white-space: nowrap;
   overflow: auto;
   /* Stop after about 24 lines, and just show a scrollbar. */
   max-height: 24em;
}

kerrang!

Quote from: Tanks on May 23, 2007, 12:57:09 AM
Try this


/* The "Code:" header part... */
.codeheader
{
   background: #FDDBCC url(http://www.newbiegen.com/community/Themes/default/images/css_img_code.gif) no-repeat right;
   border: 1px dotted #000;
   border-bottom: 0;
   border-left: 4px solid #8394B2;
   color: #000;
   font-weight: bold;
   font-size: 10px;
   margin: 2px auto 0 auto;
   padding: 3px;
}

/* A code, perhaps from another post. */
.code {
      background: #FAFCFE;
   border: 1px dotted #000;
   border-left: 4px solid #8394B2;
   border-top: 0;
   margin: 1px auto 1px auto;
   padding: 1px;
   width: 99%;
   /* Don't wrap its contents, and show scrollbars. */
   white-space: nowrap;
   overflow: auto;
   /* Stop after about 24 lines, and just show a scrollbar. */
   max-height: 24em;
}

Thanks Tanks,

That has improved it, although it's still stretched compared to the top section and the grey and white text area (small) is still showing. also the sides don't connect, they show a small gap... (i'm such a pain) :)



Huge thanks to tanks + anyone who can help re-solve my silly css problem.. *Hides*  :o
I'm my own worst enemy! :P

Css Help <--Having difficulty matching the look of the code function with the style of "quote".. =)

kerrang!

I've now manged to get the bottom half of the code to match the top half.

Although the text is still shown the same way as the image above, if someone could help me fix? I'm not sure myself, I couldn't code to save my life.

Any css experts around?
much appeciated...

~Krrang!
I'm my own worst enemy! :P

Css Help <--Having difficulty matching the look of the code function with the style of "quote".. =)

Advertisement: