When I recently updated WordPress, I noticed that my Enlighter.js line hover color changed back to default yellow from the color I had changed it to originally. For example: Since I had to look up how to change this color back to blue, I decided I would create a post here about how to do … Continue reading WordPress: How to change the Enlighter.js line highlight color
CSS
HTML & CSS: How to skew an HTML entity
Looking through the available HTML entities, I found a flattened DOWN arrow that uses the code ▾ For example: ▾ However, I could not find a similar flattened UP arrow amongst the defined HTML entities, so I found this CSS technique that will turn a regular unflattened UP arrow ▴ ▴ into a flattened UP … Continue reading HTML & CSS: How to skew an HTML entity
HTML & CSS: Four different ways to expand a div to 100% width using Grid
Let’s say we set up a basic web page layout that has 5 sections: Title, Header, Sidebar, Content, and Footer. This can be easily laid out using Grid, where we have an overall container that has five child divs. For example: The HTML looks like this: Note that each div in the grid has … Continue reading HTML & CSS: Four different ways to expand a div to 100% width using Grid
HTML & CSS: How to use column-count to automatically divide text into columns
Let’s say I have a project where I want to print all numbers from 1 to 100 in a web page. For this example, I am using the the ZeroCool problem where I print “Zero” for all multiples of 3, “Cool” for all multiples of 5, and “ZeroCool” for all numbers that are a multiple … Continue reading HTML & CSS: How to use column-count to automatically divide text into columns
HTML & CSS: How to control uneven columns with Flexbox align-self
Building on the Flexbox foundation described in this previous article: HTML & CSS: How to understand the basics of Flexbox for responsive web design I am now going to describe how to control columns that may have varying amounts of data in them. Flexbox has an attribute for the child element called “align-self” which can … Continue reading HTML & CSS: How to control uneven columns with Flexbox align-self
HTML & CSS: How to understand the basics of Flexbox for responsive web design
The CSS3 Flexbox Grid system is based on the idea of a parent/child container relationship. The parent, if we call it “row” needs to have “display: flex;”. For example: /* Parent */ .row { display: flex; } The child, if we give it a class name of “col”, should have “flex: 1;”. The 1 here … Continue reading HTML & CSS: How to understand the basics of Flexbox for responsive web design
jQuery: How to create a textarea character countdown for Twitter
Twitter has a 280 character limit for tweets. If you need to build an input form that will remotely post tweets to Twitter, you will need to make sure that the messages are not too long. In this article I will show how to build a textarea that has a text counter attached to it … Continue reading jQuery: How to create a textarea character countdown for Twitter
HTML: How to make a combo box using datalist
A combo box is a combination text box and select menu, rolled into one. It uses a little known HTML5 element called “datalist”, which is supported by all of the modern browsers, but was never supported by Safari or late versions of Internet Explorer. To set up an HTML5 combo box, start by creating a … Continue reading HTML: How to make a combo box using datalist
HTML & CSS: How to create a circular bio portrait between two divs
Let’s say you are creating a bio page and want to use a circular bio photo and place it between two divs with different color backgrounds on the page. For example: The technique to accomplish this is to use an outer div with a span and an inner div inside. The outer div is like … Continue reading HTML & CSS: How to create a circular bio portrait between two divs
JavaScript: How to create a looping tabindex cycle
Let’s say you have a modal with a form in it and you want to have tighter control over what happens when the user uses the Tab button on their keyboard. Without setting controls, it is possible for the user to tab through the text boxes in the modal and change the focus to other … Continue reading JavaScript: How to create a looping tabindex cycle