Shop Mobile More Submit  Join Login

CSS Did You Know? - May 9th, 2013

Thu May 9, 2013, 5:28 PM

{

CSS Did You Know?

}


Volume 10


: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

Author Avatar by im-not-sana
Utilizing the Header and Footer Sections by GillianIvy


:iconim-not-sana:

Author Avatar



Hey again Devious CSSkinners! So last article I mentioned how to add and style the .author{} selector. This article, I'll tell you how you can add an author's avatar into your journals that the gruze skin will automatically generate! Initially, I was going for a more difficult approach (which is why I separated the two articles) but I figured out a MUCH simpler way to code in the avatars! :eager:

CSS


.gr-top .author{}

.gr-top .author .avatar {
display: inline!important;
}


Basically, dA has set the .avatar{} display value to none, so we need to override that. After you've done that, you'll notice the avatar is at its original size and cropped off to the side. So you'll need to change it's position, width & height.

EXAMPLE


.gr-top .author{}

.gr-top .author .avatar {
display: inline!important;
width: 25px;
height: 25px;
top: 20px;
left: 48px;
}


RESULT




Quick Tip by miontre: if you add position: static; the avatar will revert to its original position, next to the username!

That's just the most basic styling I've done to accommodate my own journal skin, now you can get creative with whatever property and values you like to match your CSS! If anyone has made any skins using the .author{} and .avatar{} selectors, link theme here! I'd like to see what you've all come up with :) Happy coding! :la:


:icongillianivy:

Utilizing Header and Footer Sections



If you have content you wish to have saved on your skin for every journal post, the best place to save it is in the Header and Footer sections. Typically a good place for links, menus, credits.... But can also be used to make a separate container.

Header by GillianIvy Footer by GillianIvy

Whatever by GillianIvy End by GillianIvy

Example by GillianIvy


It can have whatever you want, text, links, images.  This might be a good spot for an image you want to easily be able to edit.  Instead of putting in the code.  Which would be easier for the user as well.  That way they can customize the skin with out needing to dig through the CSS.

With Preview by GillianIvy


Say you would like to have the text area a different color than your header and your footer, but .text controls all three.  So you make a custom box to go inside your journal input.  Which resolves the issue.  However, you don't want people to forget these in their journal and have the section messed up.  So, open the tag in the header...  Then close the tag in your footer.  And Save.  Now, it is saved into the skin for each use.  No extra code for the user to have to remember.

Text Container by GillianIvy


CSS Tips

Do note that because of the line breaks between the header/footer and the journal input area that it looks like you have extra padding.  Just remove it, in this case, padding:0 20px;
<p>Paragraphp> will not work well for this.
Blanks or blueprints of code HTML can be stored here for easy cut & paste, however many people will forget to edit it out and will have a random snippet on their journal instead.


Add a Comment:
 
:icondianagrigore:
DianaGrigore Featured By Owner May 16, 2013
:clap:
Reply
:iconikue:
Ikue Featured By Owner May 11, 2013  Hobbyist Digital Artist
ALL THE KNOWLEDGE! :iconallthethingsplz:
Reply
:iconminato-kushina:
Minato-Kushina Featured By Owner May 11, 2013
So useful info! Thanks a lot for sharing! :love: :hug:
Reply
:icongillianivy:
GillianIvy Featured By Owner May 10, 2013  Hobbyist General Artist
:D Glad people are enjoying this series. Eager for more! I'll have to get back to writing more tidbits, looks like you'll be needing more soon ;D
Reply
:icondevildjmachine:
DevilDJMachine Featured By Owner May 10, 2013  Hobbyist
waah, thought CSS meant Counter Strike Source.
Reply
:iconzesler:
zesler Featured By Owner May 10, 2013  Student Digital Artist
That is one awesome guide.
Reply
:icontarynnefdt:
TarynNefdt Featured By Owner May 10, 2013   Digital Artist
Great work
Reply
:iconvanmall:
vanmall Featured By Owner May 10, 2013  Hobbyist Digital Artist
Awesome article! :clap:
Reply
:iconmiontre:
miontre Featured By Owner May 9, 2013  Hobbyist Photographer
And great article people! :)
Reply
:iconmiontre:
miontre Featured By Owner May 9, 2013  Hobbyist Photographer
Quick tip that you might want to get Bradley to update, Sana:

