FM Design
Would you like to react to this message? Create an account in a few clicks or log in to continue.

IMPORTANT

FM Design is in read-only mode, please click here for more information.

Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Tue 03 Sep 2019, 11:49

» GIFActif - Giphy Button for the Editor
by Ange Tuteur Wed 08 May 2019, 17:21

» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28

» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15

» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11

» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24

» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58

» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50

» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22

» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12

» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10

» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51

» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11

» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19

» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34

Recent Tutorials
Top posting users this month

Who is online?
In total there are 34 users online :: 0 Registered, 0 Hidden and 34 Guests :: 1 Bot

None

[ View the whole list ]


Most users ever online was 515 on Tue 14 Sep 2021, 15:24

[SOLVED] announcement and tutorial topic table style on this forum

View previous topic View next topic Go down

george abdo
george abdo
New Member
Gender : Unspecified
Posts : 7
Points : 2850
Reputation : 0
Language : english
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2

Postgeorge abdo Fri 17 Jun 2016, 17:46

hi i want to know how can i make a table like this one please http://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
george abdo
New Member
Gender : Unspecified
Posts : 7
Points : 2850
Reputation : 0
Language : english
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2

Postgeorge abdo Sat 18 Jun 2016, 16:53

bump please
Paradiseng
Paradiseng

Gender : Male
Posts : 98
Points : 3843
Reputation : 19
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
http://www.nigerianpalace.com

PostParadiseng Sat 18 Jun 2016, 17:22

You need to follow the tutorial
george abdo
george abdo
New Member
Gender : Unspecified
Posts : 7
Points : 2850
Reputation : 0
Language : english
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2

Postgeorge abdo Sat 18 Jun 2016, 18:10

i dont want the tutorial i want to know how they made the tutorial post look like that in the table :/
Paradiseng
Paradiseng

Gender : Male
Posts : 98
Points : 3843
Reputation : 19
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
http://www.nigerianpalace.com

PostParadiseng Sun 19 Jun 2016, 13:50

Okay, i understand what you mean. Maybe you need to wait for Anger to come in and help you.
JerriLeah7
JerriLeah7
Graphic Designer
Gender : Female
Age : 34
Posts : 381
Points : 3609
Reputation : 203
Language : English, Sign Language
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
http://www.gatewaytoroleplay.com https://www.facebook.com/JerriLeah https://twitter.com/IceLeah

PostJerriLeah7 Sun 19 Jun 2016, 15:00

That table design belongs to the English Support Forum and we aren't allowed to share it. :/ You can have a similar table design, but you can't have the exact one.
george abdo
george abdo
New Member
Gender : Unspecified
Posts : 7
Points : 2850
Reputation : 0
Language : english
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2

Postgeorge abdo Sun 19 Jun 2016, 16:57

well i have this code
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>
can someone please tell me how can i put in text inside the top border? like a title or something
Anonymous
Guest
Guest

PostGuest Mon 20 Jun 2016, 01:21

You can create a table title with the <caption></caption> tag. Use this tag immediately after the <table> tag:

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;"><caption>YOUR TITLE HERE</caption><tr><td>[color=#000000]•
        •
        •
        •
        •
        •
        •
        •
        •
        •
        •
        •
        •
        •
        [/color]<br/><br/></table>
george abdo
george abdo
New Member
Gender : Unspecified
Posts : 7
Points : 2850
Reputation : 0
Language : english
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2

Postgeorge abdo Mon 20 Jun 2016, 07:40

almost there http://prntscr.com/bin5ki just instead of being outside the table i want it to be inside the table inside the top border to be exact
Anonymous
Guest
Guest

PostGuest Mon 20 Jun 2016, 08:04

Try this. Really, all you need to do is to fiddle around a bit with the tags and borders to get it the way you want it. Here's my try:

