Background

July 4th on a Tuesday throws everything off.

Nevertheless Our task this first weekend in July 2017 is integrating CSS, Custom Style Sheets, into our hosted wordpress posts.

Disclaimers

WordPress

WordPress Plans

As of 2017-July, here are the various flavors of Hosted WordPress.

Link

WordPress CSS

Prerequisite :-

1. Premium :-
   • CSS
2. Small Business :-
   • Google Analytics

And, so we can see that we at least need to be on premium to have access to custom CSS.

Same confirmed here.

Crediting

Crediting my brother.  I emailed him the link and he read the Official literature.

I am with the Nike Crowd, just do it!

Guide

We will be using the Excellent write-up from WordPress Support.

It is titled “Custom Design »How to Add Custom CSS” and it is available here.

Outline

1. Sojourn to WordPress Customize Page
   • https://wordpress.com/customize
2. The “You are Customizing” window will appear
3. Please click on CSS> button
   • Enter the CSS script that you will like to add
   • Save the text
4. Create new Post or Edit exist existing one
   • Use css by doing the following
     • Prefixing with Div Class
       • Syntax :-

         <div class="[class-id]">
         
         

       • Sample :-

         <div class="datagrid">
         
         

     • Suffix with

       </div>
       

Images

You are Customizing

Welcome to Custom CSS!

Customized CSS!

Eli Geske

Eli Geske – Table Styler

Copied CSS Style sheet gladly shared by Eli Geske…

Sample

CSS Code

CSS Code – Eli Geske

.datagrid table {
    border-collapse: collapse;
    text-align: left;
    width: 100%;
}
.datagrid {
    font: normal 12px/150% Arial, Helvetica, sans-serif;
    background: #fff;
    overflow: hidden;
    border: 1px solid #006699;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.datagrid table td,
.datagrid table th {
    padding: 3px 10px;
}
.datagrid table thead th {
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F));
    background: -moz-linear-gradient( center top, #006699 5%, #00557F 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');
    background-color: #006699;
    color: #ffffff;
    font-size: 15px;
    font-weight: bold;
    border-left: 1px solid #0070A8;
}
.datagrid table thead th:first-child {
    border: none;
}
.datagrid table tbody td {
    color: #00496B;
    border-left: 1px solid #E1EEF4;
    font-size: 12px;
    font-weight: normal;
}
.datagrid table tbody .alt td {
    background: #E1EEF4;
    color: #00496B;
}
.datagrid table tbody td:first-child {
    border-left: none;
}
.datagrid table tbody tr:last-child td {
    border-bottom: none;
}
.datagrid table tfoot td div {
    border-top: 1px solid #006699;
    background: #E1EEF4;
}
.datagrid table tfoot td {
    padding: 0;
    font-size: 12px
}
.datagrid table tfoot td div {
    padding: 2px;
}
.datagrid table tfoot td ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: right;
}
.datagrid table tfoot li {
    display: inline;
}
.datagrid table tfoot li a {
    text-decoration: none;
    display: inline-block;
    padding: 2px 8px;
    margin: 1px;
    color: #FFFFFF;
    border: 1px solid #006699;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F));
    background: -moz-linear-gradient( center top, #006699 5%, #00557F 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');
    background-color: #006699;
}
.datagrid table tfoot ul.active,
.datagrid table tfoot ul a:hover {
    text-decoration: none;
    border-color: #006699;
    color: #FFFFFF;
    background: none;
    background-color: #00557F;
}
div.dhtmlx_window_active,
div.dhx_modal_cover_dv {
    position: fixed !important;
}

HTML Code

HTML Code – Table

Here is a rather generic HTML table.  The code does not contain any formatting HTML options and will rely on the hosting page to provide those.

<div class="datagrid">
<table>
<thead>
<tr>
<th>Athlete</th>
<th>Team</th>
<th>Position</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">
<div id="paging">
<ul>
	<li><a href="#">Previous</a></li>
	<li><a class="active" href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">Next</a></li>
</ul>
</div></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Kyrie Irving</td>
<td>Cleveland Cavaliers</td>
<td>Point Guard (PG)</td>
</tr>
<tr class="alt">
<td>DeMar DeRozan</td>
<td>Toronto BlueJays</td>
<td>Shooting Guard (SG)</td>
</tr>
<tr>
<td>LeBron James</td>
<td>Cleveland Cavaliers</td>
<td>Small Forward (SF)</td>
</tr>
<tr class="alt">
<td>Giannis Antetokounmpo</td>
<td>Milwaukee Bucks</td>
<td>Power Forward ( PF)</td>
</tr>
<tr>
<td>Jimmy Butler</td>
<td>Chicago Bulls</td>
<td>Small Forward</td>
</tr>
</tbody>
</table>
</div>
 
<h3>Western Conference</h3>
<div class="datagrid">
<table>
<thead>
<tr>
<th>Athlete</th>
<th>Team</th>
<th>Position</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">
<div id="paging">
<ul>
	<li><a href="#">Previous</a></li>
	<li><a class="active" href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">Next</a></li>
</ul>
</div></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Stephen Curry</td>
<td>Golden State Warriors</td>
<td>Point Guard (PG)</td>
</tr>
<tr class="alt">
<td>James Harden</td>
<td>Houston Rockets</td>
<td>Point Guard (SG)</td>
</tr>
<tr>
<td>Kevin Durant</td>
<td>Golden State Warriors</td>
<td>Small Forward (SF)</td>
</tr>
<tr class="alt">
<td>Kawhi Leonard</td>
<td>San Antonio Spurs</td>
<td>Small Forward ( PF)</td>
</tr>
<tr>
<td>Anthony Davis</td>
<td>New Orleans Pelicans</td>
<td>Power Forward ( PF )</td>
</tr>
</tbody>
</table>
</div>

Output

NBA – All Stars – 2017

Eastern Conference

Western Conference

Listening

Listening to Morgan Heritage

Morgan Heritage – Man in Love
Link

Summary

Like Morgan Heritage I tried twice before, but was unable to integrate CSS into our hosted wordpress site.

Dedicated

Dedicated to WordPress and Eli Geske ( About Eli Geske )

And, even further behind them Tim Berners-Lee ( HTML ) and Håkon Wium Lie & Bert Bos ( CSS ).

References

Tutorial

1. WordPress
   • Custom Design »How to Add Custom CSS
     Link

CSS History

1. Wikipedia
   Link

CSS Sample

1. Eli Geske
   • TableStyler
     Link
   • About
     Link

CSS Beautifier

1. cleancss
   Link

Data

1. NBA All-Star Game 2017 rosters: Lineup, starters and reserves
   Link