CSS: Using multiple selectors

I was fiddling around with a Windows 8 app today which I’m developing using HTML 5 and I was making some changes to the HTML structure. One of the things I was changing was that some parts of the content was supposed to be inactive at the opening of the app and later on activated. I wanted to display these things as inactive by changing their text color to gray.
To do this I gave them the class Inactive and set the color of the text in that class to gray using CSS. One problem though that some of inactive content was going to have one kind of gray and other inactive content was going to have another kind if gray but they were both using the class Inactive.
One thing I could do is to create two separate classes but I liked the name Inactive as it was descriptive and concise. What I actually wanted to do is to say all the elements with the class Inactive AND the class XXX. Luckily, this could be done. Look at the following example:

<!DOCTYPE html>
<html>
	<head>
		<title>CSS Test</title>
		<meta charset="UTF-8" />
		<style type="text/css">
			/* Will affect all elements with the class Inactive */
			.Inactive
			{
				color: LightSlateGray ;
			}
			
			/* Will affect all elements with the class Content AND Inactive */
			.Content.Inactive
			{
				color: DimGray;
			}
		</style>
	</head>
	<body>
		<div class="Content Inactive">
			<p>Some of my content</p>
		</div>
		<div class="Content Active">
			<p>Some of my content</p>
		</div>
		<div class="Stuff Inactive">
			<p>Some of my stuff</p>
		</div>
		<div class="Navigation">
			<ul>
				<li>Home</li>
				<li class="Inactive">Links</li>
				<li>Guestbook</li>
			</ul>
		</div>
	</body>
</html>

I want to inactive the stuff in the class Content but not in the class Stuff. But I can’t do “.Content .Inactive” because they are set to the same element. Luckily I could combine to two into “.Content.Inactive“. Notice that there is no space between the classes:

/* Will affect all elements with the class Inactive */
.Inactive
{
	color: LightSlateGray ;
}

/* Will affect all elements with the class Content AND Inactive */
.Content.Inactive
{
	color: DimGray;
}

This can be very handy. I don’t know why I haven’t seen it before. There is supposed to be compatibility issues with IE6 but it’s 2013 so either you don’t support IE6 anymore or, if you do, you will have learned how to handle IE6 specific issues already (the problem in IE6 with .Content.Inactive is that it will only read the first class, .Content, and skip the rest).

Adding a facebook comment and like button

Today I decided to add a comment area to one of my demo´s. I decided to use the facebook comment app as I really didn’t have time to write one my self. There are other benefits as well (spam being a major one) and I wanted a ‘like’-button anyway.
This wasn’t completely pain-free so I’ll just put up a shot “how-to”:

1. Create a facebook developer account

Go to http://developers.facebook.com/ and create a developer account. This requires you to have either a mobile phone or a credit card. Now, it’s not that I don’t trust facebook to have my credit card, but I don’t. So I used my cellphone.

 

2. Create a facebook application

When you’ve created an account, you’ll be transfered to the developers area. Once there, press the ‘+ Add New Application’-button to add your page. I’ve come up with an example page we’ll use that shows how to do this (oh the irony :)).

When you’ve pressed the button you’ll see something like this:

Fill in the form as I have (with your own name of course) and continue. You’ll be asked to handle an impossible captcha. If you can solve it, you’ll end up here:

At the end of the screen there’s a save button, so save your progress.

In the top menu select Documentation and then Core Concepts and lastly Social plugins:

 

Comments:

Scroll down and select the Comments (either in the page content or in the sidebar further down). In this page there is a form you can fill in to create code to paste in to your page. Fill in the form and press ‘Get Code’:

You’ll get your code:

 

Paste the first section of code right after your body-tag and the second section where ever you want it to show up.

 

Like-button

Go to the social plugins section again and select Like Button. Like with the comments plugin you’ll see a form in this page, fill it in like this: (some of the stuff turns up in swedish in my image because I’m swedish)

