HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


Table Fun!

Login / Search

 [ Join | More ]
 Add topic 
Posted
Item has a rating of 5 (Liked by KingBast)  
Rating:
#110485 (In Topic #22093)
Avatar

Community saint

Making tables better in ocPortal

Table of contents



Hey everyone, how are ya'll? Been a while right?

Anyway, I am here to share some fun things I got from experimenting. This time with our lack-luster tables. If you have ever inserted a table you'd note that tables have:
  • No Borders
  • Are plain in color (white) except for the header
  • Are Boring

Of course you could change each table individually by editing them on a by cell basis, but with some playing in the css files we can have all table look the way we want them to.


DISCLAIMER

Before I continue, I should point out that I did this in global.css which effects tables globally. This will effect the table you make, as well as the globally applied tables like site statistics. This will not effect the appearance of OCF forums themselves because it uses a different css file - ocf.css. There may be a better css file for just the tables you make, but I haven't found one yet. I do not see this as bad though, but you should at least know about it and test it before putting it on your production site.

Now that I got that disclaimer out of the way...
  • Step 1: Go into your admin zone.
  • Step 2: Go to style > themes
  • Step 3: Choose your theme's css files entry
  • Step 4: Choose global.css and find the area dealing with tr and td classes.

First - Borders


If you want to have borders around all of your table cells automatically, look for this class.

Code


td, th.de_th {
    color: {$GET,slightly_seeded_text};
    font-weight: normal;
    text-align: {!en_left};
    font-weight: normal;
    border: 1px solid #ccc;


When you find it, you will see that the border: line is set to 0px. You can change that like in my example. Play around with the color and the style and thickness.


Second - Hovering Shading


If you want to get some fun shading going on when you hover over a table row - which I think looks cool, just put the following in your global.css

Code


tr:hover {
  background-color: #bfc6d9;
}

Obviously the color was my choice, you can use a different color. You can even have the text change color on hover by using color: #somecolor;. You may even change the text weight!


Third - Zebra Stripes


If you want your table to have a different row color for every other row, use this in your global.css:

Code


tbody tr:nth-child(odd) {
  background: #e6e6e6;
}

Again, background color is up to you!


Fourth - Zebra Stripes with Hover Effect


Now if you have been following this step by step, you would notice that only your rows that you didn't color have a hover effect, the "zebra stripe" rows do not. You can add hover effect to those rows though! Just add this to your global.css below the entry you added for the zebra stripes.

Code


tbody tr:nth-child(odd):hover {
  background: #bfc6d9;
}



Fifth - The Whole Changes Listed Above


Here are all the changes described above. This is borders, hover, zebra stripes, zebra stripe hovering effect. This all goes in global.css.

Code


td, th.de_th {
    color: {$GET,slightly_seeded_text};
    font-weight: normal;
    text-align: {!en_left};
    font-weight: normal;
    border: 1px solid #ccc;
    
}
tr:hover {
  background-color: #bfc6d9;
}
tbody tr:nth-child(odd) {
  background: #e6e6e6;
}
tbody tr:nth-child(odd):hover {
  background: #bfc6d9;
}

Legends of Nor'Ova: A site powered by ocPortal; home of the Legends of Nor'Ova tabletop RPG wiki and community.

Like ocPortal? Want to thank Chris and gang somehow? Then help out in the chat room! It really needs your help! Just open it in a tab everytime you open your web browser, and when you hear a "ding", check it out!

"Those who want help should first be willing to give help."
Back to the top
 
Posted
Item has a rating of 5 (Liked by KingBast)  
Rating:
#110490
Avatar

Community saint

In case you didn't know, forums are tables as well! That means you can achieve some table styling on your ocf forums!

But they require a little more set up and work to make work. This is because by default, OCF has columns instead of rows set up in the CSS style sheet. If you want to deal with rows, you have to add in that style.

The most common styling for forums is the zebra stripping effect, which is where every other row is a different color. At one time I was looking for how to do this and a fellow ocPortal user called Ducky found a way how to do so. I'll share that here with you.


Step 1 - Making A TPL Edit


The first step in this process requires a TPL Edit. Thankfully it is an easy edit.
So in your admin zone go to styles > themes and choose your theme's template files. You will want to search for ocf_forum_in_grouping.tpl

The very first line in that tpl sheet is <tr>. That is the line we are going to change. Change that <tr> to

Code


<tr class="{$CYCLE,forum_rows,row_even,row_odd}">


What that does is makes rows, row_even, and row_odd as styles that you can now use. Save your changes.


STEP 2 - Global.CSS


Now go into your theme's global.css and go to the bottom of the file. If you are wanting the zebra-stripe effect, paste this at the bottom:

Code


.row_odd td{
background-color: #e6e6e6;
}


If you do not want a zebra stripe effect and instead want to color individual rows a different color, you can do something like:

Code


.row_1 td{
background-color: #e6e6e6;
}



Hovering Effect for Forums


You can also add a hover effect on forums. Now it won't highlight the entire forum row - why? I do not know. But what it will do is when you hover over something that is a clickable link, it will highlight that.

Just put the following at the bottom of your global.css (assuming you are using zebra stripping):

Code


.row_even td :hover {
  background-color: #bfc6d9;
}
.row_odd td :hover {
  background-color: #bfc6d9;
}


Of course feel free to change the color!

Why at the bottom?


You might be wondering why we put things at the bottom of the css file. The bottom is simply read least, so anything at the bottom will be applied last - thus on top of everything else. This assures that anything we put in at the bottom of the css file will take affect.

A BIG thanks to Duck for finding the way to make such changes to OCF!

Legends of Nor'Ova: A site powered by ocPortal; home of the Legends of Nor'Ova tabletop RPG wiki and community.

Like ocPortal? Want to thank Chris and gang somehow? Then help out in the chat room! It really needs your help! Just open it in a tab everytime you open your web browser, and when you hear a "ding", check it out!

"Those who want help should first be willing to give help."
Back to the top
 
Posted
Rating:
#110492
Avatar

Mythus has now been recruited to contribute into our officially hosted documentation for v10 :cool:.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: