Shop Mobile More Submit  Join Login

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
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
:iconavo-gsy:
AVO-GSY 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
:iconcyphervisor:
CypherVisor Featured By Owner Jan 4, 2014
Nice tut!
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jan 4, 2014
Thank you!
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Jan 14, 2014
:)
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Jan 4, 2014
Awesome! Do need to try this sometime. :D
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jan 4, 2014
I hope so! Will explain more about how to start with the coming articles :la:
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Jan 4, 2014
Look forward to reading them~ :eager:
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Jan 4, 2014
Is that you? :sherlock:
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Jan 4, 2014
No, it's my evil twin. :eyes:
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Jan 14, 2014
lol :P
Reply
:iconrotane:
rotane Featured By Owner Jan 3, 2014   General Artist
Instead of sharing my favourite style, i'll share something new – my "master tool", so to speak. In order to spy on elements on a page, i use neither Firebug nor the built-in inspector, i use a simple bookmarklet: MODI – Mouseover DOM Inspector.
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jan 4, 2014
Well that's nice to share as well! :D
Reply
:iconrotane:
rotane Featured By Owner Jan 4, 2014   General Artist
Thought so ;P
Reply
:iconmiontre:
miontre Featured By Owner Jan 3, 2014  Hobbyist Photographer
"The only harm it can do is to burn your eyes, because someone created a really bad style." :lmao:

Awesome article! :la: :D

:whisper: By the way, not sure if you already know; but Chrome users can right-click and select "Inspect Element" to get the infos
Reply
:iconjerrekedb:
Jerrekedb Featured By Owner Jan 4, 2014
"Whisper sweet nothings in my ear! By the way, not sure if you already know; but Chrome users can right-click and select "Inspect Element" to get the infos"
That goes for firefox users too.
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jan 4, 2014
It's the sad truth! :shifty:

Thanks!
Oh, i bet there are billion other things you can use. What you mentioned should be the built-in inspector then. I randomly use Chrome for browsing, but not for coding, so i never really tried that. And i was kinda lazy to really figure out what browser has what features or add-ons. Especially as i will only focus on and work with firebug for this series D:
Reply
:iconneurotype:
neurotype Featured By Owner Jan 4, 2014  Hobbyist General Artist
The Chrome one is really good!
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jan 4, 2014
maybe i will give it a try one day :nod:
Reply
:iconneurotype:
neurotype Featured By Owner Jan 4, 2014  Hobbyist General Artist
:la: Seriously, I forgot half the tags but just used it...it lets you turn off CSS on the element!
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jan 5, 2014
Oh you can do that with Firebug as well. Also line per line, to see what other elements might get affected by certain values etc :nod:
All those features are really handy, couldn't live without them anymore!
Reply
:iconneurotype:
neurotype Featured By Owner Jan 5, 2014  Hobbyist General Artist
Oh yeah, totally :nod: haha, I need to try that for userstyles, actually. I bet it would be really convenient.
Reply
:iconmagical525:
Magical525 Featured By Owner Jan 4, 2014  Hobbyist Artisan Crafter
Firebug :heart:
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jan 4, 2014
:D
Reply
:iconmafiavamp:
MafiaVamp Featured By Owner Jan 3, 2014
Ooh, das klang schonmal sehr interessant und ist ne super Einführung in das Thema! :happybounce:
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jan 4, 2014
Freut mich zu hören :dance:
Reply
:iconboregarde:
boregarde Featured By Owner Jan 3, 2014
thanks for that
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jan 3, 2014
:aww:
Reply
:iconkrissi001:
Krissi001 Featured By Owner Jan 3, 2014
:thumbsup: :happybounce:
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jan 3, 2014
:bow:
Reply
:icondrache-lehre:
Drache-Lehre Featured By Owner Jan 3, 2014  Hobbyist General Artist
This was/is very informative to read. I learned quite a bit with this, thank you so very much for taking the time to organize and share this with us!! :happybounce:
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jan 3, 2014
Good to know!
I just hope i won't lose motivation doing this. This one was rather easy to write down, but i have no idea how messy/difficult future articles will be :lol:
Reply
:icondrache-lehre:
Drache-Lehre Featured By Owner Jan 5, 2014  Hobbyist General Artist
Well if the desire is lost to do it, then so be it. Don't want you forcing yourself to do it, that sorta defeats the purpose of enjoying it being shared I think. :lol: But I am sure there are folks who will/do enjoy it WHILE you have the time and still desire to make these. :lol:
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jan 6, 2014
It's not like i don't want to go on with this, but i always need to be in the right mood to start babbling about such things. Which is why i don't make these regulary. That would put too much pressure on me and i would hate that. :B
Reply
:icondrache-lehre:
Drache-Lehre Featured By Owner Jan 6, 2014  Hobbyist General Artist
I understand that. I am the same way when it comes to handling group stuff (I Know that is minor compared to yours) but still, if the mood isn't there and I try to force it. It ain't pretty. Well we don't want you being pressured either. Maybe if you set some sort of schedule to try to do these but not often would help? Like maybe 1 or twice a month? Give you time to also maybe work on it little at a time? I dunno but you'll figure out what works best for you if you want to continue it. :aww:
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jan 7, 2014
I hate schedules - no matter for what D:
But i will work on this for sure, so don't worry about it. I want more people to create UserStyles or do understand what it is about, so i just have to go on :giggle:
Reply
:icondrache-lehre:
Drache-Lehre Featured By Owner Jan 7, 2014  Hobbyist General Artist
:headsmash: Well I give up then, lol! And I am not worried at all, you do or don't, I will be fine either way. ;)
Reply
:iconkyusune:
kyusune Featured By Owner Jan 3, 2014  Hobbyist Digital Artist
Thank you for making this <3

