Shop Mobile More Submit  Join Login

CSS Did You Know? - May 2nd, 2013

Thu May 2, 2013, 4:20 AM

{

CSS Did You Know?

}


Volume 9


:iconcss-dyk:

Welcome

CSS can be difficult when you're unfamiliar to it. So that's why we're writing these articles! If you have any suggestions or would like to write a section in future CSS Did You Know? articles, please note CSS-DYK. :)

Inside

dA Embedded Deviations and Videos Styled by GillianIvy
Author selector by im-not-sana





:icongillianivy:

dA Embedded Deviations and Videos Styled



What Am I Talking About?

What is the difference between an embedded deviation and a deviant thumb?  Glad you asked.  The thumbs have the codes everyone already knows and loves.  And if you don't know what I'm on about, then look on the sidebar of your deviation and you will find your thumbcode.  These codes can be used in journals, widgets and artist descriptions to link a thumbnail of the deviation.
Thumbcode by GillianIvyGrau Valentinsdag by GillianIvy

That gives us a regular thumb size.  Most CSS coders know how to style these already, and there are several tutorials all over the place for that.  Check the galleries of some of the major CSS groups: eCSSited, deviantCSS, CSS-Babes, journalcss...   And :bigthumb#: works with the same CSS.  However, the embedded deviation, which instead of making a standard thumb size, you can size however you like has a different CSS code.  I used to make a separate div to be a container for these big thumbs, but that can be a lot of extra code for the user.  And if they aren't very good at HTML they might not want to use your skin.

So, let's try the same thumb code again, but put it into an embed code (if you submit the journal via Sta.sh this code is automatically generated)
Embed Thumb by GillianIvy
Grau Valentinsdag by GillianIvy


There is also embedded literature deviations and embedded video.  Lits are coded exactly the same, where you take the numbers only from the thumb and set that as the ID value.  The profile can be youtube|vimeo|film and the id is the code for each of those.  Either thumbcode fo dA film or the url code's unique identifier.
Video Code by GillianIvy


How to Code the dA Embed

Okay, the moment you have all been waiting for, the codes to make these big beautiful images bigger and beautiful-er.   Uh huh.

.embedded-deviation{}
Container for the Embedded Deviation (image or lit)
.embedded-image-deviation img{}
The image itself.  Using both of these makes it so you can make a box and a style for the image.
.daembed{}
iframe{}
Both of these will effect Youtube and dAfilm.  .daembed{} does not work on dAfilm, iframe does.  I have not yet tested for Vimeo, but the iframe should work at the very least.
.embedded-deviation-overlay{}
.embedded-freeform-deviation{}
This is for the lit embedded deviation.  I have not yet tested how these work, looking at the code, it looks like they are both the same section.  Be advised, iframe is also in the code for the literature embed so may effect both the videos and the literatures.  You may need to do a cancel out if there are problems.  (So, .embedded-deviation iframe{} might work.)

I've only recently started testing these and will continue to do so.  I am keeping a blank template updated with all the codes I find and what they are for in my GoogleDrive files.  Which I do permit anyone to have a look.  If anyone wants to give me feedback and test these with me, I'd very much like to discuss.  Using these will end the need to add an extra container div just for those elements.  You can code them all to look like a regular thumb style, or code them to look like special boxes or frames.





:iconim-not-sana:

Author Selector



To all the CSSecksy people out there, don't you find it a tad bit annoying when you read articles posted through groups, and you can't tell who wrote the blog? Or don't you find it annoying having to manually code in usernames at the top for convenience? Well, there's actually an easy way to do this! Back when gruze was the default skin to publish journals, group blogs had an .author{} selector that displayed the author's username in the .gr-top{} right after the date. So now we can use this to our benefit and code it into our skins for our convenience :) I'll show you how, it's very simple really. Just add .gr-top .author{} into your CSS and it will automatically place by username into your skin and you can style it however you want!



will become



Example:


/* styles "by" */
.gr-top .author {
color: #666666;
}

/* styles username */
.gr-top .author a{
color: #4DB2FB;
}

/* styles username on hover */
.gr-top .author a:hover {
color: #BBE2FF;
}

Output:




The 9th instalment of CSS Did You Know? Learn about styling embedded deviations and videos as well as the .author{} selector.
Add a Comment:
 
