- Gradient background
- Stitches on both sides
- Shadow on one end
I've put the scripts in my jsfiddle for reference purpose.
I've modified it to be left sided.
How to create a ribbon with CSS3
I knew this technique is well-known for a long time, but not many methods tick all my requirements. Not until I came across this nifty ribbon created by Kushagra Agarwal. His ribbon contains all the tiny details.
How to get into Backbone.js
Backbone.js is basically an uber-light framework that allows you to structure your Javascript code in anMVC(Model, View, Controller) fashion where...Model is part of your code that retrieves and populates the data,View is the HTML representation of this model(views change as models change, etc)and Controller that in this case allows you to save the state of your javascript application via a hashbang url, for example: http://twitter.com/#search?q=backbone.jsas quoted by Vladimir Gurovich @ stackoverflow.com
I always wanted to delve into those increasingly popular Javascript libraries, particularly
node.js and backbone.js. This post serves as a shortcut to relevant sources which I find helpful in getting better understanding on backbone.js. I shall update from time to time if I found any good tutorials.Reference:
- Basic introduction from Artur Adib: A great way to understand what Backbone.js could do by going through 5 examples.
- Christophe Coenraets 3-part tutorial and afterthought
- Download the ebook, Backbone Fundamentals from here
Android Custom launcher with Liquid Crystal Display (LCD) theme
 |
