flisterz:blog » css

How-to: Bypass Flickr’s spaceball.gif

flisterz — Thu, 24 Dec 2009 13:38:05 +0000

Sometimes, when you found some cool pictures on Flickr, that you like to save for your personal collection of inspiration, you’d probably encounter the spaceball.gif protection. A faster way to check whether the photo has this spaceball.gif protection is by looking at the buttons above the photo – if there is no “All Sizes” button, it is definitely protected. Tradiotional way to go around this problem is to use the screenshot tool.

Now, how can you bypass this protection?

Let’s find a random photo on Flickr. Here is one, a photo of skater by a Flickr user lomoD.xx

On that page, you can try to save the image, and you’ll notice that the save dialog box will prompt you to save a file named “spaceball.gif”.

Important note: It is the owner’s right to protect their artworks from irresponsible people who likes to steal other people’s content. This guide is just to help you to save the image for your personal collection, or if you’d like to publish it somewhere, it is your responsibility to link it back to the original source.

Use Firebug

Yes, that’s the only tool we need (other than Firefox web browser, for sure). If you’re not familiar with Firebug, I did cover some guides on my previous tutorial. Fire up Firebug, and use the inspect element and click onto the photo. You’ll (hopefully) see something like this:

Noticed the file spaceball.gif in the highlighted text on the left column in Firebug? Good. This .GIF file is overlaid onto the real photo that you’re seeing. So we need to get rid of it. The best way to do it is by modifying the inlined CSS. On the right column of Firebug panel is where you should modify the CSS. Initially, the CSS of the spaceball.gif is :

element.style {
   display:block;
   left:0;
   position:absolute;
   top:0;
}

All we have to do is to change the display:block to display:none as shown below.

Once you’ve performed this step, you can save the image, without having to deal with the spaceball.gif anymore. Note that this tricks will not allow you to get any other sizes of the photo other than the one you’re seeing on that page.

Use it wisely, people!

Fun with PHP: Randomness

flisterz — Sat, 18 Apr 2009 05:26:24 +0000

I have been thinking to write some basic stuff with PHP. Although I learned quite a lot already, but writing a PHP tutorial is not as easy as CSS, because I might be wrong, since in PHP, we need to consider some parameters as the speed, security and stuff – and I don’t know that much.

So here is the start of my Fun with PHP series (hopefully).

Random image

In this tutorial, I’ll show you how to get images from a directory, and display them on the screen, one by one, randomly, everytime you refresh the page. Yeah, not a difficult thing.

We start by preparing some images. Here, I am using 12 images from my previous Kreativuse posts (just because all of them have been set to 450px and 200px). Then, make sure you rename each file in numbers, starting from 1.jpg to 12.jpg. Put everything in a folder, named img

Then, we should create the index.php file. In this file, we will generate a random number between 1 to 12, and put it in the that will handle the image display. Here is the full code structure.




 Hey look! 







	Hey Look!
	.jpg" />
	Refresh the page

Explanation. On line 9, there is a simple PHP line that says . That means, we are generating a random number from 1 to 12 and apply it to parameter x. Read more about the rand() function.

On line 13, we are using the value of that x parameter, and put it in the line. So, if the value of x now is ‘6′, the 13th line will be executed as

… and the picture named 13.jpg will be displayed on screen! Easy.

We’ll now add some CSS to the page with a new file style.css. You can use whatever style you want – this is just an example:

body{
	background: #333;
	font-family: Helvetica;
	font-size: 12px;
	line-height: 18px;
	color: #ccc;
	}
h1{
	font-size: 70px;
	color: #fff;
	letter-spacing: -1px;
	}
#box{
	width: 470px;
	margin: 60px auto 0;
	padding: 0 auto;
	text-align: center;
	}
	#box img{
		border: 5px solid #ccc;
		padding: 4px;
		}

View the live demo here. Refresh the page several times to see the result.

Random quote

Well, sometimes you can see some random quotes on some websites, with a new one appear everytime you refresh the page. Here is one simple (and manual) way to do it.

You can add the following PHP code in the previous index.php file

