Simple Machines Community Forum

General Community => Site Comments, Issues and Concerns => Topic started by: Am' on February 19, 2010, 06:01:27 PM

Poll
Question: You like or not style of quotes & codes (smf2) ?
Option 1: I like votes: 8
Option 2: I dislike votes: 18
Title: Quote & Code style in smf 2 ?
Post by: Am' on February 19, 2010, 06:01:27 PM
Hi,

what do you think about quote and code style in version 2 of smf ?

personally, i do not like them, should perhaps be the change in rc coming ...

---------------------------------------
List of suggestions

My alternative : XQuote XCode

(http://img96.imageshack.us/img96/6718/captureeq.png)

http://www.simplemachines.org/community/index.php?topic=366792.msg2535632#msg2535632

suggestion 1 :

(http://img191.imageshack.us/img191/855/capturebe.png)
http://www.smf-friends.org/index.php?topic=573.15

suggestion 2:

(http://img191.imageshack.us/img191/333/capture1my.png)
http://www.rpg-legends.com/forum/index.php?showtopic=13979&st=11040

suggestion 3:

(http://img163.imageshack.us/img163/9969/capture3ev.png)
http://demo.blocweb.net/smf2rc2/index.php?topic=1.0;theme=9

Quoteeuhhhhhhhhhhhhhhhh

It is just the proposals, we can adapt to curve  :D
Title: Re: Quote & Code style in smf 2 ?
Post by: Nick Whetstone on February 19, 2010, 06:55:00 PM
That wouldn't really fit in with Curve, though. The problem is that quote style was built around that forum's orange and black/dark gray theme.
Title: Re: Quote & Code style in smf 2 ?
Post by: Trekkie101 on February 20, 2010, 07:13:12 PM
Tweaked code and quote styles in RC3 as you can see:

Quote from: Trekkie101Testing

<?php
global 
$dbHost$dbUser$dbPass$dbName;
mysql_connect($dbHost$dbUser$dbPass)or die("Cannot connect to MySQL");
mysql_select_db($dbName)or die("Cannot select DB...");

// Get the submit details
$username $_POST['username']; 
$password $_POST['password'];
$password sha1($password);

// Make details safe
$username mysql_real_escape_string($username);
$password mysql_real_escape_string($password);

?>

Title: Re: Quote & Code style in smf 2 ?
Post by: Am' on February 21, 2010, 02:47:37 AM
I saw, but I don't like too much

the color is not well with curve colors

check my suggestions in the first post  :)
Title: Re: Quote & Code style in smf 2 ?
Post by: SN on February 21, 2010, 03:07:54 AM
its easily edited.

the problem is, you can't please everybody with appearance. Everybody like different things

Now everything is focused around css in RC2 it very easy for the  forum owner to change colour and style of things like that.

if you are lost when it come to css, i would suggest downloading Firefox add on FireBug, That is how i learnt.

You can locate codes like that easy, and just copy it and change the colours
Title: Re: Quote & Code style in smf 2 ?
Post by: bloc on February 21, 2010, 06:31:37 AM
Indeed.

This is a style I have made lately for some of my themes, the extra markup in SMF2 RC2 allows that, and its approx. the same colors as Curve theme too.

http://demo.blocweb.net/smf2rc2/index.php?topic=1.0;theme=9
Title: Re: Quote & Code style in smf 2 ?
Post by: SleePy on February 21, 2010, 06:37:18 AM
Looks cool Bloc. :D  Although it doesn't really match or blend with the theme around it.
Title: Re: Quote & Code style in smf 2 ?
Post by: Am' on February 21, 2010, 07:09:19 AM
Quote from: Bloc on February 21, 2010, 06:31:37 AM
Indeed.

This is a style I have made lately for some of my themes, the extra markup in SMF2 RC2 allows that, and its approx. the same colors as Curve theme too.

http://demo.blocweb.net/smf2rc2/index.php?topic=1.0;theme=9

yes i like so much  :) :) :)
Title: Re: Quote & Code style in smf 2 ?
Post by: bloc on February 21, 2010, 01:04:03 PM
Quote from: SleePy on February 21, 2010, 06:37:18 AM
Looks cool Bloc. :D  Although it doesn't really match or blend with the theme around it.
The blue color in it? yeah, well, perhaps.

Its also used in another theme(with different hue there):  http://demo.blocweb.net/smf2rc2/index.php?topic=1.0;theme=10

Quote from: Am' on February 21, 2010, 07:09:19 AM
Quote from: Bloc on February 21, 2010, 06:31:37 AM
Indeed.

