SportsEngine Community Forum
Register Latest Topics
 
 
 


Reply
  Author   Comment  
docnzok

Moderator
Registered:
Posts: 47
Reply with quote  #1 
The Code element is a very powerful tool!

Dont forget that CSS (Style Sheet Coding) is code also.

Want your table to show alternate colors for rows? You can use a little CSS to do that!

Just put the css code into a template at the top of a page and your table can have alternate colored rows.

Use the same code (by changing a little text) on several pages using the templates!

Here is a table example of where I use CSS to alternate the table row colors.  This is just a registration survey table. (Some other things are going on here, but I wanted to show the CSS effects.



Table.jpg 

0
loren

Avatar / Picture

Community Manager
Registered:
Posts: 228
Reply with quote  #2 
Thanks, Mark!

Can you share the actual code you used to build that table?

- Loren
0
docnzok

Moderator
Registered:
Posts: 47
Reply with quote  #3 

Find your Table Name and insert it into the code used here.

<style>

#(YOUR TABLE NAME HERE)

// Make all odd rows cool green
     tr:nth-child(even) { background-color: #E6F5CF;}
    
// Make the text only in the 10th Column Red
     td:nth-child(10) {color: red;}

</style>

0
eribs4e

Junior Member
Registered:
Posts: 1
Reply with quote  #4 
I'd like to implement this functionality with one of my tables, but I'm unable to find the name of my table. I've used the Chrome inspector tool to look at all the source code and I don't see an id for the table element. The container (div) has an id, but the actual table doesn't.

How do I assign the table a name (id) or is there another way to retrieve the information that I don't know of?

Thanx in advance.
0
nickburggraf

Moderator
Registered:
Posts: 10
Reply with quote  #5 
That should have worked for you.  Chrome's inspector should give you the option to get the right name by...finding the correct element in the elements tab, right clicking and selecting "copy selector".  

Try that.
Will look like this:

<style> #what you copied here {

code here

}
</style>
0
purplepear

Junior Member
Registered:
Posts: 5
Reply with quote  #6 
I've tried to use this code in the site I'm working on, but nothing is happening. I have the table name, too. Not sure what else to try.
0
docnzok

Moderator
Registered:
Posts: 47
Reply with quote  #7 
Purple

Can you send me the link to the page where the table is please?  I will write up a little CSS and test it and then try to help as best I can.

Mark
0
purplepear

Junior Member
Registered:
Posts: 5
Reply with quote  #8 
Thanks, Mark. I'd like to change the header row color, too.

http://www.nationalrecruitingleague.com.prod.sportngin.com/page/show/2716828-division-descriptions
0
Previous Topic | Next Topic
Print
Reply

Quick Navigation:

Easily create a Forum Website with Website Toolbox.