Comment Custimization!

Working on a new template and need help? Come here for support.

Moderator: Help Desk Team

Comment Custimization!

Postby Da Bag Man » June 26th, 2012, 1:46 pm

How to use in your comments.
Spoiler! :
Use one of these.
  • <b class=" "> *insert text here* </b>
  • <i class=" "> *insert text here* </i>
  • <em class=" "> *insert text here* </em>
put one of these inside the quotes (" ")
  • red
  • green
  • blue
  • purple
  • orange
  • cyan
Read on to learn how to put them on your website.


So I'm pretty sure you've been to other websites other than smackjeeves that allows you to customize you're comments? You know, this forum is a good example. I was browsing SJ and went to recently updated and I saw awsome guy's Fast. It had a pretty cool design so I read the first comic, as I scroll down and I read the authors comment, one of the words is red! I keep reading and you know how some people do edit: blah blah blah, his edit: blah blah blah was on a STICKY NOTE! I thought that was really cool and when I figured out how he did it I was like "I can't believe I didn't think of that" His comments used a class. Like in my other tutorials I will try to go in depth and explains how it works, this will put some of you to sleep but trust me, it's worth it.

What is a class in HTML?
Really good example below. I suggest you read it.
Class is a way to point out a an element, say you have a lot of bold words and you want to make one super bold. You'd say <b... (<b> means bold in webville) ...class="superbold"> *Insert words here* </b> Then you'd go to the CSS (custom style sheets) indicated by <style> and put in...
Code: Select all
.superbold { font-wieght: 1000px; }

The period tells the computer that whatever follows is a class name and the brackets ({ }) indicate that inside of them is the style for the class superbold. Not sure if font-wieght can even equal 1000px but it's just an example.

So if you want to make your comments customizable you have to do that for every option you want to give your users. I'll give you a few and if you want to learn how to do more PM me.
Code: Select all
<style>
.red {color: red;}
.green {color: green;}
.blue {color: blue;}
.purple {color: purple;}
.orange {color: orange;}
.cyan {color: cyan;}
</style>


Just copy and paste this anywhere you want on your overall layout as long as it is inside the <HTML> brackets.
How it works.
This styles a bunch of classes so that now when you go <b class="red"> blah blah blah </b> it will actually be red in your comment! You can also use more than one class like if you want something to be centered and red just do <b class="red center"> blah blah blah </b>.

Compatible tags.
There are a lot of HTML tags but only 3 that I have tested that I know work in smackjeeves comments.
There is <b> which I have been using this whole time it makes the words bold as well as whatever class you give it.
There is <i> which makes the words italic as well as the class you assign it.
And there is <em> which does the same thing as <i> (most of the time).

How to use.
Just so you don't forget, copy and paste the above code into your overall layout. Then write a comment and add in one of these...
  • <b class=" "> </b>
  • <i class=" "> </i>
  • <em class=" "> </em>

Then inside of the quotes (" ") add a class, or two just separate them with a space.
Classes included in above code...
  • red
  • green
  • blue
  • purple
  • orange
  • cyan

Important!
I think that if you are going to use this we need a way to tell each other about this. copy and paste this under your custom comment code and it'll link to this topic, an example is on my site.
Code: Select all
<style>
#cccertified {position: fixed; bottom: 5px; right: 5px; display: inline; z-index: 9001; padding: 5px; background-color: white; border: 1px dashed black;}
#cccertified p {display: inline;}
</style>

<div id="cccertified">
<p><a href="http://www.smackjeeves.com/forum/viewtopic.php?f=15&t=11959"><img src="http://www.smackjeeves.com/forum/images/smilies/icon_e_biggrin.gif" /><b>CC</b>Certified</a></p>
</div>


Enjoy!
Make sure to check out some of my other tutorials
Mini Affiliates
Random Quote Generator
And if you need some free HTML design check this out.
Image
User avatar
Da Bag Man
 
Posts: 7
Joined: May 31st, 2011, 11:43 am

Re: Comment Custimization!

Postby Master_72 » June 27th, 2012, 1:07 am

You mean not everybody knew that?

Huh, after my time on some forums and fan fiction websites I thought it would be pretty obvious to the average sj user.
Image
Spoiler! :
Image

OFFICIALLY CROWNED CHAMPION OF FORUM GAMES
"You all may play the games, but I win them"
User avatar
Master_72
 
Posts: 2071
Joined: November 5th, 2011, 8:05 pm
Location: Oooh Canadaaaa

Re: Comment Custimization!

Postby Ddraigeneth » June 27th, 2012, 1:40 am

Master_72 wrote:I thought it would be pretty obvious to the average sj user.

Not many people know or are comfortable with HTML, least of all CSS. Can't tell if you're trolling, or just have high expectations of people. You can set up a comic with one of the default templates and never have to touch the coding.
User avatar
Ddraigeneth
 
Posts: 5475
Joined: June 26th, 2010, 12:06 pm
Location: 6 inches to the right


Return to Template Development & Support

Who is online

Users browsing this forum: No registered users and 4 guests