Code:
<table style="background:url('http://2img.net/i/fa/empty.gif') no-repeat 1px #FFF;border:1px solid #CCC;border-left:2px solid #0598E4;border-right:1px solid #0598E4;border-top:1px solid #0598E4;border-bottom:1px solid #0598E4;width:97%;border-radius:3px;font-size:10px;"><tr bgcolor="#0598e4"><th><font size="4"><font color=#FFF>YOUR TITLE HERE</font></font></tr><td>[color=#000000]•
        •
        •
        •
        •
        •
        •
        •
        •
        •
        •
        •
        •
        •
        [/color]<br/><br/></table>
george abdo
george abdo
New Member
Gender : Unspecified
Posts : 7
Points : 2850
Reputation : 0
Language : english
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2

Postgeorge abdo Mon 20 Jun 2016, 09:57

im sorry i don't know how to code this is how it looks with your code http://prntscr.com/biojp9 there is space between the title and the top border and left and right i want it to be all a part of the border like this one
(please note that i made this image in editor and i want it to look like it if possible)
https://i.imgur.com/1Qs8olO.png

@ange tuteur can you please help too?
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Mon 20 Jun 2016, 10:47

We can give you tables, but if you don't know how to modify them I'm afraid you're SOL. It'd be like trying to explain a math problem to you, but you don't know math.

The tables require a knowledge of HTML and CSS to create, if you don't have knowledge with these languages you'll have a very hard time trying to modify and even make your own tables. I'd recommend at least learning the minimum of these languages first before attempting to replicate designs that you see on the internet. You can learn,

HTML here : http://www.w3schools.com/html/default.asp
CSS here : http://www.w3schools.com/css/default.asp

You can also find freebies on the web for tables like this, or click here to find more. However, I still recommend learning, because you'll be able to make your own designs and even manage others all by yourself. It's very valuable knowledge to possess. Wink
george abdo
george abdo
New Member
Gender : Unspecified
Posts : 7
Points : 2850
Reputation : 0
Language : english
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2

Postgeorge abdo Mon 20 Jun 2016, 11:05

@Ange tuteur i have this table
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>
all i want to know is how can i make it have text in the top border like in this image that i made
https://i.imgur.com/1Qs8olO.png
Anonymous
Guest
Guest

PostGuest Mon 20 Jun 2016, 11:27

Thanks @Ange Tuteur Hello
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Tue 21 Jun 2016, 10:25

Well, I can provide you with a very trivial example. Generally speaking Forumotion's tables are created with 3 bbcode tables :

1. Title
2. Post Content
3. Footer / Credits

They're outfitted with class names so that the style can easily be changed globally via the CSS stylesheet, but you can also write the styles inline. Here's an example similar to what we do at the Support Forum.

BBCode :
This would be the content you enter into the editor. Simply edit the texts as you see fit. BBCode is essentially a simplified form of HTML, as once the bbcode is transferred to the server it'll be parsed as HTML.
Code:
[table class="table-solid-block table-header"][tr][td]Title[/td][/tr][/table]
[table class="table-content-block"][tr][td]Message[/td][/tr][/table]
[table class="table-solid-block"][tr][td]Footer[/td][/tr][/table]

CSS :
CSS is the "makeup" of your HTML elements. In simple terms it's what gives the tables colors, borders, and anything else you can think of that's design related. This should be pasted into your stylesheet ; Display > Colors > CSS stylesheet.
Code:
.table-header {
  font-size:24px;
  text-align:center;
}

.table-solid-block {
  color:#FFF;
  background:#69C;
  width:100%;
  padding:15px 6px;
}

.table-content-block {
  background:#FFF;
  width:100%;
  border:1px solid #69C;
  padding:6px 3px;
}


The end result would be something similar to this :
Title
Message
Footer
BlackScorpion
BlackScorpion
Valued Member
Gender : Male
Posts : 1165
Points : 4960
Reputation : 96
Location : USA
Language : english
Browser : Browser : Google Chrome Forum Version : Forum Version : Other
http://themechanger.forumotion.com https://pinterest.com/blkscorpion2

PostBlackScorpion Tue 21 Jun 2016, 21:39

That should get you started George.
Anonymous
Guest
Guest

PostGuest Wed 22 Jun 2016, 01:00

BlackScorpion wrote:That should get you started George.

Started asking more of the same Razz
Sponsored content

PostSponsored content

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

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