The array() line can be written in one single line, but for the sake of readability, better to use multiple lines. Now we have six different phrase in the array called $text. Make sure to put comma (,) at the end of each phrase if you want to add some more into the array. The $i parameter, is used to get a random value from 0 to 5 (total of 6) – this will be used as our array index number.

Then, add the following in the index.php file, perhaps below the title.

We are displaying one of the phrase in the array. If, let say, the value of $i now is 3, so we are display value in $text[3] which is “Yeah yeah yeah!”. (Remember: an array index number starts with 0).

View the live demo and refresh the page.

The end.

Think of what you can do with this. You can have a random website header on your blog if you used the random image technique. Just modify the code a bit.

You can also have random advertisement displayed on the sidebar with the combination of random image and random quote technique. Can you think of it? Think harder.

How to teach yourself CSS and the web stuff

flisterz — Sat, 04 Apr 2009 08:00:10 +0000

I received a lot of questions from people, how do I learn to build websites? Do I take any classes? Do I read books? Or do I have any kind of mentor? I don’t really have any fix answer to that question. Considering myself not that expert in this web thingy, I would normally say that I just learn it by looking at other people’s website and go through as much tutorials as I can.

It is good to know that today’s kids can learn very fast in anything there are interested in. In becoming a website dude, there are several type of people I’ve found:

Those who really are interested in web design and development.
Those who just want to try something new just for the fun of it
Those who want to make quick money by declaring themselves as freelance web designer.
Those who just want to quickly a create website so they can place advertisements everywhere.

Haha.

When you have the passion to learn something, you would do anything in order to tackle it. No, keep bugging other people for every single details is not considered. That means, you don’t go and ask people without even trying. And you don’t ask them how to do it – you asked them to give you some directions and hints. Trust me, the learning is actually the fun part.

Lets go to a step-by-step process that you can try.

Step 0: Know what to expect.

You should prepare yourself to undergo some geeky coding experience. Well, some people don’t expect that because they thought website is just visuals, graphics and texts with some click thing. Designing a website in a graphic software is one thing, and coding is another thing. Plus, it is not something you can learn in just few days. It takes time for you to develop the skills.

Step 1: Get the free stuff

Personally, I think it is best to learn from the existing stuff. Download some examples of CSS and XHTML templates – something like this and this; or if you prefer WordPress themes, you can have it here. Don’t be ashamed to try on a simpler layout if you don’t understand most part of the coding on a complex layout. And you don’t want to waste too much time just to choose the template.

Step 2: Explore and Discover

From the example layouts, you need to go through each files and try to understand each lines of it. As for understanding, there are a lot of resources available as references. Here are some:

This is the most important (and longest) part of all. How much you understand the code structure will determine how well you’ll be performing in the later stages. Try to modify the source code. For this, you can either use the ordinary Notepad or Textmate, or you can choose from many source code editors. It is highly recommended that you use Firebug throughout this process too. You can read my Firebug-related tutorial to learn more.

Be very ambitious – try to look at as many CSS tutorials as possible. The floats, the positions and everything.

Step 3: Self-evaluation

Once you are familiar with the structure of the webste, from the to to down until the end of and everything in between, you should force yourself into a self-evaluation process. Ditch all the free layouts you downloaded earlier, and start from a blank file.

Create your first page, link to your stylesheet; add the headers, footers and all. Make it fun – put some colors and images. Style the headings, the hyperlinks, hover effect, and those cool stuff.

When everything looks great on the browser, spend some time to stand up, run and shout around the room for few seconds to celebrate your victory. Haha

Step 4: Meet the standard

Once you are familiar with the syntax and everything, you might want to move one step ahead by validating you works to meet the web standards. What are web standards? Read about it here.

Designing with web standards by Jeffrey Zeldman; an old book, but that doesn’t mean you can’t read it anymore. It was actually the book that gave me the courage to validate my website for the first time. (It is not valid now, due to unsupported opacity effect in CSS 2.0).

It is a good practice though.

Step 5: Learn more

The things you’ve learn in the early stages may not be enough for a much complex layout. Keep learning new things and tricks. Some useful links: 53 CSS-Techniques You Couldn’t Live Without and Most Used CSS Tricks

DONE.

No, it’s not done. Never will. Repeat Step 5.

For me, its like using Linux – if you are a lazy ass person, don’t bother to install one in your system – or you’ll ended up as that annoying dude, to keep coming to one person for his/her help to do almost everything for you. It is all about commitment, right?

Have fun learning.

How to modify a WordPress theme/css (for beginners)

flisterz — Wed, 24 Dec 2008 07:03:13 +0000

For some new users out there who are still clueless on how to modify your theme to your liking, this post is definitely for you. I’m focusing here on WordPress (not Wordpress.com) users, but if you’re not one of them, you still can follow on, as long as you have access to your CSS file.

First step: The tools

For this tutorial, you’ll need to have some stuff. The main tools is the most awesome Firefox plugin ever, Firebug. That means you have to use Firefox browser (you know, the most awesome browser out there?). Download the plugin, and install it right away. You won’t regret it. ~~You can even use it to download free mp3s! (not covered)~~. You also need a text editor for CSS editing. Notepad would be enough if you don’t have any other advanced options.

As an alternative, you can also edit edit your CSS directly from the WordPress dasboard. Go to ‘Appearance > Theme Editor’ for the new WordPress 2.7 users and ‘Design (or Presentation) > Theme Editor’ for old-school users. Make sure you have the “Update File” button at the bottom of the page. If no, you’ll need to CHMOD your file through FTP. Let Syuxx teach you how to do that.

Second Step: Learn to use Firebug

Now you’re ready to use Firebug. Lets learn some basic stuff. Go to the page you want to edit, right-click and click Inspect Element. Or simple click that cute bug icon at the bottom right of your browser.

Then you’ll get this thing on the bottom part of your browser.

Click on the Inspect button on the top left side of the panel, then move your cursor around the page. Click on any of the element on the page to see their CSS properties on the right side of the Firebug panel.

Go on, click on those values, and play around with it. You’ll see live changes on the website. Cool huh? Note that anything you changed here is just a preview, it will not affect your theme at all. So don’t be afraid to change anything.

You can also disable certain properties: click on the left side of the property. To add a new one, click on the last line, and press Enter/Return. Simple!

Third step: Modify your CSS

Now you’re ready to start to get geekier. Decide what you are going to change in your theme. Do the same thing you did in the second step.

Maybe you can use some common sense if you have no idea what those CSS properties mean. Margin? Padding? Float? What are those? Well, if you really want to know those, you’ll need to look for some CSS basic introduction. Maybe w3schools can help you with that. Other than that: height, width, color and font sound easier, right? What are those #333333, #F3F3F3 thing? Those are Hex color code. For your color. Here is a source for Hex color code to help you.

*****
For an extra example, if you wantws to change a header image, the code probably look something like this.

#header{
background: #ffffff url(images/header.jpg) no-repeat top left;
width:960px;
height 50px;
}

To use another image for your header, just change the part inside the url(…) with the location of your new images. Adjust the height and width accordingly.
*****
Now that you got the right idea what to change and what to add/edit to your CSS file, open your style.css file from your theme folder.You need to locate where you need to add/edit the properties you experiment with Firebug just now.

From this example, you’ll need to locate #navigation in the style.css file, on line 75. Use the Find function in you text editor to find it (or you can just scroll down manually if you have sharp eyes).

If you’re using Theme Editor in the WordPress dashboard, you need to find it manually though.

Change the values in the style.css, save it and upload it to your hosting.

And you’re done!

Extra tips.

It is recommended that you modify your theme locally, off the internet. Meaning, you modify your theme completely in you computer before you upload the entire theme into your host. Save much time rather than to rely on those sucky internet connection. Learn how to install Wordpress locally: Windows and Mac

CSS: Relative and absolute positioning

flisterz — Tue, 16 Dec 2008 19:47:33 +0000