This is a style I have made lately for some of my themes, the extra markup in SMF2 RC2 allows that, and its approx. the same colors as Curve theme too.

http://demo.blocweb.net/smf2rc2/index.php?topic=1.0;theme=9

yes i like so much  :) :) :)

Great! :)
Title: Re: Quote & Code style in smf 2 ?
Post by: SleePy on February 21, 2010, 02:52:18 PM
Ahh, it matches much better in that theme :)

Btw, the search box on your theme has some overflow issues. Ie typing in a really long search term.
Title: Re: Quote & Code style in smf 2 ?
Post by: bloc on February 21, 2010, 04:26:48 PM
Thanks, I'll change that.
Title: Re: Quote & Code style in smf 2 ?
Post by: Antechinus on February 21, 2010, 06:39:44 PM
rofl. :D And who was the bloke who was arguing with me until we were both blue in the face about rounded quotes being no good for Curve?

Told ya rounded quotes were cool . ;)
Title: Re: Quote & Code style in smf 2 ?
Post by: bloc on February 21, 2010, 08:44:02 PM
Yup, you were right ;D

Anyways, I did show you that one too I think, as a variation of your suggestion of rounded ones. Picked the draft up again some time ago and decided to give it a go.
Title: Re: Quote & Code style in smf 2 ?
Post by: Ryan-UK on February 21, 2010, 11:56:33 PM
Those qoutes look pants bloc, just change width of browser smaller and you will see why.
Title: Re: Quote & Code style in smf 2 ?
Post by: bloc on February 22, 2010, 03:38:47 AM
Yes, I have noticed the title blurs into the text on small widths, going to correct that.
Title: Re: Quote & Code style in smf 2 ?
Post by: bloc on February 22, 2010, 03:55:34 PM
Thanks for the headsup, Ryan-UK, I have added a fix for the overflow issue on the quotes.
Title: Re: Quote & Code style in smf 2 ?
Post by: Am' on February 22, 2010, 04:33:50 PM
@Bloc : just a suggestion, improve or replace the icon to the right to make it more visible ^ ^
Title: Re: Quote & Code style in smf 2 ?
Post by: Ryan-UK on February 22, 2010, 06:10:56 PM
Great :)
Title: Re: Quote & Code style in smf 2 ?
Post by: bloc on February 23, 2010, 06:02:04 AM
Quote from: Am' on February 22, 2010, 04:33:50 PM
@Bloc : just a suggestion, improve or replace the icon to the right to make it more visible ^ ^

Yes, but it was just meant to be a faded background anyway lol, but one could of course make it more visible. That would be possible if you use the graphic source file for the quote style, which is shipped with those themes.
Title: Re: Quote & Code style in smf 2 ?
Post by: Am' on March 09, 2010, 03:50:03 AM
bloc : a tutorial for adding style to your quote on rc3 please ?

so I'd like it to be adopted on rc3 ...
Title: Re: Quote & Code style in smf 2 ?
Post by: Arantor on March 09, 2010, 03:50:54 AM
Well... it's not in RC3 which is out now.
Title: Re: Quote & Code style in smf 2 ?
Post by: Am' on March 09, 2010, 03:54:22 AM
rc4 ... who knows  ;)
Title: Re: Quote & Code style in smf 2 ?
Post by: Arantor on March 09, 2010, 03:55:21 AM
I still doubt it will be implemented. If it wasn't in RC3, I really don't see it being in RC4/final/whatever.
Title: Re: Quote & Code style in smf 2 ?
Post by: Am' on March 09, 2010, 04:02:22 AM
sorry to say but the style of quote is really no comparison to other software .... it's just my opinion
Title: Re: Quote & Code style in smf 2 ?
Post by: Arantor on March 09, 2010, 04:07:40 AM
No comparison because it's better?

They all look fairly similar since there's only so many ways you can do it.
Title: Re: Quote & Code style in smf 2 ?
Post by: Am' on March 09, 2010, 04:13:16 AM
with blog's quote style it'll be even better more
Title: Re: Quote & Code style in smf 2 ?
Post by: Arantor on March 09, 2010, 04:17:37 AM
Like what? Examples?
Title: Re: Quote & Code style in smf 2 ?
Post by: Am' on March 09, 2010, 04:18:45 AM
Quote from: Arantor on March 09, 2010, 04:17:37 AM
Like what? Examples?