:iconmelikebat:
MelikeBAt Featured By Owner Apr 23, 2014  Hobbyist Traditional Artist
This was very useful to me. I was struggling to find out how to style author.
Helped a lot. Thank you. :)
Reply
:iconstojan44:
stojan44 Featured By Owner May 4, 2013
wtf is CSS? counter strike source?
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 4, 2013  Hobbyist General Artist
:lol: Nah it stands for "Cascading Style Sheets" which is basically a computer language used to style websites and blogs etc. that use HTML :)
Reply
:iconjustmango:
justMANGO Featured By Owner May 3, 2013  Hobbyist General Artist
I learn something new every day. :lol: Great article! Saved.
Reply
:iconiridescentstardust:
IridescentStardust Featured By Owner May 2, 2013  Hobbyist General Artist
IT'S LIKE YOU'RE WARPING THE LAWS OF PHYSICS
:heart: amazing article as always ;_; I can't wait for the next issue~
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 4, 2013  Hobbyist General Artist
:lol:

dArwinz theory of DEVolution :la:
Reply
:iconiridescentstardust:
IridescentStardust Featured By Owner May 4, 2013  Hobbyist General Artist
:iconheaddeskplz: Okay that was good XDD
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 4, 2013  Hobbyist General Artist
psh, that was so corny :giggle:

totally got an idea for an emote now :lol:
Reply
:iconiridescentstardust:
IridescentStardust Featured By Owner May 4, 2013  Hobbyist General Artist
Is it a fella-monkey? :shifty:
Cause that might be cute :plotting:
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 4, 2013  Hobbyist General Artist
Something like that :D
Reply
:iconlablayers:
LabLayers Featured By Owner May 2, 2013  Student Interface Designer
Thanks for the tips! :la:
Reply
:iconsimplysilent:
SimplySilent Featured By Owner May 2, 2013
Ooh, that .author {} looks very useful! :D Thanks for sharing. :heart:
Reply
:iconiamoret:
iAmoret Featured By Owner May 2, 2013  Hobbyist Photographer
:iconlovesqueeplz:
Reply
:iconjonarific:
jonarific Featured By Owner May 2, 2013   Interface Designer
The author trick is pretty helpful indeed! Great articles! :thumbsup:
Reply
:iconneurotype:
neurotype Featured By Owner May 2, 2013  Hobbyist General Artist
Ooo did not realize .author could auto-generate :dance:

Also `GillianIvy - let me know if you have any luck with the lit thumbs! :love:
Reply
:icongillianivy:
GillianIvy Featured By Owner May 2, 2013  Hobbyist General Artist
Just coding the outer framework, the inner in't going to change. Maybe in a Userstyle, hint hint hint.
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 2, 2013  Hobbyist General Artist
You two on about embedded Lit thumbs? Been at it for a few days now trying to style the inner part with no result :grump:

</nosy> :paranoid:
Reply
:icongillianivy:
GillianIvy Featured By Owner May 3, 2013  Hobbyist General Artist
Yup, we've been discussing these back and forth. We randomly take over threads.
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 3, 2013  Hobbyist General Artist
haha its all good! let me know if you make a break-through with them!
Reply
:iconneurotype:
neurotype Featured By Owner May 2, 2013  Hobbyist General Artist
Alright, that is what I ended up with. :B

Eh, userstyles are nice for one's own page, but it won't affect the journal for everyone. Boo.
Reply
:icongillianivy:
GillianIvy Featured By Owner May 2, 2013  Hobbyist General Artist
Yeah but you can make them all look like Dean.
Reply
:iconneurotype:
neurotype Featured By Owner May 2, 2013  Hobbyist General Artist
Oh shit, that is really tempting.
Reply
:icongillianivy:
GillianIvy Featured By Owner May 3, 2013  Hobbyist General Artist
I just had a brilliant idea, remember Ginkgo's pink llama badge? We need a Dean badge :giggle:! Just his 'pudding face'.
Reply
:iconneurotype:
neurotype Featured By Owner May 3, 2013  Hobbyist General Artist
Yesplease :eager:
Reply
:icongillianivy:
GillianIvy Featured By Owner May 2, 2013  Hobbyist General Artist
Updated my Blank Template to reflect author tag and comments, etc: [link]
Reply
:iconkovowolf:
KovoWolf Featured By Owner May 2, 2013  Professional General Artist
Excellent! <3 Would love to see some different ways to style the lit thumb :)
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 2, 2013  Hobbyist General Artist
working on it! :eager:
Reply
:iconkovowolf:
KovoWolf Featured By Owner May 2, 2013  Professional General Artist
:la:
Reply
:icongillianivy:
GillianIvy Featured By Owner May 2, 2013  Hobbyist General Artist
I had forgotten about .author as I rarely used it. I think when I did I was trying to do something a bit different. Which I had to fake it instead. :B I didn't realize the author part was automatically generated. Adding to my template! ;D The more you know :woohoo:
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 2, 2013  Hobbyist General Artist
Haha glad I could help :D I just had a look through your template on Google Docs.. nice collection! learned a few things myself :highfive:
Reply
:icongillianivy:
GillianIvy Featured By Owner May 2, 2013  Hobbyist General Artist
Thanks. I love the Google Drive thing. It is amazing for doing my commissions. I make a whole help document with table of contents and everything ;D
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 2, 2013  Hobbyist General Artist
Gotta love Google's free services! Will definitely be using that for commissions now :D
Reply
:icongillianivy:
GillianIvy Featured By Owner May 3, 2013  Hobbyist General Artist
Also it makes a PDF file of it, so you'd be able to submit PDFs. I thought that was pretty nifty. Haven't used it yet on dA though.
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 4, 2013  Hobbyist General Artist
I would usually use pastebin or evernote for sending codes but this is definitely much more convenient since you can add sidenotes to explain the code :nod: Thanks for the tip!
Reply
:icongillianivy:
GillianIvy Featured By Owner May 4, 2013  Hobbyist General Artist
;D
Reply
:iconphoenixleo:
phoenixleo Featured By Owner May 2, 2013
To sum up every CSS Did You Know? answer, it's a No for me. :lol:

What do you mean by Author by `im-not-sana ?
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 2, 2013  Hobbyist General Artist
Should be "Author Selector" by `im-not-sana silly! :giggle:
Reply
:iconartbycher:
ArtByCher Featured By Owner May 2, 2013   Traditional Artist
Great article!
Reply
:iconastrikos:
Astrikos Featured By Owner May 2, 2013   General Artist
Wonderful article!
Reply
:iconmiontre:
miontre Featured By Owner May 2, 2013  Hobbyist Photographer
Awesome! :la:

@ `im-not-sana: does this work for personal journals too, or just group ones? :)
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 2, 2013  Hobbyist General Artist
All journals/articles :)
Reply
:iconmiontre:
miontre Featured By Owner May 2, 2013  Hobbyist Photographer
That's awesome! Thanks. :)
Is there any way to get the avatar too? I notice that on the commercial skins dA makes (the Blackberry sponsored ones), they have the avatar come up?
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 2, 2013  Hobbyist General Artist
Yep, I'll be covering that in the next article! :eager:
Reply
:iconmiontre:
miontre Featured By Owner May 2, 2013  Hobbyist Photographer
Ohh Sana, that's incredible! :eager: :la:
And I'm guessing there'll be a way to get the category to come up also?
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 3, 2013  Hobbyist General Artist
:no: seems not, that's the issue I've been having, why I didn't add it into this article as initially planned but I'll keep at it u ntil the next article :)
Reply
:iconmiontre:
miontre Featured By Owner May 10, 2013  Hobbyist Photographer
:hmm: Strange! I was beginning to think you'd be able to get all that stuff. Maybe it's just waiting to be discovered, who knows... :la:
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 11, 2013  Hobbyist General Artist
OMG I'm so dumb sometimes! :slow: I did figure it out ages ago, but couldn't get it to preview in my sta.sh, and I realized it was simply because the journal category isn't even chosen until you submit to dA! :lol:

I wonder if I should still do an article on it? :shrug: It's different from .author .avatar though.. Btw, you figured out the avatar one on your own? :D
Reply
(1 Reply)
:icongillianivy:
GillianIvy Featured By Owner May 3, 2013  Hobbyist General Artist
That was what I had tried before but had faked instead. Maybe I was overthinking it? I'll have to look into it again. I did that on my "dA Neuvo" skin when I was playing with before and after. You're welcomed to poke around at it to see if you can make it work without the pseudo elements.
Reply
:iconmiontre:
miontre Featured By Owner May 10, 2013  Hobbyist Photographer
Thank you! :) I'll have a poke around later, will let you know if I come up with anything :D
Reply
:icongillianivy:
GillianIvy Featured By Owner May 10, 2013  Hobbyist General Artist
:salute:
Reply
Add a Comment:
 
×

:iconbradleysays: More from bradleysays


Featured in Collections

CSS Tips by poserfan


More from DeviantArt



Details

Submitted on
May 2, 2013
Submitted with
Sta.sh Writer
Link
Thumb

Stats

Views
7,483 (2 today)
Favourites
102 (who?)
Comments
53
×