If you add position: static;, it will revert to it's normal position without the need for you to position it manually! :)
Reply
:icongillianivy:
GillianIvy Featured By Owner May 10, 2013  Hobbyist General Artist
Oooooo hahaha.
Reply
:iconmiontre:
miontre Featured By Owner May 10, 2013  Hobbyist Photographer
:giggle: :iconwooooplz:
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 10, 2013  Hobbyist General Artist
Thanks for the tip :dummy:
Reply
:iconginkgografix:
ginkgografix Featured By Owner May 9, 2013
I always thought that people knew abou the 'saving'-characteristics of Skin Header and Footer, but seems like it is really not common knowledge. Guess most people will love to get to know that!

The thing about the avatar and the author was new for me. Good to know and very handy if needed for a skin.

Great article as always, even though i don't always leave a comment :blush:
Reply
:icongillianivy:
GillianIvy Featured By Owner May 10, 2013  Hobbyist General Artist
:huggle: Always good to reiterate the basics, somebody might find it new.
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 9, 2013  Hobbyist General Artist
Ooh that's a nifty trick using the header and footer to style the content :nod: thanks! :#1:
Reply
:iconsimplysilent:
SimplySilent Featured By Owner May 9, 2013
:eager: Can't wait to try out that author avatar in a new journal :la:

Thanks for another great article! :tighthug:
Reply
:iconastrikos:
Astrikos Featured By Owner May 9, 2013   General Artist
:la: Oh how awesome! I've wanted to learn how to do that. :w00t:
Reply
:iconneurotype:
neurotype Featured By Owner May 9, 2013  Hobbyist General Artist
Author avatar :omfg:

And yeah header/footer is so useful...especially for credits! (I've found that as soon as you save your own version even if it's just a modified header/footer, the skin loses the original credits.)
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 9, 2013  Hobbyist General Artist
ohh wait you mean "Save As" as opposed to just "Save".. hmm :hmm:
Reply
:iconneurotype:
neurotype Featured By Owner May 9, 2013  Hobbyist General Artist
yeah that :nod:
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 9, 2013  Hobbyist General Artist
I thought it said Skin by ^neurotype (Modified by `im-not-sana) when someone edits an installable :noes:
Reply
:iconneurotype:
neurotype Featured By Owner May 9, 2013  Hobbyist General Artist
It does, but as you already posted that only happens if you Save :P
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 10, 2013  Hobbyist General Artist
They shouldn't be Saving As anyway :paranoid:
Reply
:iconneurotype:
neurotype Featured By Owner May 10, 2013  Hobbyist General Artist
I've had to before, because if you save it overwrites past versions of the skin :B
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 10, 2013  Hobbyist General Artist
Ah yeah, that's true.. :shifty:

Well, as long as the credits are placed subtly, I don't mind. I personally wouldn't code them in too obvious BAM IN YOUR FACE! as I find it a bit off-putting myself :shrug:
Reply
:iconneurotype:
neurotype Featured By Owner May 10, 2013  Hobbyist General Artist
:nod: Absolutely. I don't think I've seen anything where they were terrible, either.
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 11, 2013  Hobbyist General Artist
weell... :paranoid: guess it's personal preference really :shrug:
Reply
(1 Reply)
Add a Comment:
 
×

:iconbradleysays: More from bradleysays


Featured in Collections

CSS Tips by poserfan


More from DeviantArt



Details

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

Stats

Views
9,448
Favourites
89 (who?)
Comments
28
×