Press Get Code and you’ll get a similar window like in comments. Paste into your page according to the instructions and you’ll have a like button as well on your page. Style both comments and like-button to your liking and you’ve got yourself something like this:

http://demo.maffelu.net/web/facebook/comments/

Now, if you want to know how to control what image and text are shown in peoples facebook profile when they’ve liked your stuff, check out this entry for an explanation:
http://maffelu.net/select-image-and-text-for-facebook-like-button/

Select image and text for facebook like-button

I’ve just implemented a like-button on a page and I want to decide what should show up as text whenever a user ‘likes’ my page. Well, this isn’t completely obvious from the start and google wasn’t very helpful, so here goes.

When I first added a demo page and like it all I got in my account updates was this:

Doesn’t really look awesome. No image and a whole lot of no text. Well.

Luckely there is a developers debugging tool which is quite useful. It’s located here:

http://developers.facebook.com/tools/debug

If you go there you’ll get to enter the URL to your website there and test it:

 

Argh! That’s a whole lot of errors! Well, there are properties to be set in order to enjoy the full experiance and you have to set them in your head! Here are is the example properties I’ve set on the demo-page:

<meta property="og:title" content="Facebook Comments And Like-button Demo" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://demo.maffelu.net/web/facebook/comments/" />
<meta property="og:image" content="http://demo.maffelu.net/web/facebook/comments/DemoSquare.png" />
<meta property="og:site_name" content="Maffelu.net" />
<meta property="fb:admins" content="1219770633" />
<meta property="og:description" content="A demo on how to implement facebook comments and a like-button on your website!" />
<meta property="og:locale" content="en_US" />

Well, that’s it. The demo page is found here:
http://demo.maffelu.net/web/facebook/comments/

Good luck!

Mod rewrite for a mvc structur

Sometimes you want correct url’s (such as www.maffelu.net/articles instead of www.maffelu.net?typ=articles) for various reasons. It could be that you want a close relation with google, or that you want to make it easier for users to distribute links to your pages.
Whatever the reason you’ll have to search for quite some time to figure out how to make these url’s valid on your server and in the end some pretentious nerd will give you the address to apaches homepage followed by RTFM!!!
In the end you have to parse through the endless documentation and if you don’t have access to the server error-log, you’ll end up tearing your hair off your head when all you get is a unknown server error upon failure.

To make things simpler, I’ve created a very basic .htaccess file you could use for a simple MVC structure:

 

RewriteEngine on
RewriteBase /

RewriteCond %{REQUEST_URI} !\.(css|jpg|gif|png|js|ttf|htm)$ [NC]
RewriteRule ^([a-zA-Z0-9_-]+)/([a-zA-Z0-9_-]+)/(.*)$ index.php?controller=$1&action=$2&id=$3 
[QSA,L]

RewriteCond %{REQUEST_URI} !\.(css|jpg|gif|png|js|ttf|htm)$ [NC]
RewriteRule ^([a-zA-Z0-9_-]+)/(.*)$ index.php?controller=$1&action=$2 [QSA,L]

RewriteCond %{REQUEST_URI} !\.(css|jpg|gif|png|js|ttf|htm)$ [NC]
RewriteCond %{REQUEST_URI} !test.php$ [NC]
RewriteRule ^(.*)$ index.php [QSA,L]

 

This let’s you create the following url’s:
www.maffelu.net/controller/action/id/
www.maffelu.net/controller/action/
www.maffelu.net/test.php *
www.maffelu.net
*sometimes it can be nice to have a test page

This also tells the server to ignore the rules for files with the extensions css, jpg, gif etc that shouldn’t be handled.

Also, if you have a folder with web services which really shouldn’t be bothered with this, you can add an exception to an entire folder like this:

RewriteCond %{REQUEST_URI} !\.(css|jpg|gif|png|js|ttf|htm)$ [NC]
RewriteCond %{REQUEST_URI} !webservices/ [NC]		#Ignore web services
RewriteRule ^([a-zA-Z0-9_-]+)/(.*)$ index.php?controller=$1&action=$2 [QSA,L]