RFX Standards

This page serves to show and document the styles and function of this website that are not standard to the wordpress engine.

Standard Disclaimer

NOTE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus lacinia ultricies. Donec vitae finibus tellus, ut tristique dolor. Nam faucibus, quam at finibus dictum, erat dolor cursus risus, in aliquam augue ipsum a libero. Donec vel ligula in arcu aliquam porta. Nulla facilisi. Mauris ut enim vel felis lacinia pharetra. Vivamus viverra auctor urna, et volutpat nisi sagittis ut. Vivamus ac est metus.

CAUTION

Suspendisse lobortis finibus accumsan. Sed vitae ipsum non nunc dictum condimentum vitae non mauris. Nam gravida ante a posuere accumsan. Curabitur ac lacus nec risus tincidunt consequat. Suspendisse sed posuere nulla, a feugiat arcu. In porta tellus magna, a sagittis urna laoreet nec.

WARNING

Aenean a ornare odio. Praesent in nibh felis. In semper elementum dolor, vel pellentesque erat fringilla nec. Ut sollicitudin nec enim sed fringilla. Praesent scelerisque lacus nec tortor dapibus, quis commodo ex commodo. Sed ut consectetur odio. Sed venenatis odio nec laoreet feugiat.

CODE

let a = 0 // First Variable
let b = 0 // Second Variable
function add(v0, v1){
    return a+b
}
console.log(add(a,b))

CSS File

.warning:before
{
    font-family: "Material Icons";
    content: '\e002     ';
    color:black;
    font-size: large;
}

.caution:before
{
    font-family: "Material Icons";
    content: '\e99a     ';
    color:black;
    font-size: large;
}
.note:before
{
    font-family: "Material Icons";
    content: '\e3c9     ';
    color:black;
    font-size: large;
}
.note
{
	padding: 5px 10px 5px 10px !important;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	background-color: #f0f7fb;
	border: solid 1px #3498db;
	border-radius: 6px;
	line-height: 18px;
	overflow: hidden;
	display: block;
    color:black;
}

.caution
{
	padding: 5px 10px 5px 10px !important;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	background-color: #FFEEB9;
	border: solid 1px #D6A300;
	border-radius: 6px;
	line-height: 18px;
	overflow: hidden;
    color:black;
}
.warning
{
	padding: 5px 10px 5px 10px !important;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	background-color: #FFABAB;
	border: solid 1px #c0392b;
	border-radius: 6px;
	line-height: 18px;
	overflow: hidden;
    color:black;
}
rfx-disclaimer #outerDiv{
	padding: 5px 10px 5px 10px !important;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;		
	background-color: #eeeeee; 
	border: solid 1px #cccccc;
	border-radius: 6px;
	line-height: 18px;		
	overflow: hidden;
}
rfx-disclaimer #header{
	display: inline-block; 
	margin:0px;
}
rfx-disclaimer #subHeader{
	padding-left:10px;
	display: inline-block; 
	margin:0px
}
rfx-disclaimer #mainText{
	padding: 5px 10px 5px 10px !important;
	display: inline-block; 
	margin:0px
}

Javascript (template)

class rfxDisclaimer extends HTMLElement{
	constructor() {
        super();
        this.innerHTML =  `
		<div id="outerDiv">
			<h4 id="header">
				<span style="font-family: Material Icons">loyalty</span> 
				Disclaimers  
			</h4>
			<p id="subHeader">
				(Legal stuff on how I fund my site):
			</p>
		<p id="mainText">I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon Products. This is at no cost to you and as an Amazon Associate I earn from qualifying purchases that you make through links that I provide. These are my own experiences and yours will differ, to assume otherwise would be ill fated. The opinions contained here are also my own and should not be associated with any group or organization I may also be a member of. Finally, if you follow any of my suggestions, techniques, files or recommendations, do so at your own risk, act like and take responsibility as an adult.</p>
		</div>
		`
    }
}
customElements.define('rfx-disclaimer', rfxDisclaimer);

Syntax Highlighting

Place the following as a Footer Script

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/stackoverflow-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

Material Icons

Place in Header Script

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">