announcement and tutorial topic table style on this forum

[George Abdo]

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?

[George Abdo]

bump @Rhino.Freak can you please help

[Ape]

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:

[George Abdo]

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

[George Abdo]

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?

[TheCrow]

@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.

[George Abdo]

@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

[Ape]

what color do you want at the top ?

[George Abdo]

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

[Ape]

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

[George Abdo]

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?

[Ape]

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>

[George Abdo]

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

[brandon_g]

May we consider this solved?

You don't need further help or anything?

-Brandon

[George Abdo]

yeah you can count it solved

[brandon_g]

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

[brandon_g]

Topic re opened upon topic starter request ~ brandon_g

[George Abdo]

@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

[SLGray]

Did you add this?

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

[Ape]

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 ?

[George Abdo]

Did you add this?

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

i added

Code:

<center></center>

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

[TheCrow]

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

[George Abdo]

@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

[brandon_g]

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

[TheCrow]

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!

@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]

[brandon_g]

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

[Nemo]

Hello @George Abdo,

Is this still needed?

[brandon_g]

Hello,

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

-Brandon