News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

Quote & Code style in smf 2 ?

Started by Am', February 19, 2010, 06:01:27 PM

Previous topic - Next topic

You like or not style of quotes & codes (smf2) ?

I like
8 (30.8%)
I dislike
18 (69.2%)

Total Members Voted: 26

Am'

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://www.simplemachines.org/community/index.php?topic=366792.msg2535632#msg2535632

suggestion 1 :


http://www.smf-friends.org/index.php?topic=573.15

suggestion 2:


http://www.rpg-legends.com/forum/index.php?showtopic=13979&st=11040

suggestion 3:


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

Quoteeuhhhhhhhhhhhhhhhh

It is just the proposals, we can adapt to curve  :D
اذا أحس أحد انه لم يخطأ ابدا في حياته, فهذا يعني أنه لم يجرب أي جديد في حياته
My Mods For SMF 2 RC3 : XQuote XCode - Vbulletin Style New Meta Tags

Nick Whetstone

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.
The artist formerly known as (Ha)²

Former Support Specialist

Please do not solicit support via PM. Here's why!

Trekkie101

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);

?>


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  :)
اذا أحس أحد انه لم يخطأ ابدا في حياته, فهذا يعني أنه لم يجرب أي جديد في حياته
My Mods For SMF 2 RC3 : XQuote XCode - Vbulletin Style New Meta Tags

SN

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

bloc

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

SleePy

Looks cool Bloc. :D  Although it doesn't really match or blend with the theme around it.
Jeremy D ~ Site Team / SMF Developer ~ GitHub Profile ~ Join us on IRC @ Libera.chat/#smf ~ Support the SMF Support team!

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  :) :) :)
اذا أحس أحد انه لم يخطأ ابدا في حياته, فهذا يعني أنه لم يجرب أي جديد في حياته
My Mods For SMF 2 RC3 : XQuote XCode - Vbulletin Style New Meta Tags

bloc

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! :)

SleePy

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.
Jeremy D ~ Site Team / SMF Developer ~ GitHub Profile ~ Join us on IRC @ Libera.chat/#smf ~ Support the SMF Support team!

bloc


Antechinus

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 . ;)

bloc

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.

Ryan-UK

Those qoutes look pants bloc, just change width of browser smaller and you will see why.

bloc

Yes, I have noticed the title blurs into the text on small widths, going to correct that.

bloc

Thanks for the headsup, Ryan-UK, I have added a fix for the overflow issue on the quotes.

Am'

@Bloc : just a suggestion, improve or replace the icon to the right to make it more visible ^ ^
اذا أحس أحد انه لم يخطأ ابدا في حياته, فهذا يعني أنه لم يجرب أي جديد في حياته
My Mods For SMF 2 RC3 : XQuote XCode - Vbulletin Style New Meta Tags


bloc

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.

Am'

bloc : a tutorial for adding style to your quote on rc3 please ?

so I'd like it to be adopted on rc3 ...
اذا أحس أحد انه لم يخطأ ابدا في حياته, فهذا يعني أنه لم يجرب أي جديد في حياته
My Mods For SMF 2 RC3 : XQuote XCode - Vbulletin Style New Meta Tags

Arantor

Well... it's not in RC3 which is out now.

Am'

اذا أحس أحد انه لم يخطأ ابدا في حياته, فهذا يعني أنه لم يجرب أي جديد في حياته
My Mods For SMF 2 RC3 : XQuote XCode - Vbulletin Style New Meta Tags

Arantor

I still doubt it will be implemented. If it wasn't in RC3, I really don't see it being in RC4/final/whatever.

Am'

sorry to say but the style of quote is really no comparison to other software .... it's just my opinion
اذا أحس أحد انه لم يخطأ ابدا في حياته, فهذا يعني أنه لم يجرب أي جديد في حياته
My Mods For SMF 2 RC3 : XQuote XCode - Vbulletin Style New Meta Tags

Arantor

No comparison because it's better?

They all look fairly similar since there's only so many ways you can do it.

Am'

with blog's quote style it'll be even better more
اذا أحس أحد انه لم يخطأ ابدا في حياته, فهذا يعني أنه لم يجرب أي جديد في حياته
My Mods For SMF 2 RC3 : XQuote XCode - Vbulletin Style New Meta Tags

Arantor


Am'

