inherit
225892
0
Mar 10, 2018 13:56:09 GMT -8
Novaskyi
46
October 2015
oreoisme
|
Post by Novaskyi on Jan 8, 2018 13:59:39 GMT -8
I know that there is a plugin for the Dynamic Tabbed Table, but it's not quite what I'm looking for. Maybe something similar without the tabbing.
The above is not a Probords site, so I cannot just check the coding for myself.
I have found an old code before the update which I don't know if it has an updated version. Index of HTML Tables. If there is an updated version of the 'Three Column Table' that I could use, I'd be grateful.
|
|
Kami
Forum Cat
Posts: 40,064
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,064
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Jan 8, 2018 14:04:28 GMT -8
I think this should be fairly simple to recreate, though I don't advise using tables (they're a bit outdated).
How familiar are you with HTML? Just trying to guage to see if I need to give guidance or if it needs to be more in-depth.
|
|
inherit
225892
0
Mar 10, 2018 13:56:09 GMT -8
Novaskyi
46
October 2015
oreoisme
|
Post by Novaskyi on Jan 8, 2018 14:07:31 GMT -8
I'm not very good at all, I've been using ore-made coding for a lot of the site. mephrpg.boards.net/
|
|
Kami
Forum Cat
Posts: 40,064
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,064
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Jan 8, 2018 14:31:19 GMT -8
Gotcha.
As far as the actual HTML goes, here is a bare-bones setup:
<div class="infotable"> <!--- Start Box 1 ---> <div class="box-1 title"> Box 1 Title <div class="box-1 inside"> This is your content for Box 1 </div> </div> <!--- End Box 1 --->
<!--- Start Box 2 ---> <div class="box-2 title"> Box 2 Title <div class="box-2 inside"> This is your content for Box 2 </div> </div> <!--- End Box 2 --->
<!--- Start Box 3 ---> <div class="box-3 title"> Box 3 Title <div class="box-3 inside"> This is your content for Box 3 </div> </div> <!--- End Box 3 ---> </div>
You can add this in one of three places:
- In your theme layout templates, either on the "Home" secion or the "Forum Wrapper" section, depending on if you want it to show just on the home page or globally, respectively. I personally like having content in layout templates, so if I decide to have another theme I am not limited to creating a theme that has the exact same structure as the previous one.
- In your global headers which will place them globally. I recommend this if you do not plan on having multiple themes, or if you're themes will all follow the same setup.
- In your main headers which will place them on all non-posting pages. The benefits of this are the same as global headers.
When you have that set up, let me know. Keep in mind that this should look pretty boring at the moment, so don't fret -- there's no CSS assigned yet so it's going to look weird.
|
|
Former Member
inherit
guest@proboards.com
253794
0
May 18, 2024 3:16:19 GMT -8
Former Member
0
January 1970
Former Member
|
Post by Former Member on Mar 21, 2018 9:03:39 GMT -8
How do I make this code look like actually table, instead of just text? There's no formatting
|
|
Former Member
inherit
guest@proboards.com
253794
0
May 18, 2024 3:16:19 GMT -8
Former Member
0
January 1970
Former Member
|
Post by Former Member on Mar 22, 2018 9:33:22 GMT -8
bump?
|
|
#e61919
Support Staff
224482
0
1
May 17, 2024 16:18:36 GMT -8
Scott
23,384
August 2015
socalso
|
Post by Scott on Mar 22, 2018 9:37:28 GMT -8
koakiin In Kami 's post above she stated: When you have that set up, let me know. Keep in mind that this should look pretty boring at the moment, so don't fret -- there's no CSS assigned yet so it's going to look weird. Do you have it all set up?
|
|
Former Member
inherit
guest@proboards.com
253794
0
May 18, 2024 3:16:19 GMT -8
Former Member
0
January 1970
Former Member
|
Post by Former Member on Mar 22, 2018 9:53:02 GMT -8
|
|
Kami
Forum Cat
Posts: 40,064
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,064
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Mar 22, 2018 21:27:30 GMT -8
Like I said in the original post:
If you had told me that you had completed this, I would have provided you with CSS to make it look the way you wanted it.
Anyway, now you're going to add the CSS. You can access the stylesheet by going to the admin panel. Under Themes, go to Advanced Styles and CSS. From here you will be directed to a page that has two tabs, one of which is labelled Stylesheet. Select this tab, then scroll all the way down to the bottom. I recommend creating a few new lines to separate your CSS from the default ProBoards CSS, presuming you have not added CSS to your stylesheet yet.
So the way I've formatted your table, you have one container encompassing three containers. Each of those containers then holds another container. The way this breaks down is:
> container that holds everything > box one > box one's box of content > box two > box two's box of content > box three > box three's box of content
It's important for me that you understand how this is set up so that any changes you want to make in the future don't result in the structure messing up, so let me know if the explanation above was unclear.
In light of the above structure, the first thing to style would be the container (div) that holds everything. We gave this div the class "infotable", so that is how we will target it with CSS. In CSS, you must put a period before the class name so that the CSS knows that you're referencing a class rather than something else.
What we'd need to determine here are the width of the main container overall aesthetic attributes you want for the content in the rest of the containers -- colour, font, etc. Something like this:
.infotable { border: 1px solid #000000; background-color: #333333; color: #eeeeee; font-family: arial, sans-serif; width: 90%; }
You can change the values for any attribute you see here. I recommend changing the border and background colour to match your theme (they are currently black and dark grey, respectively), change the font to whatever font your theme uses, and the width to the width of your forum. If your forum is a fix pixel width, use that instead of the %. Keep in mind that having a % width may have some funky consequences if the browser window is narrow.
This is a lot of info, let me know when you've finished this and we'll move on to the next step. For ease, make sure you tag me in your next post -- @kamiyakaoru -- so that I'll get a notification.
|
|
Former Member
inherit
guest@proboards.com
253794
0
May 18, 2024 3:16:19 GMT -8
Former Member
0
January 1970
Former Member
|
Post by Former Member on Mar 23, 2018 3:11:37 GMT -8
Kami Thank you for that. prntscr.com/iv97cr Here is how it looks so far. The colour and font isn't too much of an issue at the moment as I am still on the default Proboards theme, wanting to work out the structure before the aesthetics. Could a line break be put between the info table and the news bar / top of the boards prntscr.com/iv99up Unless I'm jumping the gun and it will be covered in later steps, in which case, sorry.
|
|
Kami
Forum Cat
Posts: 40,064
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,064
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Mar 23, 2018 7:31:00 GMT -8
We can definitely address that, sure. I've copied that CSS I posted originally and added the new line in RED.
.infotable { border: 1px solid #000000; background-color: #333333; color: #eeeeee; font-family: arial, sans-serif; width: 90%; margin-bottom: 10px; }
Adjust the 10 to whatever numerical value you think looks best.
Once you have that finished, we're going to take those three inner containers (divs) and place them side by side. Could you tell me whether or not the width of your .infotable is in pixels or percent? Please let me know in your next reply, along with the numerical value. How I structure the next part will be dependent on whether or not you are using a fixed or fluid width.
|
|
Former Member
inherit
guest@proboards.com
253794
0
May 18, 2024 3:16:19 GMT -8
Former Member
0
January 1970
Former Member
|
Post by Former Member on Mar 23, 2018 8:26:02 GMT -8
Kami I have the boards set at 1000px and the .infotable at 100% If I at a later time choose to add side tables (I'm not sure if I will or not), would that affect the infotable at all?
|
|
Kami
Forum Cat
Posts: 40,064
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,064
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Mar 23, 2018 8:57:14 GMT -8
That should be just fine with regards to the current set up. With regards to adding the side tables at a later date, yes, it would affect the infotable inasmuch as it would wind up resizing to accommodate for the extra content being added to the forum wrapper. However, it should be a simple enough fix provided that you don't make the width of the forum / infotable something ludicrously small.
So with the way things are, add the following CSS immediately under the first one I gave you:
.box-1 .title, .box-2 .title, .box-3 .title { background-color: #333333; color: #ffffff; padding: 10px; float: left; }
We will need to make some adjustments on this, so bear with me but I'd like to see what the result is first. In your next post confirming the above changes are complete, please link me to your forum. Alternatively, you can send me a PM if you want to keep the link private.
|
|
Former Member
inherit
guest@proboards.com
253794
0
May 18, 2024 3:16:19 GMT -8
Former Member
0
January 1970
Former Member
|
Post by Former Member on Mar 23, 2018 9:38:30 GMT -8
|
|
Kami
Forum Cat
Posts: 40,064
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,064
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Mar 23, 2018 10:14:34 GMT -8
I am not seeing the aforementioned CSS in your source, could you please confirm that it's in there? I just want to be sure.
Also, after float:left; please add width: 33%;
|
|