Blog ~ Twenty Sixteen Theme Cascading Style Sheet [CSS], 03/12

This is it [for a while]…

2016-03-12_18-14-18 CSSThe additions today are for the CSS display container itself [the scroll box]. The greatest effort was to make lines wrap–“whitespace: normal;” There are two other properties that also make text wrap. At the end of the day, I still had to break the lines within the blog CSS container because of a line numbering problem.

The shortcode here assigns a line number for every line, where the blog skips line numbers on long lines that wrap. This resulted in lines without numbers at the bottom of the listing. I need each line to be referenced. So, the item I spent the most time on wasn’t needed after all. Oh well…

/** BLOG CSS MOD PAGE–BEGIN **/
table {
/* set font size for the REVISED Table, 03/12 */
font-size: 13px;
}

.syntaxhighlighter table td.code .line {
/* shift line numbers to the left, 03/12 */
padding: 0 .5em !important;
}

.syntaxhighlighter table td.gutter .line {
/* shift content to the left, 03/12 */
padding: 0 .4em 0 0 !important;
}

.syntaxhighlighter table {
/* make fonts slightly smaller, 03/12 */
font-size: 13px !important;
}

.syntaxhighlighter code {
/* force line wrap on long lines, 03/12 */
white-space: normal;
}

/** BLOG CSS MOD PAGE–END **/

See these modifications at the blog Custom Twenty Sixteen CSS Page.

Author: jalexartis

Avid cyclist, who loves photography, technology, blogging & cooking...

Your comments please...

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s