Flexible Data Table using CSS

See the Pen Flexible Data Table using CSS by Brandon Himpfen (@brandonhimpfen) on CodePen.16787

HTML

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>First name</th>
      <th>Last name</th>
      <th>Email</th>
      <th>Street</th>
      <th>Country</th>
      <th>University</th>
      <th>IBAN</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>000001</td>
      <td>Lani</td>
      <td>Ovendale</td>
      <td>lovendale0@w3.org</td>
      <td>7850 Old Shore Drive</td>
      <td>United Kingdom</td>
      <td>University of Plymouth</td>
      <td>BG34 MPVP 8782 88EX H1CJ SC</td>
    </tr>
    <tr>
      <td>000002</td>
      <td>Israel</td>
      <td>Tassell</td>
      <td>itassell1@ow.ly</td>
      <td>245 Merchant Circle</td>
      <td>Macedonia</td>
      <td>South East European University</td>
      <td>FR11 4824 2942 41H9 XBHC 46P2 O86</td>
    </tr>
    <tr>
      <td>000003</td>
      <td>Eveleen</td>
      <td>Mercer</td>
      <td>emercer2@ow.ly</td>
      <td>70700 Kipling Pass</td>
      <td>Portugal</td>
      <td>Instituto Superior Novas Profissões - INP</td>
      <td>GR96 7559 456P GUAN WTAJ 3VPB S0P</td>
    </tr>
    <tr>
      <td>000004</td>
      <td>Conn</td>
      <td>Whitley</td>
      <td>cwhitley3@wsj.com</td>
      <td>03 Service Terrace</td>
      <td>Albania</td>
      <td>Epoka University</td>
      <td>LI59 1813 2T7T VKTO 6RKE X</td>
    </tr>
    <tr>
      <td>000005</td>
      <td>Cherye</td>
      <td>Smitheram</td>
      <td>csmitheram4@rambler.ru</td>
      <td>9 Eliot Parkway</td>
      <td>Indonesia</td>
      <td>Universitas Mahasaraswati Denpasar</td>
      <td>BR27 4570 4226 4255 5239 0197 316T J</td>
    </tr>
    <tr>
      <td>000006</td>
      <td>Bunnie</td>
      <td>Sked</td>
      <td>bsked5@51.la</td>
      <td>03418 Ludington Plaza</td>
      <td>Nigeria</td>
      <td>Federal University of Technology, Minna</td>
      <td>ES45 6721 1332 3288 6455 1242</td>
    </tr>
    <tr>
      <td>000007</td>
      <td>Helaine</td>
      <td>Crother</td>
      <td>hcrother6@opera.com</td>
      <td>7932 Sloan Park</td>
      <td>Philippines</td>
      <td>Saint Ferdinand College</td>
      <td>GB50 HFAD 8121 3729 9841 31</td>
    </tr>
    <tr>
      <td>000008</td>
      <td>Tana</td>
      <td>Ajean</td>
      <td>tajean7@sfgate.com</td>
      <td>2 Schurz Junction</td>
      <td>China</td>
      <td>Xi'an University of Electronic Science and Technology</td>
      <td>KZ85 7422 XDPB P2VQ H8SR</td>
    </tr>
    <tr>
      <td>000009</td>
      <td>Sollie</td>
      <td>Greenrde</td>
      <td>sgreenrde8@wikispaces.com</td>
      <td>055 Mockingbird Way</td>
      <td>Russia</td>
      <td>St. Petersburg State Mining Institute (Technical University)</td>
      <td>CH61 6423 9T4W WP0I 8MUK C</td>
    </tr>
    <tr>
      <td>000010</td>
      <td>Vernon</td>
      <td>Millington</td>
      <td>vmillington9@marketwatch.com</td>
      <td>74 David Pass</td>
      <td>Portugal</td>
      <td>Instituto Politécnico de Setúbal</td>
      <td>ES71 2390 0665 1601 8072 4924</td>
    </tr>
  </tbody>
</table>

CSS

* {
  box-sizing: border-box;
}

table {
  display: grid;
  border-collapse: collapse;
  min-width: 100%;
  grid-template-columns: 
    minmax(150px, 1fr)
    minmax(150px, 1.67fr)
    minmax(150px, 1.67fr)
    minmax(150px, 1.67fr)
    minmax(150px, 3.33fr)
    minmax(150px, 1.67fr)
    minmax(150px, 3.33fr)
    minmax(150px, 1.67fr);
}

thead,
tbody,
tr {
  display: contents;
}

