New UbuntuForums.org Design On The Way

The Ubuntu website and basically all the official Ubuntu related websites have been upgraded to use the new Ubuntu branding, except for Ubuntuforums.

But that's about to change. Mike Basinger create a blueprint @ Launchpad regarding this matter which has already been accepted, so it looks like we'll be getting a new Ubuntuforums design soon (I'm not sure when).

Mike also posted a link with a test theme for Ubuntuforums. To check it out for yourself, head over to www.mikesplanet.net/forums. What do you think about the new proposed design (note: the link is marked as "test theme" so it may not be the actual new theme or it may change)?


Update October 31: Some changes have been made to the design so I've updated the screenshot.

New Way To Get The New Official Ubuntu Font Family

In case you don't know, the new Ubuntu font which is supposed to be shipped with Ubuntu 10.10 is only available in a private PPA for now.

A while back we posted about getting the official Ubuntu font by joining the Kubuntu-users group. There were way too many people joining this group so it was revoked access to the private PPA. In a discussion with Paul Sladen, he pointed to a new way regular users can get access to the Ubuntu Font Family private PPA: go to https://launchpad.net/~ubuntu-typeface-interest and click "Join this team" (you'll of course need a Launchpad account). You should receive an email when you have been accepted to this team (it will take a while - I'm not sure how long). When this happens, do not install the deb! Add the PPA so you can stay up to date with the latest versions of the font!

Important: only join this group if you are willing to provide genuine feedback or need to work on a project like making a video for Ubuntu 10.10! Also: most people will be accepted into this group. However, if you have just created a Launchpad account and/or have 0 Launchpad karma, it might take a while until you're accepted.

Paul also mentioned a bug about the leaked Ubuntu font (not the font in the private PPA) which caused a lot of trouble for both the Ubuntu and Chromium developers: the font causes Chromium to segfault. Again: that is the unofficial, very old ripped off font and not the official one in the private PPA we are writing about! If you are using that font you should uninstall it as it is very buggy.

For more info, see this: https://wiki.ubuntu.com/Ubuntu%20Font%20Family#Howto and our old post on the Ubuntu Font Family - it includes screenshots and info on what to do once you've got access to the Ubuntu Font private PPA.


More:
Instructions and Rationale: http://design.canonical.com/2010/07/the-ubuntu-font/
Found a bug? Report it here: https://bugs.launchpad.net/ubuntu-font-family

Update: you can now install the Ubuntu Font Family from a public PPA.

Mult-Platform Color Picker: Gpick (Linux & Windows)

Gpick is a tool that allows you to click any color on your screen and copy it's RGB, HEX or HSL value to the clipboard.

Here is a video with gpick in action:

Features:

• Fast color picking
• Magnified screen area
• Magnification from 2 to 10 times
• Colors automatically named
• Closest color name is found using CIE94 color difference function, which is closer to the way humans interpret color differences, than difference of red, green and blue color amounts
• Palette export function
• Inkscape/Gimp Palette (*.gpl)
• Adobe Swatch Exchange (*.ase)
• Alias/WaveFront Material (*.mtl)
• Picked colors can be copied to clipboard in multiple formats
• Hexadecimal notation - #rrggbb
• Functional RGB notation - rgb(red, green, blue)
• Functional HSL notation - hsl(hue, saturation, lightness)
• Custom conversions can be done, but requires some Lua language knowledge
• Oversampling with five falloff types
• Multiple pixel values are averaged to help picking colors from sources with noise, patterns and etc, where each pixel is different and overall color is produced by different amounts of particular color
• Mix two or more colors using variable number of steps and different mixing types
• Create lightness and/or saturation variations
• Create harmonious colors

Download Gpick (Packages available: Windows .exe, Ubuntu .deb and source files)

[via ubuntutips]

Shadow Effect with CSS3

Shadow text

If you are using Firefox 3.5+, Opera 9, Safari 1.1 or a pretty new version of Google Chrome, you will see some shadows around the text above. That's all done with CSS. This is the code used for the above font:

{ text-shadow: 2px 2px 2px #BFBFBF; }

Playing around with this, you can achieve some other cool effects like:

Some random text

{text-shadow:0 0 4px #fff, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;color:#fff;}

text-shadow was included in CSS2, removed from CSS2.1 and returns in CSS3. Also, CSS3 introduced the box-shadow property which is supported by Firefox 3.5+, Safari 3.1 only:

There should be a nice grey fading shadow under this box..

CSS for the above shadow box:

{ box-shadow: 10px 10px 5px #888; -webkit-box-shadow: 10px 10px 5px #888; -moz-box-shadow: 10px 10px 5px #888; padding: 5px 5px 5px 15px; background-color: #EEEEEE; }

Or this:

There should be a hard black shadow above this one, and the shadow should follow the rounded corners.

Which has the following CSS code:

{ box-shadow: -10px -10px 0px #000; -webkit-box-shadow: -10px -10px 0px #000; -moz-box-shadow: -10px -10px 0px #000; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 5px 5px 5px 15px; background-color: #EEEEEE; }

Note: Adding -moz- and -webkit- in front of box-shadow and border-radius is required so that the shadow and rounded corners will render proprely in Firefox and Safari.

In case you don't use a CSS3 compatible browser, here is a screenshot of Firefox 3.5 browsing this post:

For creating advanced text-shadow and box-shadow, try this website.

Convert Photoshop PSD Files To Wordpress Themes

Divine is a new tool / plugin which converts Photoshop PSD files into Wordpress themes.

It works by selecting spots in design files & marking them as Wordpress variables like:

• post title
• post text
• author link
• etc..

It produces valid XHTML-CSS code & themes are automatically widget-ready. The code written with this tool is SEO friendly and optimized for getting the top results in the search engines. Web pages created with divine are compatible with all browsers at their most.

Divine has an integrated FTP-client & it is a very ideal plug-in for anyone who is not that into coding and/or Wordpress theming.

I could not get Divine to start, it always crashes on start. On it's website it says it needs Adobe Photoshop CS3 so maybe that's my problem so if you can run it, please tell us what you think...

[via smasingapps]