announcement and tutorial topic table style on this forum

hi i want to know how can i make a table like this one please https://help.forumotion.com/t147283-profiles-with-stripes it is also in every announcement or tutorial topic at this forum so can you please tell me how can i make my post like that in my forum?

bump @Rhino.Freak can you please help

Hello yes you can use my table code you will have to add your own backgrounds to the code thou
Where it has Caps in the text this is where you must add your own backgrounds and text.

Code:

[table class="posting-table" style="border: 3px solid rgb(144,144,144);border-bottom: 0px solid rgb(144,144,144);border-radius: 3px 3px 0px 0px;" cellspacing="0" width="100%"][tr][td style="background-image: url(LEFT BACKGROUND HERE); background-repeat: no-repeat;" height="100" width="152"][/td]
[td style="background: transparent url(CENTER BACKGROUND HERE ) repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; padding-bottom: 15px;"][center][size=16][color=#505050][b][font=Georgia]TITLE  TEXT HERE!![/font][/b][/color][/size][/center]
[/td]
[td style="background-image: url(RIGHT BACKGROUND HERE); background-repeat: no-repeat;" width="84"][/td]
[/tr]
[/table]
[table class="posting-table" style="border-left: 3px solid rgb(144,144,144); border-right: 3px solid rgb(144,144,144); border-bottom: 1px solid rgb(0, 114, 149);" cellspacing="0" width="100%"][tr][td style="padding-left: 5px; padding-right: 5px; background-color: rgb(247, 247, 247);"]NEW POST TEXT HERE!!!NEW POST TEXT HERE!!!NEW POST TEXT HERE!!![/td]
[/tr]
[/table]
[table class="posting-table" style="border-left: 3px solid rgb(144,144,144);border-radius: 0px 0px 3px 3px; border-right: 3px solid rgb(144,144,144); border-bottom: 3px solid rgb(144,144,144);" cellspacing="0" width="100%"][tr][td style="background: rgb(247, 247, 247) none repeat scroll 0% 0%; text-align: justify; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; padding-left: 5px;"][center][b][color=#505050]A[/color] [color=#505050]Official Announcement[/color][/b][/center]
[/td]
[td style="background: transparent url(BOTTOM RIGHT BACKGROUND) No-repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;" height="100" width="140"][/td]
[/tr]
[/table]

Should look like this when posted

Spoiler:

thank you but i need it to look like this http://prntscr.com/bi1y8b it looks more beautiful so can anyone please help me maybe @Ange Tuteur

i found another topic like mine i pm the poster to help me cuz he found solution but he said it for sale and i dont have money http://prntscr.com/bi29wp so can you guys please help me?

@George Abdo we cannot give you the exact code due to copyrights and it's original design is for the ESF only.

All i can help you with is provide you of an idea how to create that and you can change it's style as you want!

Here it goes:
Here's the code for the post:

Code:

[table class="tableAnnou"][tr][td class="leftPart"][/td]
[td class="titlePart][center]Title Here[/center][/td]
[td class="rightPart"][/td][/tr][/table]
[table class="contentAnnou"][tr][td class="contentPart"]Your Announcement Text Here[/td][/tr][/table]
[table class="footerAnnou"][tr][td class="footerPart"][center]Footer Text Here[/center][/td]
[td class="footerRightPart"][/td][/tr][/table]

Now all you have to do is style the elements in your CSS. Here are the codes you can use:

Code:

table.tableAnnou { code here }
td.leftPart {code here }
td.titlePart { code here }
td.rightPart { code here }
table.contentAnnou { code here }
td.contentPart { code here }
table.footerAnnou { code here }
td.footerPart { code here }
td.footerRightPart { code here }

Now to add the special box there you like you can use this code:

Code:

td.rightPart:before {
  content: 'Announcement';
  background: #FFFFFF;
  padding: 3px 10px;
  font-size: 12px;
  border-radius: 0px 0px 3px 3px;
}

and style it as you wish.

@Luffy
that is kinda hard for me to do/understand so i tried making this with HTML and BBcode

the code:

can you please tell me how can i add text inside the top border? like a title? example http://prntscr.com/bi358i

what color do you want at the top ?

well the top border is blue so are all the other borders but I just wanna add some text(color of text black) inside the top blue border to make it look like a title please help and thank you

something like this ?

The text can be changed to what ever color you like. you can even remove it too.

Code:

[table class="posting-table" style="border: 1px solid rgb(0, 0, 0);border-bottom: 0px solid rgb(144,144,144);text-shadow: 2px 2px #000;border-radius: 3px 3px 0px 0px;" cellspacing="0" width="100%"][tr][td style="background-image: url(http://i35.servimg.com/u/f35/12/23/10/57/b110.png); background-repeat: no-repeat;" height="100" width="84"][/td]
[td style="background: transparent url(http://i35.servimg.com/u/f35/12/23/10/57/b210.png) repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; padding-bottom: 15px;"][center][size=16][color=#B7B7B7][font=Georgia][font=FontAwesome][size=24]Your title here[/size][/font][/font][font=Georgia] [/font][/color][/size][/center]
[/td]
[td style="background-image: url(http://i35.servimg.com/u/f35/12/23/10/57/b110.png); background-repeat: no-repeat;" width="84"][/td]
[/tr]
[/table]
[table class="posting-table" style="border-left: 1px solid rgb(0, 0, 0); border-right: 1px solid rgb(0, 0, 0); border-bottom: 1px solid rgb(0, 114, 149);" cellspacing="0" width="100%"][tr][td style="padding-left: 5px; padding-right: 5px; background-color: rgb(225, 225, 225);"]

[size=13]Your text goes here
                             [/size]
[size=13][size=13]Your text goes here
[/size][/size]
[size=13][size=13]Your text goes here [/size]


[/size][/td]
[/tr]
[/table]
[table class="posting-table" style="border-left: 1px solid rgb(0, 0, 0);border-radius: 0px 0px 3px 3px; border-right: 1px solid rgb(0, 0, 0); border-bottom: 1px solid rgb(0, 0, 0);" cellspacing="0" width="100%"][tr][td style="background: rgb(0, 185, 238); none repeat scroll 0% 0%; text-align: justify; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; padding-left: 5px;text-shadow: 1px 1px #000;"][center][b][color=#B7B7B7]                          [size=13]Add text here ot remove it  its up to you[/size][/color][/b][/center]
[/td]
[td style="background: transparent url(http://i35.servimg.com/u/f35/12/23/10/57/b310.png) No-repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;" height="100" width="140"][/td]
[/tr]
[/table]

To make the top and bottom bigger are smaller just change the hight from 100  to what ever you like

the text background "grey" can also be changed to what ever color you like

that's nothing like what i want i want it to look like this

Code:

<table style="background:url('http://2img.net/i/fa/empty.gif') no-repeat 8px 50% #FFF;border:1px solid #CCC;border-left:2px solid #0598E4;border-right:2px solid #0598E4;border-top:50px solid #0598E4;border-bottom:5px solid #0598E4;padding:5px 5px 5px 75px;width:97%;border-radius:3px;font-size:10px;"><tr><td>[color=#000000]•
•
•
•
•
•
•
•
•
•
•
•
•
•
[/color]<br/><br/></table>

but i want to be able to put in text at the top border can someone please help?

oh silly me your wanting a code to go in a version  2 not 3 thats why its not working our right for you as the codes i gave are for Phpbb3

like this ?

Code:

<table class="posting-table" style="border-width: 1px 1px 0px; border-style: solid; border-color: rgb(5, 152, 228); -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none; text-shadow: 2px 2px rgb(0, 0, 0); border-radius: 3px 3px 0px 0px; width: 100%;" <tr="" cellspacing="0">
    <tbody>
        <tr>
            <td style="background-color: rgb(5, 152, 228); background-repeat: no-repeat; width: 84px; height: 70px;">
            </td>
            <td style="background-color: #0598E4; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; padding-bottom: 15px;" <center="" align="center">
                <size=16><color=#b7b7b7><color=#ffffff><span style="color: rgb(255, 255, 255); font-size: 24px;"><strong><font=georgia><size=24>Your title here</size=24></font=georgia></strong></span><font=georgia> </font=georgia></color=#ffffff></color=#b7b7b7></size=16>
            </td>
        </tr>
    </tbody>
</table>
<table _moz_resizing="true" class="posting-table" style="border-left: 1px solid rgb(5, 152, 228); border-right: 1px solid rgb(5, 152, 228); border-bottom: 6px solid rgb(5, 152, 228); border-radius: 0px 0px 3px 3px; width: 100%;" cellspacing="0">
    <tbody>
        <tr>
            <td style="padding-left: 5px; padding-right: 5px; background-color: rgb(255, 255, 255);">
                 <size=13>Your text goes here                              <br /><br />Your text goes here  <br /><br />Your text goes here  </size=13>
            </td>
        </tr>
    </tbody>
</table>

thank you @ape i'll figure it out from there

May we consider this solved?

You don't need further help or anything?

-Brandon

yeah you can count it solved

Problem solved & topic archived. ~ brandon_g Please read our forum rules: ESF General Rules

@Ape
thank you so much for helping me out it's what i needed

Code:


<table class="posting-table" style="border-width: 1px 1px 0px; border-style: solid; border-color: rgb(5, 152, 228); -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none; text-shadow: 2px 2px rgb(0, 0, 0); border-radius: 3px 3px 0px 0px; width: 100%;" <tr="" cellspacing="0"><tbody><tr><td style="background-color: rgb(5, 152, 228); background-repeat: no-repeat; width: 84px; height: 70px;"></td><td style="background-color: #0598E4; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; padding-bottom: 15px;" <center="" align="center"><size=16><color=#b7b7b7><color=#ffffff><span style="color: rgb(255, 255, 255); font-size: 24px;"><strong><font=georgia><size=24><center>TESTING</center></size=24></font=georgia></strong></span><font=georgia> </font=georgia></color=#ffffff></color=#b7b7b7></size=16></td></tr></tbody></table><table _moz_resizing="true" class="posting-table" style="border-left: 1.5px solid rgb(5, 152, 228); border-right: 1.5px solid rgb(5, 152, 228); border-bottom: 6px solid rgb(5, 152, 228); border-radius: 0px 0px 3px 3px; width: 100%;" cellspacing="0"><tbody><tr><td style="padding-left: 5px; padding-right: 5px; background-color: rgb(255, 255, 255);">
[color=#FF0000][u]Important notice[/u]:[/color] [color=#000000]Ignorance of the rules is not an excuse.[/color]


</td></tr></tbody></table>

so that is the code after i adjusted it but the problem is the title isn't being put in the center even tho i put in centering tags can you please help?
http://prntscr.com/biqk57

Did you add this?

Code: <center="" align="center">

Hmm i have looked over your code and placed it on my test site and i have done not change to it and it is to the center

How are you posting this code ?

SLGray wrote:Did you add this?

Code: <center="" align="center">

i added

Code:

<center></center>

Ape wrote:How are you posting this code ?

what do you mean how am i posting it? also in your image the topic title isn't in the center

Hello @George Abdo,

Try replacing the template above with this one:

Code:

[table style="width: 100%;border: 1px solid #0598e4;padding: 20px 8px;color: #fff;background: #0598e4;    text-shadow: -2px -1px 1px #000;border-radius: 3px 3px 0px 0px;font-weight: bold;font-family: Trebuchet MS;font-size: 20px;"][tr][td][center]Title Text Here[/center][/td][/tr][/table]
[table style="border: 1px solid #0598e4;width: 100%;padding: 10px;border-bottom: 5px solid #0598e4;border-radius: 0px 0px 3px 3px;"][tr][td][color=#FF0000][u]Important notice:[/u][/color] Ignorance of the rules is not an excuse
[/td][/tr][/table]

and in HMTL form:

Code:

<table style="width: 100%;border: 1px solid #0598e4;padding: 20px 8px;color: #fff;background: #0598e4;    text-shadow: -2px -1px 1px #000;border-radius: 3px 3px 0px 0px;font-weight: bold;font-family: Trebuchet MS;font-size: 20px;"><tr><td><center>Title Text Here</center></td></tr></table>
<table style="border: 1px solid #0598e4;width: 100%;padding: 10px;border-bottom: 5px solid #0598e4;border-radius: 0px 0px 3px 3px;"><tr><td><span style="color: #FF0000;"><u>Important notice:</u></span> Ignorance of the rules is not an excuse
</td></tr></table>

This is the result:

Title Text Here

Important notice: Ignorance of the rules is not an excuse

@Luffy
thank you it work but only problem is it take background of forum, for example in your post it looks white but in my forum it looks black i want it to look white how can i do that?
http://prntscr.com/biw71c

Here try this and see if this text is white on your forum with it now:

Code:

[table style="width: 100%;border: 1px solid #0598e4;padding: 20px 8px;color: #fff;background: #0598e4;    text-shadow: -2px -1px 1px #000;border-radius: 3px 3px 0px 0px;font-weight: bold;font-family: Trebuchet MS;font-size: 20px;"][tr][td][center][color=#EEEEEE]Title Text Here[/color][/center][/td][/tr][/table]
[table style="border: 1px solid #0598e4;width: 100%;padding: 10px;border-bottom: 5px solid #0598e4;border-radius: 0px 0px 3px 3px;"][tr][td][color=#FF0000][u]Important notice:[/u][/color] Ignorance of the rules is not an excuse
[/td][/tr][/table]

-Brandon

brandon_g wrote:Here try this and see if this text is white on your forum with it now:

Code:

[table style="width: 100%;border: 1px solid #0598e4;padding: 20px 8px;color: #fff;background: #0598e4;    text-shadow: -2px -1px 1px #000;border-radius: 3px 3px 0px 0px;font-weight: bold;font-family: Trebuchet MS;font-size: 20px;"][tr][td][center][color=#EEEEEE]Title Text Here[/color][/center][/td][/tr][/table]
[table style="border: 1px solid #0598e4;width: 100%;padding: 10px;border-bottom: 5px solid #0598e4;border-radius: 0px 0px 3px 3px;"][tr][td][color=#FF0000][u]Important notice:[/u][/color] Ignorance of the rules is not an excuse
[/td][/tr][/table]

-Brandon

@brandon_g he wanted the background that was black to change to white!

George Abdo wrote:@Luffy
thank you it work but only problem is it take background of forum, for example in your post it looks white but in my forum it looks black i want it to look white how can i do that?
http://prntscr.com/biw71c

@George Abdo try this:

Code:

[table style="width: 100%;border: 1px solid #0598e4;padding: 20px 8px;color: #fff;background: #0598e4;    text-shadow: -2px -1px 1px #000;border-radius: 3px 3px 0px 0px;font-weight: bold;font-family: Trebuchet MS;font-size: 20px;"][tr][td][center]Title Text Here[/center][/td][/tr][/table]
[table style="border: 1px solid #0598e4;width: 100%;padding: 10px;border-bottom: 5px solid #0598e4;border-radius: 0px 0px 3px 3px;background: #fff;"][tr][td][color=#FF0000][u]Important notice:[/u][/color] Ignorance of the rules is not an excuse
[/td][/tr][/table]

Oh, I thought he said the text in the center was appearing black on his forum instead of white.

Such is a possibility sometimes, so I added the white color tags.

I must have mis understood him then, I apologize.

-Brandon

Hello @George Abdo,

Is this still needed?

Hello,

Is this topic solved again, or do you need any further assistance on this?

-Brandon