I've always been a big fan of UserScripts but my knowledge about them is very general if u do say so myself.

My favorite script has to be - dediggefedde.deviantart.com/ar…

It's very handy when it comes to submitting artwork to the myriad of groups I am in, and I actually look forward to putting my artwork in said groups namely because I don't have to return to my page to scan through it - since it takes too much time.


Reply
:iconginkgografix:
ginkgografix Featured By Owner Jan 3, 2014
Styles and Scripts are two completely different things. The one you linked to is a script, which is usually done via javascript and not CSS. So that doesn't belong here.
Reply
:iconelectricjonny:
electricjonny Featured By Owner Jan 3, 2014  Hobbyist Photographer
Back in the early days, the userstyles.org site would let you install skins via a style.user.js script for people without Stylish (and I'd guess Chrome users, before Stylish for Chrome).  Although as you know, there's a bit of a pause before the style would kick in with the script.

Anywho, great article :)  I still need to do a vid tutorial on a simple inspect with firebug and modify with Stylish, just to show how simple it actually is.  The only part I'm not clear on is if styles written for Stylish for Firefox needs to be different in other browsers.  Of course the -moz-/-webkit-/-o- prefixes would need to be updated for unofficial properties, but it's the things like:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("deviantart.com") {
That get me wondering if they work across browsers.
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jan 4, 2014
Well  now would totally be the right time to do such a video tutorial, don't you think? :eyes:

I figured out that userstyles.org does this work for you. My styles are always done for FF (as that @-moz stuff will be added automatically when i write one "for this site" etc), but when i install it with Chrome it is not there anymore. Pretty handy if you ask me, so you don't have to worry about that.
Reply
:iconelectricjonny:
electricjonny Featured By Owner Jan 4, 2014  Hobbyist Photographer
Ah that's cool.  I've always preferred how Firefox works with styles, with the @-moz-document domain/url/url-prefix/regex (I should really do a tutorial on @-moz-document regex (), just never done that before :slow:).  Chrome's method of adding in or excluding specific sites based on the edit page for the style just seems kludgy.
Reply
Add a Comment:
 
×

:iconginkgografix: More from ginkgografix


Featured in Collections

News and journals by Anoya

Community Journals by SimplySilent


More from DeviantArt



Details

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

Stats

Views
2,631 (1 today)
Favourites
57 (who?)
Comments
58
×