Deviant Login Shop  Join deviantART for FREE Take the Tour
×

:iconginkgografix: More from ginkgografix


More from deviantART



Details

Submitted on
January 3
Submitted with
Sta.sh Writer
Link
Thumb

Stats

Views
1,861 (4 today)
Favourites
53 (who?)
Comments
58
×

UserStyles: Lesson I

Fri Jan 3, 2014, 11:24 AM
Because there is so much interest in UserStyles but not enough people who actually work on such or know how to create them, this little tutorial series will try to change that. It will start with the basics, will explain all the things you need to know and will also give you little tasks, you can do, to become more involved.



What is a 'UserStyle'?


When we go to the User Style category it is not quite clear what a User Style really is. Buried under the massive amount of miscats there are only a few right deviations.
Opposite to what the name might suggests it is not about the style of a certain user. It does not mean that the category can be used to show the world how much you improved, the way you dress, the way you draw or anything else like that.

A UserStyle is pure CSS code and only that. Nothing more, nothing less.
It is called like that because it is a style that changes the appearance of a website for the person using it - the user. So basically the name is really self-explanatory, but of course leaves enough room for misinterpreation.

If there is no CSS code, you can be sure it is no UserStyle and should go to a different category within deviantART. If there is CSS and HTML code it is no UserStyle either. Most likely you have coded a journal or gallery skin then, which should also go to a different category.

A UserStyle can be simple like just one line of code or it can be rather complex with hundreds of lines of code. No matter what, it still qualifies as such.
Additionally and what has been mentioned before using such a style will only change the way something looks like for the person using it. No one else will see it. Also contrary to some rumors it will not install any viruses, damage your system or can do any harm to your computer, sensible data etc.
The only harm it can do is to burn your eyes, because someone created a really bad style.

:note: A UserStyle will always only change optical things. It can change colors, add or remove images, hide elements of websites etc but nothing else.

Examples:

Condensed deviantART Comments by danlev Translucent Userpage Buttons by electricjonny IMPORTANT UPDATE - dAmn Theme by Norke  deviantN0NNAKED v7 by rotane Style: dA Symbols by ginkgografix dA User Shoutbox V6.1 by AimanStudio Project: BlueGreen by NyssaCreative
User Style: Fade Signature Emoticons by namenotrequired <da:thumb id="404649173"/> Better Literature Display - limited width by neurotype

:pointr: Because of newer dA versions not all of these might work right.



And what is 'Stylish'? Or userstyles.org?


Stylish is a free add-on for your browser that will manage all your styles, created on your own or by others. It is availabe for Firefox, Chrome, Opera and Safari, but not supported by Internet Explorer (and maybe other browsers).

Stylish 1 by ginkgografix   Stylish 2 by ginkgografix


userstyles.org is a website that was created to make sharing and installing of UserStyles easier. Styles from that site can be used after one click on a big green button. Nothing more needs to be done as it will be applied to the right site directly (if done correct).

Some userstyles.org accounts:
ginkgografix :pointr: userstyles.org/users/226336
rotane :pointr: userstyles.org/users/1485
miontre :pointr: userstyles.org/users/175086

Or use the search for much more styles to adjust dA :pointr: userstyles.org/styles/browse/d…



Nothing more?


Well basically that is all you need to get started. But of course there is more to make things a bit easier for you.
In order to be able to adjust things of a certain website to your liking you need to know the structure and the classes you want to work with. Whenever you create a UserStyle you can just work with what is already there, you can not add any additional content (except for background images or making use of :before and :after).

There are two ways of exploring the source code. Either you go through the source code via "right click > show source code" or you make use of an add-ons like Firebug for Firefox or Firebug lite for Chrome.
These often allow you to live edit the code, that way you can test changes before you really apply them. This saves a lot of time as you don't need to refresh the previews/sites all the time.

Firebug by ginkgografix

They also highlight the fragments you are exploring within the Firebug interface and also show you the related CSS classes when you select the single celements. That way you can quickly find out about backgrounds, colors, spacing and other things without studying the entire source code.


Modern browsers also have built-in features that are similar, here it is just a personal preference choice of how you like to work or wich is more handy for you.

Browser by ginkgografix
Example for Firefox




Task: Share your favourite UserStyles


Your first task is simple like that, just share the UserStyles you like the most with us!

Do you prefer complex ones that adjust a lot of dA elements, maybe even change the entire look or do you prefer those that make smaller adjustments here and there?

:note: A feature of working UserStyles will follow, so make sure to add your own styles or the ones of others here!






Next lesson:
- Adding, deleting, modifying UserStyles
- Creating a first simple UserStyle

Make sure to have Stylish and Firebug (or similar) installed until then, if you want to create a style as well.


- - - - - - - - - - - -
The journals will not be published regulary.


You are always welcome to suggest topics that should be covered in the future though. Whenever there are questions arising that are related to a lesson, please comment directly on that specific journal. That way other people with the same or similar problems/questions can look up the answers/solutions as well.


User Styles: Lesson I
User Styles: Lesson II

---

:pointr: Browse the UserStyles gallery (at your own risk!)

Groups you can submit your UserStyles to
eCSSited  |  iterators :bulletwhite:  |  deviantART-Related
Add a Comment:
 
:iconrooky16:
Rooky16 Featured By Owner Jun 11, 2014  Student General Artist
:baffled:  Still don't understand :( Sorry
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jun 12, 2014
It's not easy to understand for everybody, no worries.
Reply
:iconrooky16:
Rooky16 Featured By Owner Jun 12, 2014  Student General Artist
Thanks 5 seconds hug 

grumpy worker - now a PLZ I'm not very goood with thechnologies even if I'm young (18)
And english is my second language (even if I understand a lot) Shrug 
Reply
:iconyuom:
Yuom Featured By Owner Apr 7, 2014  Student Digital Artist
You're a big help!!Hiyori Asahina (Joy) [V1] 
Reply
:iconginkgografix:
ginkgografix Featured By Owner Apr 7, 2014
:aww:
Reply
:iconsir-herp:
Sir-Herp Featured By Owner Jan 5, 2014  Student General Artist
I had no idea these even existed! Thanks for taking the time to put this together. :la:
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jan 5, 2014
My pleasure! :aww:
Reply
:iconworldwar-tori:
WorldWar-Tori Featured By Owner Jan 4, 2014   General Artist
Awesome! Thank you so much for this.
Let's face it, without you I'd have no idea about css or how anything works :no:
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jan 5, 2014
That's why i am here :dummy: :D
Reply
:iconworldwar-tori:
WorldWar-Tori Featured By Owner Jan 5, 2014   General Artist
...and why I :heart: you!
Reply
Add a Comment: