Introduction
The following is the Style Guide for the wordpress site that xda-university is on. I posted the original style guide based on drew.edu's wordpress style guide with a minor modification to locate device specific content in a anchor as an appendix chapter to your guide.
I figured it would be handy to keep a copy of this here so that future documents can be included into xda-university faster, because they were written with the Style Guide in mind.
Anyways, the stuff below here should be updated anytime the Style Guide on xda-university updates.
On the other hand, it's also a place where we can discuss the Style Guide here on the forum.
(the formatting is currently wrong, because I am just posting this now, and I'm lazy. I'll update this later so it looks right.)
All Sites
Page Titles Should Use Capitalized Case. This Line is an Example of That.
Use headers h2-4 to define sections. Separate content logically to improve readability.
Headers should use capitalized case (This is an Appropriate Title Example)
Headers should typically never be given additional styling such as italics or bolding.
Never underline text. This is a style reserved for links only.
ALL CAPS should never be used unless it is the proper name of something like XDA.
Never make a link that says “click here.”Instead link the words pertaining to the link.
Example: “For more, view our full calendar of events.”
Use alt text on photos, captions only when appropriate.
Only use tables for data, not layout.
No font colors.
Single spaces after periods, not double. (<-This it too many spaces)
Device Specific Information
Unless the page is written for a specific device, put the device specific information towards the end of the page and use an anchor to link to it.
(shamelessly borrowed from http://www.drew.edu/wp-guide/web-style-guide)
This is WIP and I am VERY open to ideas!
Note:
◘ While submitting/publishing, it is also a good practice to justify text. Justification should NOT be done by selecting the entire body of work and justifying all at once. Justify only individual paragraphs at one-go.
◘ It is also helpful to switch from Visual Editor to Text Editor before submission to iron out formatting issues that one may face. One of the most common issues that crop up are double para-breaks, which will show up as something like this in the text editor -
<p style="text-align: justify;">Sample Text----</p>
<p style="text-align: justify;"></p>
<p style="text-align: justify;"> Text here ----</p>
The line represented in boldface should ideally be deleted manually via the text editor.
◘ Keep sentences short and crisp to improve readability index score. Make a paragraph-break after 4-5 lines.
Credits
pulser_g2, The-Captain, and toxicthunder for updates to the style guide!
Related
I created these with nothing more than [PocketPicture] and imagination on my Verizon Whitestone-100 aka Imagio.
Examples
Backgrounds images in use on the Verizon Imagio. *Note: The image shown below with the Today HomePage is incorrect. I have posted the updated correct file further in this thread* Sorry, I am new to posting here.
Close-Up & Background File
The close-up is here for you to view, download or use anyway you wish. The Background image has been put here as shareware, if you like what you see, share it with a friend.
*Update to HP image*
This is the correct example image. You most likely did not catch the difference, but if you look in the top center above the clock, you will see an added image NOT found in my Background Image. Sorry for any confusion as I learn this sites forum layout. Enjoy!
The following URL:
http://forum.xda-developers.com/attachment.php?attachmentid=
412318&d=1286094289
has a length of 79 characters and resulted in the following TinyURL which has a length of 27 characters:
....
http://tinyurl.com/biohands
....
Or, for added recipient confidence preview TinyURL:
http://preview.tinyurl.com/biohands
~Demonseed666~
Having avatars added to your contact is fun and adds a bit of color to apps that uses them. But not always you have decent photo of a person, or "person" is institution or company for which is hard to find some visual identification.
Google has solved this issue in Gmail with pretty, colorful and minimalistic icons, containing first letter of contact on colored background.
So I created same icons with letters for use in any other place where contact pictures are dispalyed.
For now there are eight sets, with all caps letters A-Z in Roboto Thin and same colors as in Gmail. All 500x500 pngs.
https://drive.google.com/folderview?id=0B0Fhz5fDg1njSmpUakhhZllEWHM&usp=sharing
Enjoy!
If you have any request regarding color or letter feel free to post it here
geekon said:
So I created same icons with letters for use in any other place where contact pictures are dispalyed.
Click to expand...
Click to collapse
Thank you! I've been looking around for an app to do this, since even the default Android "People" application doesn't do this for my contacts, but I guess at least having some icons to use like this is the next best thing. Maybe it's about time I learn to develop simple apps for Android and do something like this
I wish Google would think more about things like this pertaining to the UI of their various applications to be a bit more cohesively integrated with each other so as to give a more unified experience.
geekon said:
Having avatars added to your contact is fun and adds a bit of color to apps that uses them. But not always you have decent photo of a person, or "person" is institution or company for which is hard to find some visual identification.
Google has solved this issue in Gmail with pretty, colorful and minimalistic icons, containing first letter of contact on colored background.
So I created same icons with letters for use in any other place where contact pictures are dispalyed.
For now there are eight sets, with all caps letters A-Z in Roboto Thin and same colors as in Gmail. All 500x500 pngs.
https://drive.google.com/folderview?id=0B0Fhz5fDg1njSmpUakhhZllEWHM&usp=sharing
Enjoy!
If you have any request regarding color or letter feel free to post it here
Click to expand...
Click to collapse
Thank You so much! Since I can't officially upgrade from my 4.4.2 rom to 4.4.3 I've been looking for these cards everywhere!! Great work!!:good::good::laugh:
Much thanks!
Thank you so much! Just what I was looking for. Really appreciate your effort.
The link is broken;
However, I went ahead and built a Node.js package that generates these icons on-the-fly:
https://github.com/eladnava/material-letter-icons
Hi everybody!
First of all, I am using Buzz Launcher, which means that my "themes" are made following specific parameters such as the grid size, no labels, etc.
But I think that other launchers allow you to customize your appearence as well.
My phone resolution is 854*480.
I had a 720p one but had to send it back, so for now I can't work on that resolution anymore.
So for those having higher resolutions, well I don't know what the result would be on your screens. Except for wallpapers, I guess icons would be displayed well.
Before sharing my files, I'd like to show you what I've done so far and get your opinion: if you like it or not, what I could/should change, etc.
This to get a nice final result.
And obviously I won't and never will sell those resources because:
- I'm using some stuff such as photographs from other persons
- Some icons are directly made from other icons you can find on the Play Store or Google Image
- I'm here to share
To be edited later (once I have posted 10 messages and can freely post direct links):
I. Icons only
II. Backgrounds only
III. Themes: icons + backgrounds
I. ICONS
II. BACKGROUNDS
III. THEMES
Hey!
One of my nicest try so far: a panda theme! (I love pandas)
The panda is partially made from an iPhone game icon named Land-a-panda (see the attached pictures).
Those icons are for HD displays (720p): 144x144. Work fine on lower resolutions.
And I've "made" a few backgrounds too, giving quite a cool result when used with those icons.
Also, because it's quite boring to always have the same face, I just added 2 other kinds of eyes (see Viber and Video Player icons).
What do you think? Worth sharing them?
Any idea welcome
Let's keep up the monologue.
Seems not be be very interesting. Whatever, I'm sharing my work anyway.
Let's begin with the icons:
192 icons (64 app with 3 different kinds of pandas), pretty high quality: 144x144. See the sample below.
And if you are wondering: yes, it took me ages to save each file.
I'll share the Photoshop template once I can post direct links (man that's some weird annoying policy!), so that you can create your own icons without having to wait for updates (as I may not update this theme anyway).
If you give it a try, please share some photos/screenshots
ZIP file size: 3.62Mb
Note: if you find the icons resolution too high (say you want a 96px² size), you can use a (free) software such as ImRe to massively convert the whole folder. It perfectly and quickly does the job.
Laterz
Hey oi!
New icons, "copied" from a screenshot I saw somewhere (I think it's called themer, it's new and not compatible with all phones (not my X720D).
So here we go, 3 samples and the template file (PSD, Photoshop CS5).
The PSD is made as follow:
- A folder with the white pictures representing the icons (that's the part you really need to work on if you want to make your own icons)
- The icon's shadow (layer)
- The icon's color (layer), locked to the edit mode (you pick your color, use the brush tool and paint: it will paint ONLY the visible pixels).
Theme 5: Japanology (again)
The principle of this theme is simple: the background is the main deal, then there just needs to add the app and choose a transparent PNG to make them invisible.
Main problem with that theme: icons cannot be replaced, which means you must always keep the same applications on your screen.
edit: well it seems that uploading pictures isn't working at the moment. My PC or the servers, I don't know. I'l try to re-upload later if it keeps showing a 404.
Hum there seems to be a problem with uploading pictures from the forum. Even after having edited my post 2 times.
Hoho but I found a way to post links without having 10 posts: quotation (I hope you won't mind)
Click on each picture to enlarge it. See the above post for more information about how to use that "theme" (Buzz Launcher); Note that you must create your own date/time/battery widget (as in the screenshot below).
munchou said:
Click to expand...
Click to collapse
To prevent spam to the forums, new users must wait five minutes between posts. All new user accounts will be verified by moderators before this restriction is removed.
Click to expand...
Click to collapse
Could a moderator do something about that ?
That's really becoming a pain...
Today's icons: ICONS F Black and White
200x200
List:
Alarm Clock
Applications
Calendar
Camera
E-mail
Files
Gallery
Games
GPS
Internet
Notes
Record
Settings
TV
Video Player
And of course the PSD file to add your own ones.
Enjoy!
Hello all!
I decided to make a slew of different colored, material design based wallpapers, and figured I would share with the class.
View Album Here
Here is a PSD if you are interested in making any variation of this you may want, or to edit into something new entirely. My only request is that anything you generate you share freely in this thread so that others may enjoy it. The PSD is set to be editable by anyone through Drive. If you create a new module / color / whatever, please bear in mind a couple of things:
The image is 1440 X 2560, at 515ppi. Aka, the exact resolution and density as the phone. Any changes made here should reflect exactly as seen on the device.
Please do not remove anything that anyone else has added, unless it is vulgar / inappropriate. If you find any content like that please check the change log and let me know who did it so that I can block them. Otherwise, use the hide layers button to hide any elements you don't want.
All of the coloring is done through layers styles. I would greatly encourage doing so as well. It makes it significantly easier to recolor the same element to multiple options, and makes it easier for others to add to later. - Use the color picker tool to use existing colors or add new colors from the material design palate.
Please keep all additions on the uploaded version as material as possible. To match my shadow, simply copy and paste the layer style from one of my layers to yours. That will also give you your color control options. I will audit this thing from time to time to keep it clean / material. Feel free to create new backrounds, shapes, typography using that general typeface or with others - anything that comes to mind, as long as it's material.
I WILL NOT RESPOND TO REQUESTS VIA PM. I have posted the PSD so that you can pick and choose what elements of mine that you want. I am curious to see what we can come up with. If you simply do not have and cannot get photoshop, and do have a very good idea, please feel free to post in the thead. Either myself or some other generous soul may take it on and make it happen. (Please note, this is not a guarantee. This is a hobby, and I will tend it as I can and for my own amusement. I am sharing this project because it sounds like fun - please don't make it not.)
Download PSD Here
Check out the Attachments for a quick preview.
Thanks man. Great Idea. I will try to contribute...
Thanks dude
lickarock said:
Hello all!
I decided to make a slew of different colored, material design based wallpapers, and figured I would share with the class.
View Album Here
Here is a PSD if you are interested in making any variation of this you may want, or to edit into something new entirely. My only request is that anything you generate you share freely in this thread so that others may enjoy it. The PSD is set to be editable by anyone through Drive. If you create a new module / color / whatever, please bear in mind a couple of things:
The image is 1440 X 2560, at 515ppi. Aka, the exact resolution and density as the phone. Any changes made here should reflect exactly as seen on the device.
Please do not remove anything that anyone else has added, unless it is vulgar / inappropriate. If you find any content like that please check the change log and let me know who did it so that I can block them. Otherwise, use the hide layers button to hide any elements you don't want.
All of the coloring is done through layers styles. I would greatly encourage doing so as well. It makes it significantly easier to recolor the same element to multiple options, and makes it easier for others to add to later. - Use the color picker tool to use existing colors or add new colors from the material design palate.
Please keep all additions on the uploaded version as material as possible. To match my shadow, simply copy and paste the layer style from one of my layers to yours. That will also give you your color control options. I will audit this thing from time to time to keep it clean / material. Feel free to create new backrounds, shapes, typography using that general typeface or with others - anything that comes to mind, as long as it's material.
I WILL NOT RESPOND TO REQUESTS VIA PM. I have posted the PSD so that you can pick and choose what elements of mine that you want. I am curious to see what we can come up with. If you simply do not have and cannot get photoshop, and do have a very good idea, please feel free to post in the thead. Either myself or some other generous soul may take it on and make it happen. (Please note, this is not a guarantee. This is a hobby, and I will tend it as I can and for my own amusement. I am sharing this project because it sounds like fun - please don't make it not.)
Download PSD Here
Check out the Attachments for a quick preview.
Click to expand...
Click to collapse
Great, thank you!
lickarock said:
Hello all!
I decided to make a slew of different colored, material design based wallpapers, and figured I would share with the class.
View Album Here
Here is a PSD if you are interested in making any variation of this you may want, or to edit into something new entirely. My only request is that anything you generate you share freely in this thread so that others may enjoy it. The PSD is set to be editable by anyone through Drive. If you create a new module / color / whatever, please bear in mind a couple of things:
The image is 1440 X 2560, at 515ppi. Aka, the exact resolution and density as the phone. Any changes made here should reflect exactly as seen on the device.
Please do not remove anything that anyone else has added, unless it is vulgar / inappropriate. If you find any content like that please check the change log and let me know who did it so that I can block them. Otherwise, use the hide layers button to hide any elements you don't want.
All of the coloring is done through layers styles. I would greatly encourage doing so as well. It makes it significantly easier to recolor the same element to multiple options, and makes it easier for others to add to later. - Use the color picker tool to use existing colors or add new colors from the material design palate.
Please keep all additions on the uploaded version as material as possible. To match my shadow, simply copy and paste the layer style from one of my layers to yours. That will also give you your color control options. I will audit this thing from time to time to keep it clean / material. Feel free to create new backrounds, shapes, typography using that general typeface or with others - anything that comes to mind, as long as it's material.
I WILL NOT RESPOND TO REQUESTS VIA PM. I have posted the PSD so that you can pick and choose what elements of mine that you want. I am curious to see what we can come up with. If you simply do not have and cannot get photoshop, and do have a very good idea, please feel free to post in the thead. Either myself or some other generous soul may take it on and make it happen. (Please note, this is not a guarantee. This is a hobby, and I will tend it as I can and for my own amusement. I am sharing this project because it sounds like fun - please don't make it not.)
Download PSD Here
Check out the Attachments for a quick preview.
Click to expand...
Click to collapse
Very nice wallpapers. Thank you
MKBHD posted a very cool wallpaper for the iPhone 7 which had a graph background with labels for everything like Signal, battery, etc. which you can check out here:
https://twitter.com/MKBHD/status/837...096129538?s=09
I wanted a similar wallpaper but for Android and after hours of searching, couldn't find one. So I made my own
Now since Android is very customizable, it is virtually impossible to make a universal wallpaper for all android phones. Therefore this guide so that everyone can make that wallpaper for their phone themselves!
Note: Some basic Photoshop skills will be required which I will not be explaining in this guide.
STEP 1: Downloading the .PSD files
I have uploaded 2 files, one for the homescreen and one for the lockscreen. You can download both if you wish to at any one of them.
Homescreen - https://drive.google.com/open?id=0B2XbBDw3Myp5WG5uSF8yUlRmZHM
Lockscreen - https://drive.google.com/open?id=0B2XbBDw3Myp5bE8tNExhaU9uaDA
STEP 2: Placement of screenshot and blueprint background
This is the main step.
Take a screenshot of your current homescreen and/or lockscreen with your current wallpaper and embed it in the respective .PSD files(as a new layer). Now place the screenshot at the bottom of all the layers. Make sure that the visibility of both the blueprint backgrounds (coming to that later) is turned off. At this stage, you can see which of the boxes an labels are aligned with the elements on your homescreen/lockscreen(like clock, widgets, signal and wifi icons, etc.) and align the ones that are not already aligned simply by dragging/moving them. You can zoom in for better precision.
After the alignment of the labels and boxes has been done, you can turn off the visibility of the screenshot layer.
Now coming to the background: I have supplied 2 blueprint backgrounds - one is blue(just like the one MKBHD posted) and the other is purple(which I made for myself). You can choose any 1 from the 2. Now turn on the visibility of the blueprint that you have chosen and your editing is complete!
STEP 3: Exporting the wallpaper
Now comes the most easy yet awaited part: saving your work! Just choose "Quick export as PNG" in the file menu and transfer the saved image to your device. You can now set it as your wallpaper and enjoy!
Please give a "Thanks" if it helped you and share!
shreyamt said:
MKBHD posted a very cool wallpaper for the iPhone 7 which had a graph background with labels for everything like Signal, battery, etc. which you can check out here:
https://twitter.com/MKBHD/status/837...096129538?s=09
I wanted a similar wallpaper but for Android and after hours of searching, couldn't find one. So I made my own
Now since Android is very customizable, it is virtually impossible to make a universal wallpaper for all android phones. Therefore this guide so that everyone can make that wallpaper for their phone themselves!
Note: Some basic Photoshop skills will be required which I will not be explaining in this guide.
STEP 1: Downloading the .PSD files
I have uploaded 2 files, one for the homescreen and one for the lockscreen. You can download both if you wish to at any one of them.
Homescreen - https://drive.google.com/open?id=0B2XbBDw3Myp5WG5uSF8yUlRmZHM
Lockscreen - https://drive.google.com/open?id=0B2XbBDw3Myp5bE8tNExhaU9uaDA
STEP 2: Placement of screenshot and blueprint background
This is the main step.
Take a screenshot of your current homescreen and/or lockscreen with your current wallpaper and embed it in the respective .PSD files(as a new layer). Now place the screenshot at the bottom of all the layers. Make sure that the visibility of both the blueprint backgrounds (coming to that later) is turned off. At this stage, you can see which of the boxes an labels are aligned with the elements on your homescreen/lockscreen(like clock, widgets, signal and wifi icons, etc.) and align the ones that are not already aligned simply by dragging/moving them. You can zoom in for better precision.
After the alignment of the labels and boxes has been done, you can turn off the visibility of the screenshot layer.
Now coming to the background: I have supplied 2 blueprint backgrounds - one is blue(just like the one MKBHD posted) and the other is purple(which I made for myself). You can choose any 1 from the 2. Now turn on the visibility of the blueprint that you have chosen and your editing is complete!
STEP 3: Exporting the wallpaper
Now comes the most easy yet awaited part: saving your work! Just choose "Quick export as PNG" in the file menu and transfer the saved image to your device. You can now set it as your wallpaper and enjoy!
Please give a "Thanks" if it helped you and share!
Click to expand...
Click to collapse
Right on man! I'm gonna try it out now. Will update afterwards..
Any screen shots??
Still_living714 said:
Any screen shots??
Click to expand...
Click to collapse
You can find the screenshots in my original post over here:
https://forum.xda-developers.com/nexus-6p/themes-apps/wallpaper-mkbhd-iphone-graph-style-t3581583