CSS

From IT Wiki
Jump to navigation Jump to search

This page is for CSS (Cascading Style Sheets) information.

Center table contents class

/* Add class "centercells" to table to center cell content */
table.centercells tr td {
   text-align: center;
}

Background color table columns

/* Shade background of odd numbered table columns */
table.fanratablecolcolors td:nth-child(odd) { 
        background-color: #EFF4F5;
}
table.fanratablecolcolors th:nth-child(odd) { 
        background-color: #EFF4F5;
}

Force CSS file reload

Especially when using web site caching, getting the CSS files to reload after a change can be a problem.

Create a bookmark with the following URL:

javascript:(function(){var h,a,f;a=document.getElementsByTagName('link');for(h=0;h<a.length;h++){f=a[h];if(f.rel.toLowerCase().match(/stylesheet/)&&f.href){var g=f.href.replace(/(&|%5C?)forceReload=\d+/,'');f.href=g+(g.match(/\?/)?'&':'?')+'forceReload='+(new Date().valueOf())}}})()

When you are on a page which you wish to reload the CSS, click the bookmark.

Javascript to change CSS

CSS is changed on click of responsive-tabs class.

$(document).ready(function(){
    $(".responsive-tabs").click(function(){
    alert("You have clicked inside Div!");
    $(".igsv-table").css("resize", "both  !important");
    $(".igsv-table").css("overflow", "auto");
    $(".priceest td.col-4").css("background-color", "blue");
    $(".priceest th.col-4").css("background-color", "blue");
    $(".priceest").css("resize", "both");
    $(".priceest").css("table-layout", "auto");
});

No borders on table cells

/* Add class "noborder" to table for no borders */
.noborder td {
   border: 0;
}

Replace Tables with Div

For layout, Divs are recommended instead of tables.

Flexbox

CSS

/* Flexbox for vertical and horizontal */
/* Three column */
.flex {
  display:flex;
  align-items: center;
  justify-content: center;
  }

.flexleftthird {
   float: left;
   flex-shrink: 0;
}
.flexcenterthird {
   flex-shrink: 0;
}
.flexrightthird {
   float: right;
   flex-shrink: 0;
}

HTML

<div class="flex">
  <div class="flexleftthird">CONTENT GOES HERE</div>
  <div class="flexcenterthird">CONTENT GOES HERE</div>
  <div class="flexrightthird">CONTENT GOES HERE</div>
</div>

Show/Hide div

<script type="text/javascript">

    function toggle_visibility(id) {
      el = document.getElementById(id);
      el.style.display = (el.style.display == '') ? 'none' : ''
    }

</script>
/* Text to click */
<span onclick="toggle_visibility('foo');">Click me to toggle id="foo"</span>

/* Button instead of text to click (can make ID anything) */
<button id="showhide_theme_details" onclick="toggle_visibility('foo');">Show/Hide theme details</button>

/* Div that gets shown and hidden - The display:none is to have it hidden by default. */
<div id="foo" style="display:none;">

What you want to show/hide goes here.

</div>

Sticky table headers

th {
  background: white;
  position: sticky;
  top: 0; /* Don't forget this, required for the stickiness */
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}

WordPress

Add playlist to widget

Add to functions.php file:

/* Add support for playlist in widgets */
add_filter( 'widget_text', array( $wp_embed, 'run_shortcode' ), 8 );
add_filter( 'widget_text', array( $wp_embed, 'autoembed'), 8 );
add_filter( 'widget_text', 'do_shortcode');

Use hidden headings for navigation

Add to style.css file:

/* Add class "hidden" to h2 to hide content */
h2.hidden  {
    visibility:hidden;
    height: 0px;
    margin: 0px !important;
    padding: 0px !important;
}

Use with Table of Contents Plus plugin

Sometimes the heading is too long when you are using the Table of Contents Plus plugin. In that case, you can hide the actual heading and have the ToC use the hidden one. Here is an example:

[toc exclude="Titan, Superheavy, and Gargantuan Bases | Resin and 3D Printed Bases"]

<h3 class="hidden">Resin / 3D Bases</h3>
<h3>Resin and 3D Printed Bases</h3>

Some exclusions have difficultly working with dashes and other text. In that case, you can use an asterisk:

[toc label="Contents" heading_levels="2,3" exclude="*Tips To Potential Clients"]

Create side box

This will create a box on the side:

<div style="border: 1px solid grey; padding: 5px; float: right; width: 30%; text-align: center; font-size: .9em; margin: 5px;">
<strong>Warning About Magnets</strong><br />
Rare Earth magnets are very powerful and could be dangerous if not handled with proper care.<br />
If swallowed, any type of magnet can cause serious injury or death.<br />
Keep away from children and pets.<br />
See <a href="/about-us/legal/#Warning_About_Magnets">here</a> for a list of warnings.</div>
Warning About Magnets
Rare Earth magnets are very powerful and could be dangerous if not handled with proper care.
If swallowed, any type of magnet can cause serious injury or death.
Keep away from children and pets.
See <a href="/about-us/legal/#Warning_About_Magnets">here</a> for a list of warnings.