The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Notice using css and table

2 posters

Go down

Tutorial Notice using css and table

Post by Luky March 26th 2011, 5:41 pm

Notice using css and table


Hello FM users,
Today I am going to show you how to compose a notice in your post using css and table. First, please take a look at this demo:
Line 1 : Your message goes here! Your message goes here!
Line 2: Your message goes here! Your message goes here!
Ok then, let's start.
Step 1: Copy and paste this code into your css style sheet (ACP>>Display>>Colors>>CSS)
Code:
.cpinfo {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.cpinfo {
color: #00529B;
background-color: #BDE5F8;
background-image: url('https://i.imgur.com/BZ17N.png');
}
Step 2:
Use this bbcode when you want to post a notice inside your posting:
Code:
[table class="cpinfo"][tr][td]Your text goes here! Your text goes here!
Your text goes here! Your text goes here!
Your text goes here! Your text goes here!
[/td][/tr][/table]

That's it!

For advanced user:
You can change the border thickness (border: 1px solid;), color of text (color: #00529BWink, background color of box (background-color: #BDE5F8Wink and the image as well (background-image: url('https://i.imgur.com/BZ17N.png')Wink.

Written by Eagle8x

Luky
Luky
Energetic

Male Posts : 6106
Reputation : 264
Language : Romanian, English
Location : Bucharest, Romania

Back to top Go down

Tutorial Re: Notice using css and table

Post by skouliki February 11th 2020, 8:16 am

This code was updated to fit in with the new HTTPS address

updated 11.02.2020 by skouliki
skouliki
skouliki
Manager
Manager

Female Posts : 15029
Reputation : 1680
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Back to top

- Similar topics

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