How to make table class?

Go down

In progress How to make table class?

Post by Felix Halim on May 16th 2013, 12:15 pm

i want to make table class like
" (icon) thread moved to www.blablabla.forumotion.com/blablabla"

How to do it?? HELP!!

Felix Halim
Forumember

Posts : 133
Reputation : 3
Language : English, Indonesian, Korean, and many more...

Back to top Go down

In progress Re: How to make table class?

Post by Ultron's Vision on May 16th 2013, 1:05 pm

You can add this to your CSS Stylesheet.

Code:
table.information {
background-image: url('add your image URL here');
background-color: #13c4c4;
background-repeat: no-repeat;
padding: 13px 13px auto auto;
border: 2px solid rgb(10,10,150);
-moz-box-shadow: 2px blue;
-o-border-shadow: 2px blue;
-webkit-box-shadow: 2px blue;
-htm-box-shadow: 2px blue;
box-shadow: 2px blue;
height: 30px;
width: 90%;
color: black;
}

Then type this in your topic:

Code:
[table class=information][tr][td]Text here.[/td][/tr][/table]
avatar
Ultron's Vision
Forumember

Male Posts : 634
Reputation : 45
Language : English | German | HTML | JavaScript | PHP | C++ | Perl | Java
Location : Vienna, Austria

http://duelacademy.net

Back to top Go down

In progress Re: How to make table class?

Post by Felix Halim on May 16th 2013, 1:05 pm

the preview please..

Felix Halim
Forumember

Posts : 133
Reputation : 3
Language : English, Indonesian, Korean, and many more...

Back to top Go down

In progress Re: How to make table class?

Post by sasukekun on May 16th 2013, 1:38 pm

this preview that code Smile



bye
avatar
sasukekun
Forumember

Posts : 253
Reputation : 6
Language : English

Back to top Go down

In progress Re: How to make table class?

Post by Ultron's Vision on May 16th 2013, 1:50 pm

Preview of it...

Text here.
avatar
Ultron's Vision
Forumember

Male Posts : 634
Reputation : 45
Language : English | German | HTML | JavaScript | PHP | C++ | Perl | Java
Location : Vienna, Austria

http://duelacademy.net

Back to top Go down

In progress Re: How to make table class?

Post by Felix Halim on May 16th 2013, 1:55 pm

with icon like the forumotion admin?

Felix Halim
Forumember

Posts : 133
Reputation : 3
Language : English, Indonesian, Korean, and many more...

Back to top Go down

In progress Re: How to make table class?

Post by Ultron's Vision on May 16th 2013, 2:00 pm

You have to find one yourself, sorry.

But images.google.com is your friend there Wink

Also, when you found an image, post here and I'll redesign the code a bit to fit the needs of your image.
avatar
Ultron's Vision
Forumember

Male Posts : 634
Reputation : 45
Language : English | German | HTML | JavaScript | PHP | C++ | Perl | Java
Location : Vienna, Austria

http://duelacademy.net

Back to top Go down

In progress Re: How to make table class?

Post by Felix Halim on May 16th 2013, 2:16 pm

different style of the box?

Felix Halim
Forumember

Posts : 133
Reputation : 3
Language : English, Indonesian, Korean, and many more...

Back to top Go down

In progress Re: How to make table class?

Post by Ultron's Vision on May 16th 2013, 2:24 pm

Sure, if you wait a while, I'll provide you with a variety of possible boxes. I need to be on my PC for that, though.
avatar
Ultron's Vision
Forumember

Male Posts : 634
Reputation : 45
Language : English | German | HTML | JavaScript | PHP | C++ | Perl | Java
Location : Vienna, Austria

http://duelacademy.net

Back to top Go down

In progress Re: How to make table class?

Post by Felix Halim on May 16th 2013, 2:50 pm

okay

Felix Halim
Forumember

Posts : 133
Reputation : 3
Language : English, Indonesian, Korean, and many more...

Back to top Go down

In progress Re: How to make table class?

Post by Jophy on May 16th 2013, 2:55 pm

Hello,

While waiting for Ultron's vision code, you can also take a look at this tutorial on how to make one:
http://help.forumotion.com/t87870-notice-using-css-and-table

Smile
avatar
Jophy
ForumGuru

Male Posts : 17924
Reputation : 835
Language : English
Location : Somewhere

Back to top Go down

In progress Re: How to make table class?

Post by Ultron's Vision on May 16th 2013, 5:04 pm

Add these lines to your CSS Stylesheet (Administration Panel -> Display -> Pictures and Colors -> Colors -> CSS Stylesheet)...

Spoiler:
Code:
table.infos {
    background-color: #1b4763;
    border: 1px solid #000;
    font-weight: bold;
    padding: 5px;
   
}
table.infos td {
    background: url("http://i41.servimg.com/u/f41/17/61/95/60/info11.png") no-repeat scroll left center transparent;
    height: 49px;
    padding-left: 55px;
  color: lightBlue !important;
}
table.check {
    background-color: #1b633a;
    border: 1px solid #000;
    font-weight: bold;
    padding: 5px;
   
}
table.check td {
    background: url("http://i41.servimg.com/u/f41/17/61/95/60/accept10.png") no-repeat scroll left center transparent;
    height: 49px;
    padding-left: 55px;
  color: lightGreen !important;
}
table.accept {
    background-color: #1b633a;
    border: 1px solid #000;
    font-weight: bold;
    padding: 5px;
   
}
table.accept td {
    background: url("http://i41.servimg.com/u/f41/17/61/95/60/add10.png") no-repeat scroll left center transparent;
    height: 49px;
    padding-left: 55px;
  color: lightGreen !important;
}
table.lock {
    background-color: #633c1b;
    border: 1px solid #000;
    font-weight: bold;
    padding: 5px;
 
}
table.lock td {
    background: url("http://i41.servimg.com/u/f41/17/61/95/60/lock10.png") no-repeat scroll left center transparent;
    height: 49px;
    padding-left: 55px;
  color: #deb38e !important;
}
table.unlock {
    background-color: #633c1b;
    border: 1px solid #000;
    font-weight: bold;
    padding: 5px;
 
}
table.unlock td {
    background: url("http://i41.servimg.com/u/f41/17/61/95/60/unlock10.png") no-repeat scroll left center transparent;
    height: 49px;
    padding-left: 55px;
  color: #deb38e !important;
}
table.warning {
    background-color: #631b1b;
    border: 1px solid #000;
    font-weight: bold;
    padding: 5px;
   
}
table.warning td {
    background: url("http://i41.servimg.com/u/f41/17/61/95/60/warnin10.png") no-repeat scroll left center transparent;
    height: 49px;
    padding-left: 55px;
  color: lightRed !important;
}

When posting, replace =class with the appropriate classes given above, like =warning, =infos, =check etc in the following template:

Code:
[table class=class][tr][td]Your content here (appropriately for each Table, for example, the Warning Class would have something like "Warning awarded to USERNAME here")[/td][/tr][/table]

Hope you can make good use of it~
avatar
Ultron's Vision
Forumember

Male Posts : 634
Reputation : 45
Language : English | German | HTML | JavaScript | PHP | C++ | Perl | Java
Location : Vienna, Austria

http://duelacademy.net

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum