Coding Resources

 


Stack

WordPress on Stack

WordPress forum

WordPress theme handbook

Codepen

Html.am

Validate for errors


Multiple browsers test (small)

Multiple browsers test (large)


Good html color picker

Get color from image

Html codes for quotations and other symbols

Hyperlinks

Date / time in php

Positioning (relative, absolute)

Force a favicon refresh

CSS popups

CSS accordions

CSS show/hides

CSS hidden nav menu

CSS responsive menu

CSS outline fonts 2

CSS overlay images

CSS opacity

CSS transparent hover (sticky) header

CSS full background image

JQuery multi-level slide accordion

Tables

CSS lazy loaded images and 

Defer on “Feed the Bot”

Breadcrumb triangles

!important

Z-index

Border radius

Expand a div to take the remaining width

CSS scrolling text

CSS templates

CSS stretch fonts

CSS thicker fonts / text-shadow

Height:auto (needs overflow:hidden)

Clear div with overflow:auto

Centering things

CSS drop down menu

CSS crop an image in the center (demo)

CSS pop-hovers

CSS hover popups and tooltips

CSS text shadows

RGB / RBGA calculator

Draw complex objects with CSS

Pixel art to CSS

Style internal links

Style links depending on destination

Apply styles to just single, archive, page, home

Adding Disqus comments with functions and a shortcode

Simple CSS accordion

Making RSS mix feeds: How to from YouTube RSSMix RSSFeedWidget

Facebook comments: use plugin, grab app code from Facebook developers app (not sure if necessary), uncheck “every page” add the php, remove the website from within the double-quotation marks but leave the double-quotation marks


Javascript beautifier

Javascript weather


Tweet button

Twitter follow button

How to Create an Advanced Twitter Widget

Display Recent Tweets in WordPress with Twitter Widgets

Twitter timeline embed widget

Embedded tweets CSS

Jason Mayes’ Twitter-Post-Fetcher

Nerijusgood’s Twitter custom widgets

Embedded tweet box (basic)

Facebook page plugin


WordPress load order

Display Most Popular Posts by Views in WordPress without a Plugin


Stupid WordPress Tricks

CSS tutorials

Color Blindness

Relative Luminosity


Android app tutorial: YouTube playlist: TheNewBoston


Quick reference

Colors:

Transparent: #00ffffff (ie add two zeros to the 6-digit color code)

CSS backgrounds:

background-image: url(“images/starsolid.gif”);
External CSS backgrounds:

background: url(“http://example.com/background.jpg”);

CSS content (about)

content: “!”;

.csstarget:after {content: url(http://domain.com/permalink.png)}

CSS opacity:

Opacity has a default initial value of 1 (100% opaque). opacity: 0.2 is more transparent than 0.9.

Important:

color: red !important;

Commenting

<!- – This is an html comment – ->

// This is a one-line CSS comment

/*
This is a multi-line CSS comment
*/

// This is a one-line php comment

/*
This is a multi-line php comment
*/

@media

@media screen and (min-width: 480px)

!important

color: red !important;

Box shadow

box-shadow: 10px 10px 5px #888888;

Circle border radius

border-radius: 50%; (use not-percentages for Safari <5.1)

Font-weight

font-weight: 900;

Target

<a href=“http://thespeaker.co/coding-resources/” target=“_blank”>Visible text</a>

Internal link styles

a.internal{}


Debug ghost CSS (source)

* {
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}

Prevent website content being shared to Pinterest (source):

In head: <meta name=”pinterest” content=”nopin” />
Or, to customize: <meta name = “pinterest” content = “nopin” description = “Sorry, you can’t save from my website!” />

https://www.youtube.com/feeds/videos.xml?channel_id=CHANNELIDhttps://www.youtube.com/feeds/videos.xml?user=USERNAMEhttps://www.youtube.com/feeds/videos.xml?playlist_id=YOUR_YOUTUBE_PLAYLIST_NUMBER

 


ie problems? Check …

  • seems to be OK with absolute, but doesn’t do well with fixed

Theme by Anders Norén