Category: Tips
Donkey Kong
DadHacker is the creator of the Atari game Donkey Kong. The game originated in 1981. Recently DadHacker wrote in his blog about his days at Atari and particularly about writing Donkey Kong. It's an incredible story.
Quotes around blockquote
The [block] button in the QuickTags toolbar generates a blockquote. It is fun to play with. Some very nice things can be done with the styling.
And so even though we face the difficulties of today and tomorrow, I still have a dream. It is a dream deeply rooted in the American dream.
I have a dream that one day this nation will rise up and live out the true meaning of its creed: "We hold these truths to be self-evident, that all men are created equal."
I have a dream that one day on the red hills of Georgia, the sons of former slaves and the sons of former slave owners will be able to sit down together at the table of brotherhood.
I have a dream that one day even the state of Mississippi, a state sweltering with the heat of injustice, sweltering with the heat of oppression, will be transformed into an oasis of freedom and justice.
I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by the content of their character.
I have a dream today!
I have a dream that one day, down in Alabama, with its vicious racists, with its governor having his lips dripping with the words of "interposition" and "nullification" -- one day right there in Alabama little black boys and black girls will be able to join hands with little white boys and white girls as sisters and brothers.
I have a dream today!
The styling is done in ../rsc/css/basic.css. Some skin styles will already have something different for the blockquotes. You will find it somewhere in the css file in the skin's directory. Replace what's in there for the blockquote with something similar to this:
blockquote {
text-indent: 25px;
background: url(http://www.blog.hemminga.net/rsc/img/quotes1.png);
background-position: 0 2px;
background-repeat: no-repeat;
}
blockquote p {
background-color: #eee;
display: inline;
margin: 0;
padding-right: 24px;
background: url(http://www.blog.hemminga.net/rsc/img/quotes2.png);
background-position: bottom right;
background-repeat: no-repeat;
}The images can be found here and here.
Have fun.
Conditional CSS through PHP
Wouldn't it be nice to be able to change the skin's appearance based on some condition. In this tip & trick I'm going to change the colour of this post to red at daytime and blue at night. Times are local CET (Europe).
The nice thing about PHP is that you can deploy it everywhere in the page. So why not within the CSS file.
First you want to point to this special file. Somewhere in the header (for B2evo that's ../blogs/skins/YOURSKIN/_html_header.inc.php) make this call:
Code:
<link rel="stylesheet" href="phpstyle.php" type="text/css" /> |
Every PHP statement must be within a PHP file. We create this phpstyle.php file and start it with:
Code:
<?php header("Content-type: text/css"); ?> |
That's about it. The file acts as any other CSS file, but since it's a PHP file we can interweave (we say 'lard' in Holland) with any thinkable condition. It's like serverside JavaScript.
On with the task I've set. Let's call the server time:
PHP:
$time_at_server = date(G); | |
$time_in_europe = $time_at_server + 9; |
Now the condition:
PHP:
if ($time_in_europe >= 6 && $time_in_europe < 18 ) | |
{ | |
// It's daytime | |
$sun_is_shining = 1; | |
} | |
else | |
{ | |
// it's night | |
$sun_is_shining = 0; | |
}; |
This is the complete phpstyle.php:
PHP:
<?php header("Content-type: text/css"); ?> | |
<?php | |
$time_at_server = date(G); | |
$time_in_europe = $time_at_server + 9; | |
// Found a bug. This is the fix: | |
if ( $time_in_europe > 23 ) | |
{ | |
$time_in_europe = $time_in_europe - 24; | |
} | |
if ( $time_in_europe >= 6 && $time_in_europe < 18 ) | |
{ | |
// It's daytime | |
$sun_is_shining = 1; | |
} | |
?> | |
| |
.day_or_night p { | |
<?php | |
if ( $sun_is_shining ) | |
{ | |
echo ( "color: red; \n" ); | |
} | |
else | |
{ | |
echo ( "color: blue; \n" ); | |
} | |
// output | |
/** | |
* .day_or_night p { | |
* color: red; | |
* } | |
* | |
*/ | |
?> | |
} |
I've started this post with <div class=" day_or_night"> and ended it with </div>.
That's it. I Hope you like it. Can you think of some other uses for this conditional css statements? Leave a comment if you do.
Have fun.
XML Feeds