my first post ?
Title: Re: Quote & Code style in smf 2 ?
Post by: Arantor on March 09, 2010, 04:19:55 AM
Would you say those are 'blog style'?
Title: Re: Quote & Code style in smf 2 ?
Post by: Am' on March 09, 2010, 04:35:17 AM
lol sorry sorry

quote style by bloc ^^
Title: Re: Quote & Code style in smf 2 ?
Post by: Arantor on March 09, 2010, 04:40:52 AM
Thing is, I'm not sure how it's "better". I actually think it's taking the 'curve' thing a bit too far and clutters up the layout, which if I recall was the opinion shared by more members of the team when it was proposed and discussed.
Title: Re: Quote & Code style in smf 2 ?
Post by: Am' on March 09, 2010, 04:54:37 AM
ok arantor, after looking up other styles in my first message, which you like?
Title: Re: Quote & Code style in smf 2 ?
Post by: Arantor on March 09, 2010, 05:04:08 AM
I like SMF's own, personally, though I can see how style 2 could be good.
Title: Re: Quote & Code style in smf 2 ?
Post by: bloc on March 09, 2010, 07:28:50 AM
Its all about choices. Some like the daughter, other the moth...errr ;D I mean, the simple style in rc2/rc3 is fine as it is, I made that initially, but Antech wanted some curved examples(there is a topic about somewhere) so I made that full gradient/curved as a reaction to that.

Both work fine in curve and neither is "cluttered".

The ones in OP's first post are made by Eren(top one) for smf-friends.org site and its quite nice, though I a find it a bit big actually. I used a similar one in many of my themes:

http://demo.blocweb.net/smf1/index.php?topic=2.0;theme=5
Title: Re: Quote & Code style in smf 2 ?
Post by: SN on March 09, 2010, 09:33:55 AM
It's so easily changed, so i can't see what the fuss is about.

Its like moaning about the default background colour or link colour, things that don't really matter because they are easily changed.

2.0 was specifically coded this way so us as users can change it easily.
Title: Re: Quote & Code style in smf 2 ?
Post by: bloc on March 09, 2010, 02:40:48 PM
Well then, SN, show Am how new and refreshing ones are done, would you?

Since its so easily changed that every user can do it I mean.
Title: Re: Quote & Code style in smf 2 ?
Post by: SN on March 09, 2010, 03:31:49 PM
I just followed Antech Thread about customising your quote, which is very straight forward http://www.simplemachines.org/community/index.php?topic=347845.0

bare in mind before i read that thread i had no idea how to change the quotes.

If you liek the quote style on smf friends, as i mentioned in my post before if you are using FireFox, download Firebug. Find the quote you like on a SMF theme, right click '' Inspect elements " and copy the Css, replace the code and change the colours to how you wish

there is also a way you can do this on chrome but i'm not sure how, as i don't use it.
Title: Re: Quote & Code style in smf 2 ?
Post by: mrhengrasmee on March 10, 2010, 05:29:09 AM
Thanks all for many nice examples. I'll try mine and will post to you all soon.
Title: Re: Quote & Code style in smf 2 ?
Post by: Am' on March 12, 2010, 06:45:14 AM
Hi,

Done!!!  ;)

I created a new module (XQuote XCode) which will completely change the appearance of the code and quote style in curve

Default style quote and code in curve

(http://img684.imageshack.us/img684/2097/capture2b.png)

After installing XCode XQuote

(http://img96.imageshack.us/img96/6718/captureeq.png)

I hope you'll enjoy this small module (worked only with 2rc3)
Title: Re: Quote & Code style in smf 2 ?
Post by: ~DS~ on March 12, 2010, 02:47:27 PM
Can you make the one for RC3 of the second quote style made by Antechinus.
http://www.simplemachines.org/community/index.php?topic=347845.0
Title: Re: Quote & Code style in smf 2 ?
Post by: Marcus Forsberg on March 12, 2010, 02:49:30 PM
I do hope the code tags aren't green as they are in your example above? That really doesn't fit into Curve, to be honest..
Title: Re: Quote & Code style in smf 2 ?
Post by: ~DS~ on March 12, 2010, 02:55:03 PM
LOL, it's a text editor tool for Windows I believed.
Title: Re: Quote & Code style in smf 2 ?
Post by: Marcus Forsberg on March 12, 2010, 02:55:39 PM
Windows or not, green != Curvy ;)
Title: Re: Quote & Code style in smf 2 ?
Post by: Am' on March 12, 2010, 03:00:23 PM
yes green, but you can easly change that

Title: Re: Quote & Code style in smf 2 ?
Post by: Marcus Forsberg on March 12, 2010, 03:01:24 PM
If I were you, I'd make a blue version as the default option, but include that green version for those who either want it for Curve, or have a green theme.
Title: Re: Quote & Code style in smf 2 ?
Post by: Am' on March 12, 2010, 03:08:37 PM
for the quote is good ? for the code try the green you'll love it.

I had the same opinion as you but the problem is that there's blue everywhere, so I had the idea to change the colors (quote & code)
Title: Re: Quote & Code style in smf 2 ?
Post by: Am' on March 12, 2010, 03:10:33 PM
Quote from: Dismal Shadow on March 12, 2010, 02:47:27 PM
Can you make the one for RC3 of the second quote style made by Antechinus.
http://www.simplemachines.org/community/index.php?topic=347845.0

euh sorry i don't understand ;)
Title: Re: Quote & Code style in smf 2 ?
Post by: Marcus Forsberg on March 12, 2010, 03:11:03 PM
The orange in the quote is OK, fits in well.
If you could post a full page screenshot of the code block, so I can see how it looks in-context, maybe I could change my mind..? ;)
Title: Re: Quote & Code style in smf 2 ?
Post by: Am' on March 12, 2010, 03:13:57 PM
and this screenshot ?