th,
td {
  padding: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

th {
  position: sticky;
  top: 0;
  background: #405de6;
  text-align: left;
  font-weight: normal;
  font-size: 1.1rem;
  color: white;
}

th:last-child {
  border: 0;
}

td {
  padding-top: 10px;
  padding-bottom: 10px;
  color: #808080;
}

tr:nth-child(even) td {
  background: #f8f6ff;
}

Bootstrap Jumbotron Background Cover Image

Add a background image to your jumbotron (hero) in Bootstrap.

See the Pen Bootstrap Jumbotron Background Cover Image by Brandon Himpfen (@brandonhimpfen) on CodePen.16787

HTML

<div class="jumbotron jumbotron-cover-image">
   <div class="container">
       <h1>Hello, world!</h1>
       <p>...</p>
   </div>
</div>

Add .jumbotron-cover-image CSS class.

CSS

.jumbotron-cover-image {
        position: relative;
        background: #000 url("https://himpfencom.ams3.cdn.digitaloceanspaces.com/codepen-asset-hosting/yeshi-kangrang-276043-unsplash.jpg") center center;
        width: 100%;
        height: 100%;
        background-size: cover;
        color: #fff;
}

You can change the background colour and font colour as needed.

Bootstrap Outline Buttons

See the Pen Bootstrap 4: Outline Buttons by Brandon Himpfen (@brandonhimpfen) on CodePen.16787

HTML

<button type="button" class="btn btn-primary-outline">Primary</button>

<button type="button" class="btn btn-secondary-outline">Secondary</button>

<button type="button" class="btn btn-info-outline">Info</button>

<button type="button" class="btn btn-success-outline">Success</button>

<button type="button" class="btn btn-warning-outline">Warning</button>

<button type="button" class="btn btn-danger-outline">Danger</button>

Create Alerts using CSS

Alerts provide event-based feedback messages for typical user actions.

See the Pen Alerts by Brandon Himpfen (@brandonhimpfen) on CodePen.16787

HTML

<div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this important alert message.</div> 

<div class="alert alert-info" role="alert"><strong>Heads up!</strong> This alert needs your attention, but it's not super important.</div> 

<div class="alert alert-warning" role="alert"><strong>Warning!</strong> Better check yourself, you're not looking too good.</div> 

<div class="alert alert-error" role="alert"><strong>Oh snap!</strong> Change a few things up and try submitting again.</div>

CSS

.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.alert h4 {
  margin-top: 0;
  color: inherit;
}
.alert .alert-link {
  font-weight: bold;
}
.alert > p,
.alert > ul {
  margin-bottom: 0;
}
.alert > p + p {
  margin-top: 5px;
}
.alert-success {
  background-color: #dff0d8;
  border-color: #d6e9c6;
  color: #3c763d;
}
.alert-success hr {
  border-top-color: #c9e2b3;
}
.alert-success .alert-link {
  color: #2b542c;
}
.alert-info {
  background-color: #d9edf7;
  border-color: #bce8f1;
  color: #31708f;
}
.alert-info hr {
  border-top-color: #a6e1ec;
}
.alert-info .alert-link {
  color: #245269;
}
.alert-warning {
  background-color: #fcf8e3;
  border-color: #faebcc;
  color: #8a6d3b;
}
.alert-warning hr {
  border-top-color: #f7e1b5;
}
.alert-warning .alert-link {
  color: #66512c;
}
.alert-error {
  background-color: #f2dede;
  border-color: #ebccd1;
  color: #a94442;
}
.alert-error hr {
  border-top-color: #e4b9c0;
}
.alert-error .alert-link {
  color: #843534;
}

Disqus for Twenty Fifteen CSS

Do you want the Disqus comment system WordPress plugin to match your Twenty Fifteen WordPress theme? Use the following CSS:

#disqus_thread {
	background: #fff;
	padding: 3.8461% 7.6923%;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
	width: 83.5882%;
	margin: 2em auto;
}

Center Align Bootstrap Nav Pills

This tutorial will show you how to center align nav pills in Bootstrap.

HTML

<div class="centered-pills">
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>
</div>

CSS

.centered-pills { text-align: center } 
.centered-pills ul.nav-pills { display: inline-block }
.centered-pills li { display: inline } 
.centered-pills a { float: left } 
* html .centered-pills ul.nav-pills, *+html .centered-pills ul.nav-pills { display: inline }
* ```

Link Hover Underline Gradient

Apply a gradient to the underline of your links when hovered.

HTML

<a href="#">Pellentesque habitant morbi</a> 

CSS

a {
  position: relative;
  padding-bottom: 2px;
  text-decoration: none;
}
a:hover::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 0;
  height: 1px;
  width: 100%;
  background: #444;
  background: linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
 }

Add an SSL Trust Seal on Easy Digital Downloads Checkout

Adding an SSL trust seal can increase trust from someone wanting to purchase from you and therefore increase the likelihood of them completing the order.

Create and activate a plugin using the following code:

<?php
/***
Plugin Name: SSL Trust Seal on Easy Digital Downloads Checkout
Plugin URI: https://himpfen.com
Description: Add a SSL seal to the checkout of Easy Digital Downloads
Version: 0.1
Author: Brandon Himpfen
Author URI: https://himpfen.com
Contributors: bhimpfen
License: GPL2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

function edd_ssl_during_stripe() {
    ?>
    SSL Seal HTML goes here...
    <?php
}
add_action( 'edd_after_cc_expiration', 'edd_ssl_during_stripe' );

The SSL trust seal will be placed at the bottom of the Easy Digital Downloads Checkout page.

You can customize the appearance of the SSL trust seal using CSS. Example:

#edd_purchase_form_wrap .class-name {   

}

With .class-name being the CSS class from the HTML used in the plugin code.