In one of my blogs I wanted to highlight my program code in a different way so that I can distinguish it from my regular comments / texts. Today I found a way to accomplish that using css. Blogger uses CSS extensively to style their blog templates. To see what I am talking about, see the below two examples.
1. CSS text highligting is not applied.
//SQADB512 DD DSN=SIMOTIME.DATA.SQADB512,DISP=(NEW,CATLG,DELETE),
// STORCLAS=MFI,
// SPACE=(TRK,5),
// DCB=(RECFM=FB,LRECL=512,BLKSIZE=5120,DSORG=PS)
2. CSS text highlighting is applied
//SQADB512 DD DSN=SIMOTIME.DATA.SQADB512,DISP=(NEW,CATLG,DELETE),
// STORCLAS=MFI,
// SPACE=(TRK,5),
// DCB=(RECFM=FB,LRECL=512,BLKSIZE=5120,DSORG=PS)
// STORCLAS=MFI,
// SPACE=(TRK,5),
// DCB=(RECFM=FB,LRECL=512,BLKSIZE=5120,DSORG=PS)
Now, I am a mainframe programmer and that should explain the black and green screen. For those who are not a big fan of black and green screens, Here is another way in which you can highlight your code, your quote or any text which you need to distinguish from the rest of the text.
<?php
// Print Environment Variables
echo "<b>Environment Variables from $HTTP_ENV_VARS</b><br><br>";
reset($HTTP_ENV_VARS);
while (list ($key, $val) = each ($HTTP_ENV_VARS)) {
print $key . " = " . $val . "<br>";
}
// Print GET Variables
echo "<br>";
echo "<b>GET Variables from $HTTP_GET_VARS</b><br><br>";
reset($HTTP_GET_VARS);
while (list ($key, $val) = each ($HTTP_GET_VARS)) {
print $key . " = " . $val . "<br>";
}
// Print POST Variables
echo "<br>";
echo "<b>POST Variables from $HTTP_POST_VARS</b><br><br>";
reset($HTTP_POST_VARS);
while (list ($key, $val) = each ($HTTP_POST_VARS)) {
print $key . " = " . $val . "<br>";
}
// Print COOKIE Variables
echo "<br>";
echo "<b>COOKIE Variables from $HTTP_COOKIE_VARS</b><br><br>";
reset($HTTP_COOKIE_VARS);
while (list ($key, $val) = each ($HTTP_COOKIE_VARS)) {
print $key . " = " . $val . "<br>";
}
// Print SESSION Variables
echo "<br>";
echo "<b>SESSION Variables from $HTTP_SESSION_VARS</b><br><br>";
reset($HTTP_SESSION_VARS);
while (list ($key, $val) = each ($HTTP_SESSION_VARS)) {
print $key . " = " . $val . "<br>";
}
?>
Call the file with the following at any point in your page where you would like the variables output.
<?php
require("variables.inc");
?>
// Print Environment Variables
echo "<b>Environment Variables from $HTTP_ENV_VARS</b><br><br>";
reset($HTTP_ENV_VARS);
while (list ($key, $val) = each ($HTTP_ENV_VARS)) {
print $key . " = " . $val . "<br>";
}
// Print GET Variables
echo "<br>";
echo "<b>GET Variables from $HTTP_GET_VARS</b><br><br>";
reset($HTTP_GET_VARS);
while (list ($key, $val) = each ($HTTP_GET_VARS)) {
print $key . " = " . $val . "<br>";
}
// Print POST Variables
echo "<br>";
echo "<b>POST Variables from $HTTP_POST_VARS</b><br><br>";
reset($HTTP_POST_VARS);
while (list ($key, $val) = each ($HTTP_POST_VARS)) {
print $key . " = " . $val . "<br>";
}
// Print COOKIE Variables
echo "<br>";
echo "<b>COOKIE Variables from $HTTP_COOKIE_VARS</b><br><br>";
reset($HTTP_COOKIE_VARS);
while (list ($key, $val) = each ($HTTP_COOKIE_VARS)) {
print $key . " = " . $val . "<br>";
}
// Print SESSION Variables
echo "<br>";
echo "<b>SESSION Variables from $HTTP_SESSION_VARS</b><br><br>";
reset($HTTP_SESSION_VARS);
while (list ($key, $val) = each ($HTTP_SESSION_VARS)) {
print $key . " = " . $val . "<br>";
}
?>
Call the file with the following at any point in your page where you would like the variables output.
<?php
require("variables.inc");
?>
By the way if you are wondering what the above PHP code does, it is for displaying the environment variables.
Now for the CSS which I used to do this change. Simply go to blogger dashboard, Design, Edit HTML and search for the area where they keep the CSS. (It will look something like the code which you are going to copy). Once you located it, just copy paste the below CSS to add to the list and you are all set.
.code {
font-family: Courier, 'Courier New', sans-serif; font-size: 11px; color: #00FF00;
background-color: #000000; border: #D1D7DC; border-style: solid;
border-left-width: 2px; border-top-width: 1px; border-right-width: 2px; border-bottom-width: 1px
}
.quote {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #444444; line-height: 125%;
background-color: #FAFAFA; border: #D1D7DC; border-style: solid;
border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}
font-family: Courier, 'Courier New', sans-serif; font-size: 11px; color: #00FF00;
background-color: #000000; border: #D1D7DC; border-style: solid;
border-left-width: 2px; border-top-width: 1px; border-right-width: 2px; border-bottom-width: 1px
}
.quote {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #444444; line-height: 125%;
background-color: #FAFAFA; border: #D1D7DC; border-style: solid;
border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}
The .code will give you the black and green attribute to your code and the .quote will give you the attribute which is displayed above. When you need to apply one of these attributes, you just need to enclose it in a set of div tags with the right class parameter(Make sure you are in Edit HTML and not in Compose mode). For example <div class="code"> Test code</div>
I gather that I am just seeing the tip of the iceberg here and there are tons of things we can do with this. Do share anything which you fond interesting using CSS