http://img96.imageshack.us/img96/6718/captureeq.png

(you can download the module for a complete test)

Title: Re: Quote & Code style in smf 2 ?
Post by: Marcus Forsberg on March 12, 2010, 03:16:35 PM
I was more thinking a picture of an entire thread, so I can see how it really fits into the entire Curve theme, since I don't have time to test your package at this time.
Title: Re: Quote & Code style in smf 2 ?
Post by: Am' on March 12, 2010, 03:18:41 PM
Quote from: Nas on March 12, 2010, 03:16:35 PM
I was more thinking a picture of an entire thread, so I can see how it really fits into the entire Curve theme, since I don't have time to test your package at this time.

http://www.pict.com/view/3103319/800/test
Title: Re: Quote & Code style in smf 2 ?
Post by: Marcus Forsberg on March 12, 2010, 03:20:45 PM
Thanks.
Well, it's not *too* bad, but I still can't say I'm fond of that color.
The actual style is pretty nice though, and as you said it's not too hard to change the colors. :)

As for the package you posted... You shouldn't package mods as rar. You should use zip or tar.gz. Also, it's double packaged.
package-info.xml and all associated files must be placed on the top level of your package.

That is, if you want to submit it to our customization site.
Title: Re: Quote & Code style in smf 2 ?
Post by: Am' on March 12, 2010, 03:26:13 PM
archive upgraded

Quote from: Nas on March 12, 2010, 03:20:45 PM
Thanks.
Well, it's not *too* bad, but I still can't say I'm fond of that color.
The actual style is pretty nice though, and as you said it's not too hard to change the colors. :)

well ... blue is good, but not too!  ;)
Title: Re: Quote & Code style in smf 2 ?
Post by: ~DS~ on March 12, 2010, 03:28:06 PM
Quote from: Am' on March 12, 2010, 03:10:33 PM
Quote from: Dismal Shadow on March 12, 2010, 02:47:27 PM
Can you make the one for RC3 of the second quote style made by Antechinus.
http://www.simplemachines.org/community/index.php?topic=347845.0

euh sorry i don't understand ;)

The one with
Quote
Quote from: Antechinus on November 13, 2009, 07:15:24 AM


Now for the ones with curved corners. Yes, I know you can do them without images if you only want them in Firefox and Safari/Chrome but this method makes them work in all browsers.
Css/index.css:
Find:

/* A quote, perhaps from another post. */
.quoteheader
{
color: #7a899c;
}
.codeheader, .quoteheader
{
font-size: 0.9em;
font-weight: bold;
padding-left: 5px;
}
blockquote, blockquote blockquote blockquote
{
font-size: 0.9em;
color: #000000;
line-height: 1.4em;
background: url(../images/theme/quote.png) 2px 2px no-repeat #D7DAEC;
border-top: solid 1px #000;
border-bottom: solid 1px #000;
padding: 1em 1em 1em 2em;
margin: 0.3em 0 0 0;
}
blockquote blockquote
{
background: #e7eAfC;
}

/* A code block - maybe even PHP ;). */
code
{
display: block;
font-family: "courier new", "times new roman", monospace;
font-size: x-small;
background: #eee;
border-top: solid 1px #000;
border-bottom: solid 1px #000;
line-height: 1.3em;
padding: 3px 1em;
overflow: auto;
white-space: pre;
/* Stop after about 24 lines, and just show a scrollbar. */
max-height: 24em;
}


