CSS Styles - Revision history

Beard: /* Collapsible Section */

2020-08-13T01:15:15Z

‎Collapsible Section

Beard: /* Collapsible Section */

2020-08-13T01:13:56Z

‎Collapsible Section

Beard at 22:46, 12 August 2020

2020-08-12T22:46:29Z

Beard: /* Apply CSS Based on Attribute */

2018-10-03T17:38:37Z

‎Apply CSS Based on Attribute

Beard: /* Apply CSS Based on Attribute */

2018-10-03T17:38:12Z

‎Apply CSS Based on Attribute

Beard: /* Apply CSS Based on Attribute */

2018-10-03T17:37:05Z

‎Apply CSS Based on Attribute

Beard: /* Apply CSS Based on Attribute */

2018-10-03T17:33:49Z

‎Apply CSS Based on Attribute

Beard at 17:30, 3 October 2018

2018-10-03T17:30:50Z

Beard at 18:49, 16 June 2016

2016-06-16T18:49:07Z

New page

== Absolute Center (via Flexbox) ==

<syntaxhighlight lang="css">
.absolute-center {

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;

}
</syntaxhighlight>

== Wrap Text in <pre> Tag ==

<syntaxhighlight lang="css">
/* wrap text in pre tag, good for mobile because pre won't extend beyond screen width */
pre.wrap {
white-space: pre-wrap; /* Since CSS 2.1 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
</syntaxhighlight>

@@ Line 162: / Line 162: @@
 	<a class="collapse-link" onclick="ToggleCollapsible(this, 'options')">More Options&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
 	<div id="options" class="collapsible">
-		<a href="#">Show Archived Items</a>
+		<ul>
 	</div>
 </body>
 </html>
 </source>

@@ Line 90: / Line 90: @@
+}
 .collapse-link {
-	display: block;
+	display: table;
 	color: #888;
 	text-decoration: none;
@@ Line 112: / Line 112: @@
 .collapse-link-expanded {
-	display: block;
+	display: table;
 	color: #888;
 	text-decoration: none;
@@ Line 161: / Line 161: @@
 <body>
 	<a class="collapse-link" onclick="ToggleCollapsible(this, 'options')">More Options&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
-	<div id="options" class="collapsible" runat="server">
+	<div id="options" class="collapsible">
 		<a href="#">Show Archived Items</a>
 	</div>

← Older revision		Revision as of 22:46, 12 August 2020
Line 70:		Line 70:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
		+
		+	== Collapsible Section ==
		+
		+	<source lang="css">
		+	<!DOCTYPE html>
		+	<html>
		+	<head>
		+	<title>TEST 2</title>
		+	<style>
		+	@font-face {
		+	font-family: 'Open Sans';
		+	font-style: normal;
		+	font-weight: 300;
		+	src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTegdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
		+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
		+	}
		+	body {
		+	font-family: "Open Sans";
		+	}
		+	.collapse-link {
		+	display: block;
		+	color: #888;
		+	text-decoration: none;
		+	margin-bottom: 10px;
		+	-webkit-touch-callout: none;
		+	-webkit-user-select: none;
		+	-khtml-user-select: none;
		+	-moz-user-select: none;
		+	-ms-user-select: none;
		+	user-select: none;
		+	}
		+	.collapse-link:hover {
		+	color: #000;
		+	text-decoration: none;
		+	cursor: pointer;
		+	}
		+	.collapse-link:after {
		+	content: '\00276f';
		+	display: inline-block;
		+	}
		+
		+	.collapse-link-expanded {
		+	display: block;
		+	color: #888;
		+	text-decoration: none;
		+	margin-bottom: 10px;
		+	-webkit-touch-callout: none;
		+	-webkit-user-select: none;
		+	-khtml-user-select: none;
		+	-moz-user-select: none;
		+	-ms-user-select: none;
		+	user-select: none;
		+	}
		+	.collapse-link-expanded:hover {
		+	color: #000;
		+	text-decoration: none;
		+	cursor: pointer;
		+	}
		+	.collapse-link-expanded:after {
		+	content: '\00276f';
		+	display: inline-block;
		+	transform: rotate(90deg);
		+	}
		+	.collapsible {
		+	display: none;
		+	}
		+	.collapsible-expanded {
		+	display: block;
		+	padding: 0px 20px 30px 20px;
		+	}
		+	</style>
		+	<script>
		+	function ToggleCollapsible(link, boxId) {
		+	box = document.getElementById(boxId);
		+	if (link.className == "collapse-link") {
		+	link.className = "collapse-link-expanded";
		+	}
		+	else {
		+	link.className = "collapse-link";
		+	}
		+	if (box.className == "collapsible") {
		+	box.className = "collapsible-expanded";
		+	}
		+	else {
		+	box.className = "collapsible";
		+	}
		+	}
		+	</script>
		+	</head>
		+	<body>
		+	<a class="collapse-link" onclick="ToggleCollapsible(this, 'options')">More Options      </a>
		+	<div id="options" class="collapsible" runat="server">
		+	<a href="#">Show Archived Items</a>
		+	</div>
		+	</body>
		+	</html>
		+	</source>

@@ Line 2: / Line 2: @@
 == Apply CSS Based on Attribute ==
-This just seems like less typing to me. Why type out <b>class="something"</b>, especially in a wiki where you have to type it all the time if you use custom CSS classes.
+This just seems like less typing to me. Why type out <b>class="something"</b>? Especially in a wiki where you have to type it all the time.
 CSS:

@@ Line 2: / Line 2: @@
 == Apply CSS Based on Attribute ==
-This just seems like less typing to me. Why type out <b>class="something"</b>, especially in a wiki where you have to type it all the time.
+This just seems like less typing to me. Why type out <b>class="something"</b>, especially in a wiki where you have to type it all the time if you use custom CSS classes.
 CSS:

@@ Line 25: / Line 25: @@
 RESULT:
-<div class="out">
+<div class="box">
 <span style="color:red;">This should be red.</span><br/>
 <span style="color:blue;">This should be blue.</span>

← Older revision		Revision as of 17:30, 3 October 2018
Line 1:		Line 1:
		+
		+	== Apply CSS Based on Attribute ==
		+
		+	This just seems like less typing to me.
		+
		+	CSS:
		+	<source lang="css">
		+	div[red] {
		+	color: red;
		+	}
		+	div[blue] {
		+	color: blue;
		+	}
		+	</source>
		+
		+	HTML:
		+	<source lang="html">
		+	<div red>
		+	This should be red.
		+	</div>
		+	<div blue>
		+	This should be blue.
		+	</div>
		+	</source>
		+
		+	RESULT:
		+	<div class="out">
		+	<span style="color:red;">This should be red.</span><br/>
		+	<span style="color:blue;">This should be blue.</span>
		+	</div>
		+

	== Absolute Center (via Flexbox) ==		== Absolute Center (via Flexbox) ==