I love how cool it is to use relative and absolute positioning in my CSS. When I first knew about this position thing, I was clueless, and was just keep using it randomly.

Since I haven’t been writing any tutorials lately, let me just explain some basic stuff about these two CSS positioning properties and how to use both of them together.

Example

Let say you want to have a small box with some text in it, floating on top of another bigger box with a background image in it. Here is a graphical view of it

Lets do this step by step. First, we prepare the bigger box with the background picture. Name it Boxer.

#boxer{
	width: 500px;
	height: 200px;
	margin: 100px auto;
	background: url(lomowalls.gif);
	font-size: 11px;
	font-family: Verdana;
	position: relative; /*important part*/
	}

Next, lets create a small yellow box, floating on top right side of Boxer. Name it smallbox.

.smallbox{
	background: yellow;
	width: 150px;
	height: 50px;
	position: absolute;  /*important part*/
	top: 10px;
	right: 30px;
	}

Then, write a simple HTML file.


	
		This is a small box

Make sure the smallbox is inside the Boxer.

As you can see in the picture, the small yellow box is positioned “absolutely” , “relative” to the Boxer, with 10pixels from the top and 30pixels from the right. Does that make sense?

For learning purposes, take out the position:absolute property, and you’ll see the smallbox will be at the same position of the blue box in the picture.

Also, lets modify the HTML by placing the smallbox class outside of the Boxer. You’ll get a result similar to that red box. Why is that? Because, now, the smallbox is positioned “absolutely“, “relative” to your browser, not to the Boxer anymore. Notice the 10pixels and 30pixels gap on top and right side of the browser, respectively. It will also move if you re-size your browser.

→ Download the source code to try it yourself

CSS Tips

When experimenting with CSS, it is good to learn using trial-and-error method. Firebug is a great tool to assist you for this method. Use boxes with different colours to arrange your basic layout so you can distinguish each sections and approximate the placement later.

Hide Nuffnang & Advertlets logo from your ads

flisterz — Thu, 01 May 2008 16:05:12 +0000

What’s up with hiding the logo from your ads? Syuxx wrote a nice tip on how to use CSS to hide Nuffnang logo from the ad – followed up by NoktahHitam.

Actually I discovered a method few months ago while working on my theme. But I was afraid to share it with everyone in this blog because I thought it is against their TOS. However I did use it for few days before I remove it. I was afraid they will ban me completely rather than fixing the problem – and that will involve me losing my money. hahaBut now maybe I decided to join the bandwagon and reveal another method that you can use to hide the logo from Nuffnang and also Adverlets ads. Compared to Syuxx’s method, I am not using the IDs or table name contains in Nuffnang code (this way, those guys can easily change the ID/table name, and it will no longer works). Instead, I created my own.

Wrapped your ad code inside a class name, for example .adbox



Nuffnang or Adverlets codes goes here

Why use class, not ID? Because xhtml-wise, you are allowed to use the same class name several times on the same page. So you can use this for all you ads unit, from both companies.

Now the CSS part.

.adbox img{display:none;}

The Nuffnang and Adverlets logo are images. So this CSS code basically hide that image from our view.

Warning : I won’t be responsible for any consequences you’ll get if you use this method. Maybe you want to read the email sent by Timothy Tiah to Syuxx regarding this thing. haha

Have you read about Advertlets’ text link ads? oh its ugly. Remove the shadow boxy thing man. urgh. Coming soon – more and more Malaysian blogs will be cramped with ugly ads.

Coolness roundup #6: Grid-based & CSS

flisterz — Mon, 31 Mar 2008 18:38:08 +0000

It’s 1st of April – welcome to the 4th month of the year. (what a lame welcoming line -_-). Lets stick to the title and continue with some cool stuff that I want to share this time.

Grid-based Design

I finally realized that I am such a big fan of grid-based design after looking at a collection of grid and columns designs. They are clean, simple and looks kinda cool. Learn more about grid-based design, or maybe you want to head back to 2005 to read this old but great article – Thinking Outside the Gri d. Browse through more grid-based example at Design By Grid. Also, try the latest grid system known as 960.gs.

CSS fans

Have you ever use any CSS framework in any of your project? Or do you have your own framework? I have none. I keep on doing the same thing again and again on each project. What a waste of time, right. Maybe I should conside using one of these Top 12 CSS frameworks later on or try to create my own.

I have been seeing a few CSS line tips for the past few days. I wrote one before this. Some of them are redundant but it worth checking out. Here are some of them : 8 Premium One Line CSS Tips, 6 most important CSS techniques and Most used CSS trick. If you have lots of time to spare, check out 101 CSS techniques of all time

Sometimes when we are working on a website, if the content is too short, the footer will move upward – not staying down there where it is suppose to stay. I have this problem all the time. Here is a technique to make your footer stay where it suppose to stay.

..and one more thing

I think this is something ‘funny’. I wrote a review about my ipod touch few months back, entitled “My iPod Touch; the Review”.Maybe you want to read it here first, then head up to this entry here

http://voltastreet.com/2008/03/25/my-ipod-touch-the-review/

and do some comparison. haha this is funny. (p/s: you may want to compare our “About” page also)

Road to f:b 5.0 – part II

flisterz — Fri, 04 Jan 2008 14:24:22 +0000

Following the first part of the post, here is the second post for me to share more stuff regarding my upcoming theme for flisterz:blog.

Comment section

Besides the frontpage, the second most important part of a Wordpress theme, in my personal opinion, is the comment section. How the comment is arranged, where to put the Gravatar, how to align the forms and so on. I dont have any sketch or draft for this section; so everything is done while coding. If i like the look; then I proceed; else I’ll just re-code the whole thing.

My first idea was to put the comment form on one side, and the list of comments on the other side. I used to do this in my third version. I still remember ikram-zidane said that the comment list and comment form should be on the same side. The final idea for the form is to mix both idea; and it turn out pretty good so far.

Another idea is to get rid of the form labels; those with ‘name’, ‘email’, ‘website’ and so on ; and put some nice little icon to act as the label.

This is nothing new; I’ve seen this in some other websites before. However the concern is; what happen if my blog is viewed with a non standard compliant browsers or mobile devices that doesn’t support CSS very well. The icon will not appear and theres no labels on the forms. Visitors will get confused; what should be filled inside this form and that form and so on.

I believe this is called user ~~accessibility~~ usability. Correct me if I’m wrong.

The solution I’m using is simple. Instead of directly remove the labels from the code, I’ll just apply a simple CSS to hide it from normal view.

#commentform label{ display:none; }

So when viewed from a mobile devices or any old browsers; the label will appear to guide the visitorsl.

I am trying to give a very huge attention about user accessibility/usability especially in this upcoming theme. When to use image replacement technique and when not to use it; the importance of

Currently listening/reading on Wordpress

flisterz — Fri, 07 Dec 2007 15:16:10 +0000

If you notice, I have a Current Music section on my sidebar – showing the album artwork of my latest tunes I have been listening to. You can create that too – ‘Currently Listening’ for music or ‘Currently Reading’ for books or ‘Currently Playing’ for game or anything you can think of. And all of them have one thing in common – showing a small picture – no long text – just picture/thumbnail.

How to do this?

First off, this method does not use any extra plugins – only a common Wordpress features. Yes, it is common – but you might have not think of this before ( ..like myself before I figure this out). This method utilize Wordpress Blogroll function.
However, the template tag that we are going to use, get_links, is already deprecated from the latest version of Wordpress. But, I tested it and yeah, so far its working fine.

Create your blogroll category and one link

Log in to your dashboard and create a new Blogroll category. I dont think theres any ‘New category’ link somewhere, right? So we need to create it while adding a link. Choose Add Link to start.

[A] This is where the user will be directed to when they click the image.
[B] Description will appear as a tooltip when user hover on the image. It can be set to appear somewhere around the image but its not in our discussion here.
[C] The location of you image. Remember, hotlinking image from other websites is very very unethical. Upload them into you server or use free image hosting services
[D] This is an important step. On the first link addition, you might need to create a new category. So create one that is relevant.