اذا أحس أحد انه لم يخطأ ابدا في حياته, فهذا يعني أنه لم يجرب أي جديد في حياته
My Mods For SMF 2 RC3 : XQuote XCode - Vbulletin Style New Meta Tags

Arantor

Would you say those are 'blog style'?

Am'

lol sorry sorry

quote style by bloc ^^
اذا أحس أحد انه لم يخطأ ابدا في حياته, فهذا يعني أنه لم يجرب أي جديد في حياته
My Mods For SMF 2 RC3 : XQuote XCode - Vbulletin Style New Meta Tags

Arantor

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.

Am'

ok arantor, after looking up other styles in my first message, which you like?
اذا أحس أحد انه لم يخطأ ابدا في حياته, فهذا يعني أنه لم يجرب أي جديد في حياته
My Mods For SMF 2 RC3 : XQuote XCode - Vbulletin Style New Meta Tags

Arantor

I like SMF's own, personally, though I can see how style 2 could be good.

bloc

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

SN

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.

bloc

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.

SN

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.

mrhengrasmee

Thanks all for many nice examples. I'll try mine and will post to you all soon.

Am'

#38
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



After installing XCode XQuote



I hope you'll enjoy this small module (worked only with 2rc3)
اذا أحس أحد انه لم يخطأ ابدا في حياته, فهذا يعني أنه لم يجرب أي جديد في حياته
My Mods For SMF 2 RC3 : XQuote XCode - Vbulletin Style New Meta Tags

~DS~

"There is no god, and that's the simple truth. If every trace of any single religion were wiped out and nothing were passed on, it would never be created exactly that way again. There might be some other nonsense in its place, but not that exact nonsense. If all of science were wiped out, it would still be true and someone would find a way to figure it all out again."
~Penn Jillette – God, NO! – 2011

Marcus Forsberg

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..

~DS~

LOL, it's a text editor tool for Windows I believed.
"There is no god, and that's the simple truth. If every trace of any single religion were wiped out and nothing were passed on, it would never be created exactly that way again. There might be some other nonsense in its place, but not that exact nonsense. If all of science were wiped out, it would still be true and someone would find a way to figure it all out again."
~Penn Jillette – God, NO! – 2011

Marcus Forsberg


Am'

yes green, but you can easly change that

اذا أحس أحد انه لم يخطأ ابدا في حياته, فهذا يعني أنه لم يجرب أي جديد في حياته
My Mods For SMF 2 RC3 : XQuote XCode - Vbulletin Style New Meta Tags

Marcus Forsberg

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.

Am'

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)
اذا أحس أحد انه لم يخطأ ابدا في حياته, فهذا يعني أنه لم يجرب أي جديد في حياته
My Mods For SMF 2 RC3 : XQuote XCode - Vbulletin Style New Meta Tags

Am'

اذا أحس أحد انه لم يخطأ ابدا في حياته, فهذا يعني أنه لم يجرب أي جديد في حياته
My Mods For SMF 2 RC3 : XQuote XCode - Vbulletin Style New Meta Tags

Marcus Forsberg

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..? ;)

Am'

and this screenshot ?

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

(you can download the module for a complete test)

اذا أحس أحد انه لم يخطأ ابدا في حياته, فهذا يعني أنه لم يجرب أي جديد في حياته
My Mods For SMF 2 RC3 : XQuote XCode - Vbulletin Style New Meta Tags

Marcus Forsberg

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.

Am'

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
اذا أحس أحد انه لم يخطأ ابدا في حياته, فهذا يعني أنه لم يجرب أي جديد في حياته
My Mods For SMF 2 RC3 : XQuote XCode - Vbulletin Style New Meta Tags

Marcus Forsberg

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.

Am'

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!  ;)
اذا أحس أحد انه لم يخطأ ابدا في حياته, فهذا يعني أنه لم يجرب أي جديد في حياته
My Mods For SMF 2 RC3 : XQuote XCode - Vbulletin Style New Meta Tags

~DS~

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.
"There is no god, and that's the simple truth. If every trace of any single religion were wiped out and nothing were passed on, it would never be created exactly that way again. There might be some other nonsense in its place, but not that exact nonsense. If all of science were wiped out, it would still be true and someone would find a way to figure it all out again."
~Penn Jillette – God, NO! – 2011

Marcus Forsberg

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!  ;)

Akyhne

Bloc's quotes are nice, but they wouldn't work for code BBC. Would steal focus.

Ar-S

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.

Kindred

please use English or ask in the French language support board.
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Advertisement: