Neo is beginning to look complete. A bunch of bugs have been squished, and I skipped having to override the in line style sheet by importing only the style sheets I need. Because of that, you'll need to change to "Only use my custom style sheet" in the custom style sheet settings.
While it's a release candidate, its functionality isn't going to stay frozen. In fact, I want as much feedback as possible from you, my users. I want as many bug reports as possible and feature requests. After I've implemented the requests I approve, I'm going to release a Neo RC2, and If I'm satisfied, I'm going to clean up the source code and release the final version.
Neo has gone from being a concept design to a theme. The design is now at beta quality, and I think it's useable for most people. But be warned, it contains a lot of bugs, which I'll be ironing out before the final release. I'll also be working on making the theme look more similar to the concept. But I'm going to drop the rainbow colored menu in favor of red. All red. Neo is my first red design ever. Click here for installation instructions.
Some of you might remember an earlier concept I posted, known as Neo. The early versions of the code were still in the concept stage, where I tried out various ways to achieve the effects in from the concept design. I think I'm finally past the concept stage and it's a alpha quality theme. And I'm actually able to retain some of the minimalism from the concept. It might still look a bit funky, but I'm looking into it. Most of the ideas from the concept will remain. But I'm considering dropping the rainbow colored menu from the concept and go completely for red baby. Blood red baby.
You can grab your own copy of the code from the design group. No automatic updating yet, in case I screw up horribly. Only recommended for advanced My Opera users yet.
I recently revamped the My Opera StumbleUpon Team website with some new graphics. A new banner and eye-catching install buttons for the download page. The graphics style is Photoshop-like. But everything was made in Paint.NET without any use of layer styles. So how do you achieve these effects in this freeware graphics editor?
Tutorial
I'm using special formatting on text to make understanding it easier. I'm using italic text for actions like clicking a button or selecting a menu item. I'm using bold text to decribe where you're doing things. Values you're supposed to "write" or "change" are enclosed in double quotes.
Create a new document by clicking New... on the toolbar. "300" by "200" might be a good resolution to work with for this project. Click OK when you've decided. Click the Add new layer button in the Layers toolbox. In order to keep track of our layers, we're going to give them names after their functions. Double-click the new layer to open the Layer Properties dialog and change the name to "Button". Click OK.
Now we're going to create the shape of our button. We're going to use a basic colored shape without an outline. I used the Rounded Rectangle tool.
Using the Draw Shape button on the toolbar, set it to Draw Filled Shape. And click the color you want for your button in the Colors toolbox. Drag out a shape similar to one in the image below.
Use Duplicate Layer in the Layers toolbox. Double-click the lower layer and rename it to "Shadow". Use Adjustments -> Brightness / Contrast... to adjust the contrast to "max" and brightness to "minimum" for the Shadow layer, like in the image below.
Add Effects -> Blurs -> Gaussian Blur... effect to the Shadow layer. I'd recommend using a value of "5" and set the layer opacity to "50%" in the Layer Properties. You might be tempted to go all out with your effects, but keep things subtle, and your design will look better when you're done.
Duplicate the Button layer. Rename the top-most of your duplicates to "Highlight" using the Layer Properties. Use the tool Rectangle Select to select the bottom half of the Highlight layer. Remove the bottom part of the layer by pressing the delete key on your keyboard. If you're more experimental you could use a curved line to create a specific shape for your highlight. This is especially useful for odd-shaped buttons.
Adjust brightness and contrast to "max" for the Highlight layer using Adjustments -> Brightness / Contrast...
Set the layer opacity for the Highlight layer to "50%" or less in the Layer Properties.
Duplicate your Button layer. Move it to the top using the arrows in the Layers toolbox. Name the layer "Gradient overlay". Select Overlay as the layer blending mode. Tip: Install and use the Alpha Mask plugin to avoid rough edges.
Select the Magic Wand tool. Set the tolerance to "0%" from the toolbar. Use it to select the area around the shape in the Gradient overlay layer. Click Edit -> Invert Selection. Select Black and White in the Colors toolbox. Now hold down the Shift key on your keyboard and drag a gradient from the bottom edge of the selection to the top edge of the selection.
Duplicate your Button layer and move it to the top. Name the layer "Stroke". And set its blend mode to multiply. We're going to use it as a outline around the button.
Apply Effects -> Artistic -> Pencil Sketch. Keep things subtle. Use "2" as your Pencil tip value and "-6" as the "Range" value.
There might be some rough edges around the button now. This is because we used the selection tool on the Gradient overlay layer. You'll have to erase these edges manually. Hide the Background layer by unticking the checkbox for the layer. Select the Eraser tool. Set the Brush width to approximately "10px" from the toolbar. Select the Gradient overlay layer. Zoom in on the rough edges and start erasing gently by moving the eraser near the rough edges and clicking once, then move your eraser and repeat.
If you want to change the appearance of your button, you can edit the layer opacity for different layers. You can change the blend mode. If you want to change the color, use Adjustments -> Hue / Saturation... and adjust the levers. Or use Adjustments -> Curves and adjust the curves for the RGB values.
The button is ready. Save your project as a Paint.NET file. If you want to use the button on your site, you have a number of choices. The most compatible one is to Fill the Background layer with your site color and save your button as a JPEG file. This also ensures your button loads faster in your visitors browser. The most flexible one is to hide the background layer and save your file as a PNG with transparency. Make sure you set bit depth to 32-bit. You could also hide the Shadow layer as well and save your file as a GIF with transparency. The last method works in Internet Explorer 6 and lower as well.
In order to save the image you're using on your website in the correct size, select the shadow layer. Enable the Magic Wand and set tolerance to "0%". Click in the area outside the shadow. Click Edit -> Select Inverse. And click Image -> Crop to Selection.
Use your button
This is the finished button. You can add text directly to the image file. Or you can use it as a background for a text link.
Why don't you use the new button to promote the new StumbleUpon.com Tools? Here's a code for a button you can add to your blog posts:
<a style="text-decoration: none; float: right;" title="StumbleUpon for Opera, Safari and Chrome" href="http://my.opera.com/suopera/blog/stumbleupon-com-tools"><div style="background: transparent url(http://files.myopera.com/drlaunch/themes/suopera/button.png); color: white; width: 250px; height: 100px;"><div style="padding-left: 24px;"><h4 style="padding-top:24px; font-size: 16px;">StumbleUpon.com Tools</h4><p style="padding-top:14px; font-size: 13px;">for <em>your</em> web browser</p></div></div></a>
Edit the values to match the values required by your image and you're ready to go.
As a result of constant learning of CSS I've managed to do some pretty nifty things with this blog. I'm not talking about the theme. I'm talking about the mods I've done to the front page.
If you're using a decent browser (anything but Internet Explorer), you should se an additional menu of links below the banner and a introduction in the sidebar. Internet Explorer users will see empty areas where there should be text.
And if you're My Opera savvy, here are the codes:
<div id="mybloglinks">
<ul>
<li>
<a href="http://my.opera.com/drlaunch/blog/welcome#comments" title="Click here to leave a comment">
Guestbook
</a>
</li>
<li>
<a href="http://my.opera.com/blogdesigns/" title="Blog Designs - Giving back to the great MyOpera community!">
Themes
</a>
</li>
<li>
<a href="http://my.opera.com/techie-chat/" title="For people capable with and interested in technology. And for people who want help. Subjects cover aspects of technology like IT, computer maintenance and upgrading, new technology, software, hardware, developing, Internet, gadgets, networking, gaming and lots more.">
#techie
</a>
</li>
<li>
<a href="http://my.opera.com/lolcats/" title="i can show u mai lolcats plz?">
lolcats
</a>
</li>
<li>
<a href="http://my.opera.com/drlaunch/affiliate/">
[COLOR=red]
Opera
[/COLOR]
</a>
</li>
<li>
<a href="http://my.opera.com/Nplus/blog" title="N + Life | Culture | Community">
[COLOR=deeppink]
N+
[/COLOR]
</a>
</li>
</div>
<div id="myblogintro"><a href="http://my.opera.com/drlaunch/blog/welcome#comments">Welcome. I'm just a little confused after I fell from the moon. As a result I created what 250 000 monkeys in spacesuits would do if they were given a typewriter each. But don't worry. The monkeys with spacesuits separate this blog from blogs written by regular monkeys with typewriters. Don't you agree with that? Then speak your mind in the guestbook!</a></div>
I can finally use Opera Widgets on Ubuntu thanks to support for compositing in Opera 10 Alpha. Well. I could use widgets before too, but shadows in widgets were drawn over an opaque gray background, resulting in hideous looking widgets.
Opera 10 Alpha has no real show stopper bugs to me. Although icons in Tango CL and PNGs with transparency, such as my avatar, look somewhat wrong. I'm suspecting these bugs are related.
To enable transparency in Opera 10 Alpha for Linux, you'll need to run Opera from a terminal window. Opera should produce a message telling you how to enable compositing support. Remember to edit your Opera launchers to reflect the instructions.
Have fun with additional eye candy on your GNU/Linux desktop.
Maybe my last theme will help? To celebrate the new My Opera, I completed the design of my theme and made it available to you. Check it out here.
Feeling Blue is the first theme I've made which haven't been given the Google treatment by staying in beta because I'm too lazy to fix the theme. So now I've released a complete theme. But I'm not saying it's bug free. That's why it's open-source. Feeling Blue can be used freely and modified freely if you publish your modifications under LGPL.
The theme group is under development at the moment. I'm having trouble adding forums to it, so I'll have to wait until that's fixed before I can let people collaborate on development in the group. But if you have any bug fixes you want added to the theme, just send them to me by PM.
Some of you might have noticed that my blog design got borked after the latest My Opera update. This was because the community design image files from before the update were deleted. And I used one of them in my design. I fixed it now. But instead of trying to get my old design back, I decided to make my blog design integrate better into My Opera, which already was one of my intentions with the design. The menu specifically looks a bit more like the menus you can see in the community now.
I also fixed Sleek Shady. This was a simple matter of background positioning. You might also notice that the menu in Sleek Shady makes it integrate better with the new My Opera. Unexpected but convenient. More fixes to other themes are coming up soon. But it's worth a mention that Medusa already works fine without any need for a fix.
Anyway. I'm very pleased with the new changes to My Opera. I find CSS designing a tad more effective with the UI changes. I also feel the new features empower me a bit more in the community. My avatar to the top left now looks like it's part of the new design. And the community is available in my native language, Norwegian too. I almost feel like the new design is streamlined to my needs and preferences. Thank you very much, My Opera developer team!
Maybe I'll start making something tomorrow to celebrate the new My Opera.
Tip: Hover your mouse cursor over values to see their metric equivalent.
Meet the Tesla Roadster. In the spirit of Nikola Tesla, the Austrian electric wizard whom dreamed of free energy for all, Tesla Roadster is a electric sports car more than worthy of that title. It's high-tech, looks quite good, and accelerates like crazy. Tesla Roadster is different from other sports cars mainly because of one thing... an electric motor. Thanks to its electric motor it does 0 to 60 mph in 3.9 seconds.
Tesla Roadster comes in an era in great need for change. Gas prices soar and we're seeing wars for energy. Pollution is only increasing. So I'm hoping Tesla Roadster is the start of something new. A market of all-electric vehicles. This would mean cars that are cheaper to drive.
It does the equivalent of 135 miles per gallon and 220 miles per charge. That's 2 cents per mile. All thanks to its advanced lithium-ion battery. However, the price is less pleasant. It costs $109,000 USD. That's a bit more expensive than similar sports cars. Let's hope for cheaper EV's with a high range soon.
But why an electric vehicle? Why not a fuel cell, hydrogen, bio-fuel or hybrid car? They're all eco-friendly and go further. While these vehicles have the advantages of gasoline, they aren't as eco-friendly as a battery EV. They also have many of the disadvantages of gasoline. Some of them can even be worse for the environment than gasoline.
Fuel cells consume hydrogen usually. Hydrogen produces only water-vapor, also in hydrogen-combustion engines. However it's expensive to produce and energy will be wasted because it needs to be transported via trucks to gas stations. Large oil companies are also the ones who'll produce and distribute hydrogen, which means your money will go to the same hands as before.
Bio-fuels are derived from recently dead biological materials, unlike oil which comes from biological materials dead a long time ago. Bio-fuels are usually ethanol or plant oil. Since these plants consume carbon-dioxide from the atmosphere, they're carbon-neutral which means they don't pollute. But since these fuels are grown in fields, land suitable for food crops is used for bio-fuels instead. This means less food will be produced and food prices worldwide will increase. Bio-fuels are just as bad or even worse than fossil fuels.
Hybrid cars usually have two sources of propulsion. Gasoline and batteries. You can run a hybrid car off batteries only, but most hybrids have a very low range for their battery power, which means they'll switch to gasoline once you drive far enough with them. A hydrogen-battery hybrid could however be a good compromise until the range of battery driven cars improve.
A battery driven electric vehicle is still the most eco-friendly alternative. It's however not completely eco-friendly. Large amounts of today's electrical energy is produced from coal. Coal pollutes a lot more than other energy sources. However, it has been shown that you can run an entire home and an electric vehicle completely off solar power and still sell electricity back to the grid. Making such a home is expensive though because of the high production cost of solar cells. Recent advances in solar film might however make solar cells cheaper in the future. Let's also hope the world soon stops using fossil fuels for electricity too.
Tesla Roadster might signal a future with less pollution and more power in the hands of drivers. Advances in battery technology, engine technology and lower prices one these cars are needed however before the world can ditch solid fuels completely.
It's quite simple to change your blog banner with most of the blog themes available. Sleek Shady Beta is no exception.
The default banners are 960 pixels horizontally and 170 pixels vertically. You should scale and crop the image you want to use as a banner to that size. You can make a smaller banner too if you want to. In my case, I made a transparent GIF image of Dr. Launch, drawn by Freek Zijlmans and used really simple CSS to put it in front of the default banner. The advantage of my method is that you can change your theme as much as you want and your banner will still look like it should.
So how do you change your banner image? By editing the custom stylesheet for your account. The custom stylesheet editor can be found by following these instructions:
Click the custom stylesheet link from the line below the Select a design text
You're now looking at the custom stylesheet editor. You're supposed to add CSS code to it to make modifications to your blog design. So how do you add a banner image of the size 960 x 170 to your design? By adding the following code to your custom stylesheet:
Change the address seen in the code to the address of your transparent GIF image. It will appear in the bottom right part of your banner. And it's not repeated. If you'd like to change the place the banner appears, you can change the background-position value. There are some other positions you can use for the background image. Here's a list of the basic ones:
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
Change bottom right in my example to the preferred position from the list. You can also position the background image in a specific location. You can read more here.
If you need more help adding a banner to your blog, please leave a comment below.
Copyrights
The Dr. Launch cartoon character is a trademark of and a copyright of DrLaunch. The image used in this blog post is a copyright of Freek Zijlmans and DrLaunch.
The odd story of NASA's unused wingless escape vehicle for the International Space Station is finally over. The prototype X-38, a 7-person, unpowered, totally automatic lifeboat, was officially laid to rest at the Strategic Air and Space Museum in Ashland, Nebraska last weekend. Can ...
WIDGETIZE