The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

How to make table class?

View previous topic View next topic 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]

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

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.

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.

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.

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

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~

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

View previous topic View next topic Back to top


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