| LCD home screen |
The author, z3u5 has done a terrific job, a video tutorial is provided on mycolorscreen (using SSLauncher on HTC device). Below are the steps derived from Marco's Youtube description. If you want some setup instructions for total noobs like me, please refer further down the article.
Part 1: Before you begin
These are the apps you will need:
UCCW: Custom clock widget
Elixir 2: Widgets
SS Launcher The Original (or Nova or GO Launcher)
Required for homescreen setup:
See the page's description for everything you need
Nexus 4 Wallpaper, SSLauncher Backup, PSD for extra Elixir 2 Widget Icons (Thanks Roger Morse):
Part 2: SS Launcher Setup
Now you can do this with either Nova/Apex or Holo Launcher, but it is a lot easier with SS Launcher. Also this screen was designed for the paid version (The Original) as some parts and options can't be chosen with the free version.
1. Drag all the widgets into the 'trash bin' at the top.
2. Go into the Menu - Preferences.
3. Enable Full Screen, Disable Scroll Wallpaper, Go back
4. Go into Menu - Theme - Label.
5. Enable Hide Labels, Apply Changes.
Or using Nova/Apex/GO:
• Grid Size 16x5
• 2 screen / Wallpaper
• Enable Dock
• Horizontal / Vertical margins none
• Resize any widget
• Overlapping widget
Part 3: Wallpaper Setup
Simply use the one that is provided for your phone. If it doesn't too well, try apps such as Wallpaper Wizardrii, Multipicture live Wallpaper or even Photo Editor.
Part 4: UCCW
To add the skins:
- Hold down on the homescreen - New Widget - UCCW - any size.
- In the main menu after tapping the widget, select "Open uzip", now just find where you pasted the folder and look for the skin you want to add.
- After it appears on your homesreen, resize it to the way it looks in the video.
- Add both the .uzips provided.
- Hold down on the skin, then tap the skin, this will allow for complete resizing and moving of the skin.
- You might have to re-position the skin's objects, see the link below for more info on moving objects as well as general UCCW tips.
More UCCW Tutorials
Turn Hotspots mode ON to prevent opening the editor each time.
Part 5: Elixir 2 Widget
Remember to add a 3x1 size.
*** Please Note: the backup only restores the toggles, not the icons. To change the icons, simply tap the Play Icon, customize icons. Then you just got to change each one of the icons that have been provided. It's quite easy to change and only takes a few minutes ***
Part 6: Shortcuts Setup
1. Hold down on the homescreen - New Shortcut
2. Under target - select your preferred app
3. Style - select the image that has no background but just an icon with text underneath.
4. Icon - Icon - Import - then import the folder that has all the icons in them, go back, then select your preferred icon.
5. Resize and position the icon as desired.
6. Hold down on the icon - Copy, then hold down to another area on the screen - paste.
7. Repeat for all shortcut areas.
8. Now hold down on each icon - Edit - Target - Select your desired app.
9. Repeat for all the shortcuts, for the app drawer icon, change Type to Page and Target to Applications.
If you're someone
- who has no idea how to use launcher, never heard of elixir 2 and uccw
- owns Samsung Note2
- prefers GoLauncher EX for some reasons
Please refer the steps below which I've spent one whole night to figure it out:
- Go to Play Store, download GoLauncher EX, UCCW and Elixir 2 - Widgets
- Download the All-in-One package which you can find from mycolorscreen to PC
- Extract the zip file content (LCD-all folder) and transfer it to your phone (/phone folder)
- Copy "Pixel LCD-7.ttf" from "/Phone/LCD-all/font" to "/Phone/GOLauncherEX/fonts"
- Open GoLauncher EX (you may set it as your default instead of TouchWiz)
- Hold and drag all the widgets into the trash bin which is located at the top
- Go to phone's "Menu" → "Preferences" to enter Go Launcher Settings page
- check "Set as default launcher"
- uncheck "Infinite Scrolling" and "High Quality Drawing" (prefer to have only 1 page as home screen)
- "Wallpaper Mode" sets to off - Click "Visual Settings"
Under "Font" tab, do the following:
- "App Labels Color" sets to#ff303225
- "App Name Size" sets to custom size 10
- Click on "Scan Font", then click on "Select Font", choose "Pixel LCD-7"
Under "Backgrounds" tab, do the following:
- "Wallpaper" → "Custom Wallpaper" → Gallery → LCD-all → lcd-wall-dock.jpg
- None for "Dock Background"
- "App Drawer Background" → "Custom Wallpaper" → Gallery → LCD-all → lcd-wall-nodock.jpg
- Check "Blur Wallpaper"
Under "Icons" tan, do the following:
- Set "Icon Size" to custom size 96
- Uncheck "Show Icon Base"
- Leave the rest as it is - Click "Back" to move on to "Appearance Settings"
Under Home Screen tab, do the following:
- Set "Grid Size" to 7 (rows) * 5 (columns)
- Check "Show Status Bar"
- Check "Show Icon Labels" (as you like!)
- Uncheck "Show Label Background"
- Set "Dock Row" as 1
- Check "Show Dock" - Press and hold at the empty home screen to bring up this menu
- Under "Add" tab, click on "Widget" icon and choose "UCCW 4x3"
- Press "UZIP" on the top right corner, choose "LCD.uzip". Place the hand cursor at the top of the home screen. Click on "Touch here" to display the clock/weather widget. You can then press and hold the widget to bring up the menu to resize.
- Open "UCCW" app, click on phone's "Menu" → "Settings"
- Weather provider: Yahoo
- Location: Choose Manual location, usecityid:xxxxxxxformat else you might encounter invalid weather forecast (either empty weather icon or wrong city). Do a city search in Yahoo! weather, the last 7 digits in the search result URL would be your city ID, e.g. "http://weather.yahoo.com/australia/victoria/melbourne-12707339/" 12707339 is city ID. - You might find weird language above date text in the widget, that's actually day of week in Hungarian. It will happen if you choose LCD.uzip, the author doesn't provide uzip for LCD-v1.1. The only workaround I can think of is copy "magyar1.ctxt" from "/Phone/UltimateCustomClockWidget\LCD" folder to PC. After changing all the Hungarian days into English, replace the original file in your phone. e.g.
{ "ID": 0,
"name": "Sunday",
"value": "Sunday",
"value1": "",
"value2": "",
"value3": ""
}, ... - Next is to create a shortcut bar for phone settings with Elixir 2. Repeat step 10, under "Add" tab, click on "Widget" icon and choose "Elixir 7x1"
- In the "Elixir 2" settings page, you will see 7 big X's at the top.
- Click on the 1st X and choose "Hide" in the list, do the same to the last X.
- Click on the triangle icon at the top right menu, choose "Customize icons", assign the icons according ly in "LCD-all/icons/switch icons" folder in "Gallery. I replaced (from left to right order as shown in the first image): [gps_on, gps_off], [mobile_data_on, mobile_data_off], [wifi_go_on, wifi_go_off], [autosync_on, autosync_off], [autobrightness_on, autobrightness_off]
- Exit icon customization screen and proceed with assigning types to widget
- Click on 2nd X, choose "GPS toggle" (you should see the icons are updated to the ones you've chosen earlier)
- Click on 3rd X, choose "Mobile data toggle"
- Click on 4th X, choose "Wi-Fi toggle"
- Click on 5th X, choose "Auto-sync toggle"
- Click on 6th X, choose "Auto-brightness toggle" - When Elixir widget is configured, click on triangle icon again, choose "Backup widget data"
- - Assign a name to this widget
- Choose "custom image" as Background type
- Choose "lcd-elixir-bkg.png" in "\switch icons" folder in Gallery as background image.
- Drag to the right end for "Background Transparency", "Icons Transparency", "Icons Size". Uncheck "Maximize icons without label"
- Check "Hide toggle labels"
- Click "Backup" and "Create"
- Drag the widget to the bottom of home screen, just above the dock - Change dock icons
- Press and hold one dock icon, choose "Replace", click the left icon on the top right bar to bring out the Gallery, choose one from "\dock icons" folder - Refer to the icons available in "\icons" folder in Gallery. Drag those apps from App Drawer to the home screen. Change the icons with the same method as step 19.
Done, hope you enjoy the new home screen.
UPDATE 20130516
Q: Why weather icons are still not showing up even though I entered the correct city ID?UPDATE 20130516
A: Check Yahoo! weather API's condition codes here. Compare the codes to the weather icons in your widget folder, in this case, it's "\Phone\UltimateCustomClockWidget\LCD\LCD". You can either create your own icons or just copy and paste from the existing ones, rename it.
Subscribe to:
Posts (Atom)