Now go back to the Blogroll manager, and click the name of the category you created just now. What you need is to get the ID of the category. Look in your address bar.

http://www.yoursite.com/blog/wp-admin/link-manager.php?cat_id=8

As you can see, the ID is ‘8′. We will use this in the code in the next step.

Continue with the codes

You need to add some codes in you layout (or widget) to accomplish this. For example, open you sidebar.php and place this code anywhere you want it to appear.



Currently Listening




', '', '', 'TRUE', '_id','','',6); ?>

What does it means? Lets break the paramaters apart

‘8‘ is your category ID just now.
and
TRUE is a parameter for image, say “YES I want the image to appear. True!”
‘_id‘ is the parameter for ‘order’ – meaning our images will be sorted up according to their ID. The underscore (_) sign is to reverse the order because we want the latest image (with higher ID value) to appear on top of the previous images and so on
‘6‘ is the number of images that will appear on your sidebar. You can change it to any number

However, you can add more customization on the parameters. Read more about them here.

CSS style

Now, you’ve put the code in you sidebar, we need to create some CSS styling.

#music {padding:5px;} #music ul{list-style-image:none;} #music ul li{display:inline;} #music ul li img { border:1px solid #999999; margin:3px; width:100px; }

There are only few things you need to concern here, especially under #music ul li img.
The border is optional actually – set your own thickness and color.
margin:3px means you are putting 3px separation between the images.
width:100px means you want all the images to have the same width no matter what is the width of the original image. So don’t you have to edit an image every time you want to add a new one. Why only width, no height? because it may stretch the image

So thats it. Easy isn’t it? As I said before, this is not only meant for showing current music; you can do anything with it by utilizing this method. The Short Notes section on my sidebar is also using the same method but with different parameters. Maybe you want to try that out too.

Good luck!

Coolness roundup #4 : CSS Resources

flisterz — Sun, 04 Nov 2007 08:54:34 +0000

Been ignoring CSS related entries for quite a long time. So, I decided to take some time to compile this. Taken from my old and fresh bookmarks.

CSS Techniques Collection

30 Free CSS Based Navigation Menu – a great collection of inspirational navigation menu for your website. CSS is proven to be the only tool we need for a cool and simple menu, replacing Flash that is extensively used before. Watch and learn.

25 Rounded Corners Techniques with CSS – Rounded corner is..er..web2.0-ish, if i can say that. However, if Im not mistaken, theres no specific CSS properties to easily style a rounded corner. Check out these techniques, and choose any that suits you.

Advanced CSS Menu – cool tutorial by Web Designer Wall

CSS Layout

You are a beginner in CSS. You dont want to read everything from the beginning. Or, you dont have enough time to code. Well, get basic code for your website template, as how you want it to look like.

CSSeasy (8)
Faux Column CSS Layouts (42)
CSS Tinderbox (8)
Nice and Free CSS Templates (12)
Free CSS Templates (8)
Layout Gala (40)
…and how about Advanced CSS Layout step-by-step guide (tutorial)

CSS Software

Simple CSS – Simple CSS is a ..er.. simple CSS editor (freeware) that allows you to easily create CSS from scratch and modify existing ones, using a familiar point-and-click interface. Also support CSS2. Although I prefer Notepad, but its good for quick editing though, and when you forgot names for some properties -_-

CSS Tab Designer – Create wonderful Tab for navigation menu and link list with this simple software. It also generates strict xhtml compliant code, which is a good thing. Free download.

CSS Vista – I used to write about this. Anyhow, here it is, again. CSS Vista allows you to do live rendering and editing on both IE and Firefox simultaneously. Sounds useful, huh? Try it out.

Other CSS related

CSS Hacks and Issues – Although I think CSS Hacks are useless and I never used them, but, someone else might need them

How about an Islamic CSS tips? Nice one.

60 best CSS directories you would die to watch! – really? an old article. but nevermind. Hope to see Bob’s CSSsnap in this sort of list in the future

You dont know what am I crapping here? wtf is CSS? maybe you want to read this