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.
WordPress CSS
Prerequisite :-
- Premium :-
- CSS
- 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
- Sojourn to WordPress Customize Page
- The “You are Customizing” window will appear
- Please click on CSS> button
- Enter the CSS script that you will like to add
- Save the text
- Create new Post or Edit exist existing one
- Use css by doing the following
- Prefixing with Div Class
- Syntax :-
</pre> <div class="[class-id]">
- Sample :-
</pre> <div class="datagrid">
- Syntax :-
- Suffix with
- Prefixing with Div Class
- Use css by doing the following
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> </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> <pre>
Output
NBA – All Stars – 2017
Eastern Conference
Athlete | Team | Position |
---|---|---|
Kyrie Irving | Cleveland Cavaliers | Point Guard (PG) |
DeMar DeRozan | Toronto Blue Jays | Shooting Guard (SG) |
LeBron James | Cleveland Cavaliers | Small Forward (SF) |
Giannis Antetokounmpo | Milwaukee Bucks | Power Forward ( PF) |
Jimmy Butler | Chicago Bulls | Small Forward |
Western Conference
Athlete | Team | Position |
---|---|---|
Stephen Curry | Golden State Warriors | Point Guard (PG) |
James Harden | Houston Rockets | Point Guard (SG) |
Kevin Durant | Golden State Warriors | Small Forward (SF) |
Kawhi Leonard | San Antonio Spurs | Small Forward ( PF) |
Anthony Davis | New Orleans Pelicans | Power Forward ( PF ) |
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
- WordPress
- Custom Design »How to Add Custom CSS
Link
- Custom Design »How to Add Custom CSS
CSS History
- Wikipedia
Link
CSS Sample
CSS Beautifier
- cleancss
Link
Data
- NBA All-Star Game 2017 rosters: Lineup, starters and reserves
Link
[…] be told is was the inspiration behind our last post, as […]