Replace with:

/* A quote, perhaps from another post. */
.codeheader, .quoteheader
{
font-size: 0.9em;
font-weight: bold;
padding-left: 20px;
}
.quoteheader, blockquote blockquote .quoteheader
{
color: #7a899c;
    background: url(../images/theme/quote_ends.png) 0 -100px no-repeat;
}
.topslice_quote, blockquote blockquote .topslice_quote
{
    background: url(../images/theme/quote_slices.png) 100% -100px no-repeat;
padding: 0.3em 0;
}
blockquote .quoteheader
{
color: #7a899c;
    background: url(../images/theme/quote_ends.png) 0 0 no-repeat;
}
blockquote .topslice_quote
{
    background: url(../images/theme/quote_slices.png) 100% 0 no-repeat;
}
blockquote, blockquote blockquote blockquote
{
font-size: 0.9em;
color: #000000;
line-height: 1.4em;
background: #FFFFFF;
border-left: 1px solid #DCE0F3;
border-right: 1px solid #DCE0F3;
padding: 0 1em 0 1.5em;
margin: 0 0 0 0;
}
blockquote blockquote
{
background: #F0F4F7;
border-left: 1px solid #D8DDF1;
border-right: 1px solid #D8DDF1;
}
.quotefooter, blockquote blockquote .quotefooter
{
    background: url(../images/theme/quote_ends.png) 0 100% no-repeat;
padding-left: 20px;
margin-bottom: -5px;
}
.botslice_quote, blockquote blockquote .botslice_quote
{
    height: 10px;
background: url(../images/theme/quote_slices.png) 100% 100% no-repeat;
}
blockquote .quotefooter
{
color: #7a899c;
    background: url(../images/theme/quote_ends.png) 0 -270px no-repeat;
padding-left: 20px;
}
blockquote .botslice_quote
{
    height: 10px;
background: url(../images/theme/quote_slices.png) 100% -230px no-repeat;
}
blockquote blockquote blockquote .quoteheader {display: none;}
blockquote blockquote blockquote blockquote {display: none;}
blockquote blockquote blockquote .quotefooter {display: none;}

/* A code block - maybe even PHP ;). */
code
{
display: block;
font-family: "courier new", "times new roman", monospace;
font-size: x-small;
background: #eee;
border-top: solid 4px #AAAABB;
border-bottom: solid 4px #AAAABB;
line-height: 1.3em;
padding: 3px 1em;
overflow: auto;
white-space: pre;
/* Stop after about 24 lines, and just show a scrollbar. */
max-height: 24em;
}


This will look like the second screenshot. You will need to copy the two attached images (quote_ends.png and quote_slices.png) to your default/images/theme folder.

Note that this uses the same styling for the code boxes as the first example. There is no point trying to put rounded corners on code boxes because they usually have scroll bars at the bottom and at the right, which makes them look silly if you try to add rounded corners. The code boxes are best kept simple IMO.

Enjoy.
Title: Re: Quote & Code style in smf 2 ?
Post by: Marcus Forsberg on March 12, 2010, 03:29:16 PM
Yeah, it really depends on what type of blue you use, and how you use it. A blue color like #330099 would of course not fit in, while a lighter, more gray, tone may.

Quote from: Am' on March 12, 2010, 03:26:13 PM
archive upgraded

Quote from: Nas on March 12, 2010, 03:20:45 PM
Thanks.
Well, it's not *too* bad, but I still can't say I'm fond of that color.
The actual style is pretty nice though, and as you said it's not too hard to change the colors. :)

well ... blue is good, but not too!  ;)
Title: Re: Quote & Code style in smf 2 ?
Post by: Akyhne on September 13, 2010, 08:55:45 AM
Bloc's quotes are nice, but they wouldn't work for code BBC. Would steal focus.
Title: Re: Quote & Code style in smf 2 ?
Post by: Ar-S on March 15, 2011, 12:55:39 PM
Bonjour,
Une modification de l'apparence du contenu de la balise code est vraiment une bonne initiative.
J'utilise actuellement la 1.1.13 et j'aurai vraiment aimé savoir si un mod du genre existait.
Du coup je n'ai trouvé que celui ci pour la version 2RC, ce qui ne m'intéresse pas (pour le moment..)
pouvez vous me guider vers un topic ou un mod permettant cela ?
D'avance merci.
Title: Re: Quote & Code style in smf 2 ?
Post by: Kindred on March 15, 2011, 02:55:10 PM
please use English or ask in the French language support board.