HOME | DD

gillianivyart — Project Educate: User Friendly Journal Skinning
Published: 2013-03-29 16:44:49 +0000 UTC; Views: 8327; Favourites: 144; Downloads: 0
Redirect to original
Description body div#devskin9516361 .gr-box { overflow:visible; background:transparent; margin:190px auto 0px auto; position:relative; padding:0px 10px 10px 10px; } body div#devskin9516361 .gr-top { display:none; } body div#devskin9516361 .gr-top .gr { display:none; } body div#devskin9516361 .gr-top h2 img { display:none; } body div#devskin9516361 .gr-top h2 { display:none; } body div#devskin9516361 .gr-body { background:#dae4d9 url(https://fc06.deviantart.net/fs71/o/2013/024/2/b/350289350_646739_322748439_464982_bggrad.png) 0px 0px repeat-x; border:1px solid #a6b2a6; overflow:visible; color:#5d625d; line-height:20px; padding:30px 0px 0px 0px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; box-shadow:0px 1px 5px #8c9688; -moz-box-shadow:0px 1px 5px #8c9688; -webkit-box-shadow:0px 1px 5px #8c9688; box-shadow:0px 1px 5px #8c9688; -moz-box-shadow:0px 1px 5px #8c9688; -webkit-box-shadow:0px 1px 5px #8c9688; } body div#devskin9516361 .gr { background:transparent; border:none; } body div#devskin9516361 .gr-body .gr { padding:0px 20px 0px 20px; } body div#devskin9516361 .gr-body .gr .text { padding:10px 0px 0px 0px; } body div#devskin9516361 i.tri { display:none; } body div#devskin9516361 i.gr1 { display:none; } body div#devskin9516361 i.gr2 { display:none; } body div#devskin9516361 i.gr3 { display:none; } body div#devskin9516361 i.gb { display:none; } body div#devskin9516361 .top { position:absolute; top:-174px; left:0px; right:0px; width:100%; text-align:center; z-index:50; } body div#devskin9516361 .top img { margin:0px auto; min-width:529px; } body div#devskin9516361 div.board { width:360px; height:217px; background:url(https://fc03.deviantart.net/fs71/o/2013/024/d/d/350289350_646740_322748439_464983_pinboard.png) top right no-repeat; text-align:center; z-index:99; margin:-50px auto 0px auto; position:relative; } body div#devskin9516361 div.board .shadow-holder { float:left; top:0px!imporant; left:0px!important; } body div#devskin9516361 div.board img.avatar { position:absolute !important; display:block; margin:0px 0px 0px 0px; bottom:-18px; right:-75px; } body div#devskin9516361 span.board { display:none; } body div#devskin9516361 div.board .stamp { position:relative !important; left:20px; top:50px; } body div#devskin9516361 div.board .stamp img { box-shadow:0px 1px 5px #4d1e1c; -moz-box-shadow:0px 1px 5px #4d1e1c; -webkit-box-shadow:0px 1px 5px #4d1e1c; box-shadow:0px 1px 5px #4d1e1c; -moz-box-shadow:0px 1px 5px #4d1e1c; -webkit-box-shadow:0px 1px 5px #4d1e1c; } body div#devskin9516361 div.board .gallery { position:relative !important; right:78px; top:80px; color:#fff !important; font-size:20px; font-weight:bold; text-align:right; width:325px !important; text-shadow:#4d1e1c 0px 1px 3px; } body div#devskin9516361 div.board a { color:#fff !important; font-size:20px; font-weight:bold; } body div#devskin9516361 a { color:#B73E62; text-decoration:none; } body div#devskin9516361 a:hover { color:#E43A5D; text-decoration:none; } body div#devskin9516361 ul { margin:0px 0px 0px 0px!important; } body div#devskin9516361 ul li { list-style-image:url('https://fc05.deviantart.net/fs71/o/2013/024/6/0/350289350_646741_322748439_464984_bullet.gif')!important; } body div#devskin9516361 li b { color:#fff !important; font-size:14px; font-weight:bold; text-shadow:#8c9688 0px 1px 3px; padding:0px 12px 0px 0px; } body div#devskin9516361 li b sup { font-size:10px; font-weight:normal; } body div#devskin9516361 .list { display:none!important; } body div#devskin9516361 .bottom { position:absolute; right:6px; bottom:6px; color:#DAE4D9!important; z-index:99; padding:0px 0px 0px 0px!important; height:27px; font-size:0px; } body div#devskin9516361 .bottom .commentslink { font-size:0px; background:url(https://fc02.deviantart.net/fs70/o/2013/024/8/d/350289350_646742_322748439_464985_comment.png) top no-repeat; color:#DAE4D9!important; text-decoration:none!important; padding:0px; margin:0px 15px 0px 10px; text-align:center; width:24px!important; height:24px!important; display:block; } body div#devskin9516361 .clear_ { clear:both!important; } body div#devskin9516361 .week { background:url(https://fc08.deviantart.net/fs71/o/2013/024/c/c/350289350_646743_322748439_464986_sepdots.gif) bottom repeat-x; padding:0px 0px 0px 80px; margin-top:-22px; } body div#devskin9516361 .week .cal { background:url(https://fc02.deviantart.net/fs71/o/2013/024/7/b/350289350_646744_322748439_464987_cal.png) top no-repeat; width:76px; height:38px; float:left; margin:0px 0px 0px -80px; text-align:center; color:#f2fbf0; text-shadow:#8c9688 0px 1px 2px; } body div#devskin9516361 .week .left { position:relative !important; left:3px; top:-6px; float:left; margin:0px!important; font-size:17px; font-weight:bold; width:30px; height:30px; } body div#devskin9516361 .week .left b { color:#96a791!important; font-size:8px; line-height:14px; text-shadow:#fff 0px 1px 0px!important; } body div#devskin9516361 .week .right { float:right; position:relative !important; left:-3px; top:-26px; margin:0px!important; font-size:17px; font-weight:bold; width:30px; height:30px; } body div#devskin9516361 .week .right b { color:#96a791!important; font-size:8px; line-height:14px; text-shadow:#fff 0px 1px 0px!important; } body div#devskin9516361 .header { font-size:24px; margin-top:-12px; font-weight:bold; font-family:Trebuchet, Tahoma, Arial, sans-serif; padding:0px 0px 0px 5px; color:#B73E62; text-shadow:#fff 0px 1px 0px!important; } body div#devskin9516361 .links { float:right; position:relative; bottom:20px; right:0px; } body div#devskin9516361 .links img { padding-left:8px; } body div#devskin9516361 .buttons { position:absolute; left:20px; bottom:6px; color:#DAE4D9!important; z-index:99; padding:0px 0px 0px 0px!important; height:27px; font-size:0px; } body div#devskin9516361 .buttons img { padding-right:8px; }




Community Week



This article is written for fellow CSS coders who already have basic+ knowledge of deviantART journal codes.  This is not a beginner's tutorial.
User Friendly Journal Skin Coding

I've been making journal skins on DeviantART since 2010, I'd dabbled in CSS before, but never for other people.  I know what my codes are and how to use them to their full potential and often, just code on the fly when I want something to do something.  But making free and commission skins here showed me that I needed to make them as easy to use as they are pretty.  And really, who wants to type in a lot of extra HTML when they go to write a journal?  It is easy enough to access the artist's comments.



But even then, copy & paste, memorize that....  It can be a lot to deal with if you do not know CSS and HTML.  Which is the reason most people get someone else's skin design in the first place.  So, to minimize the code work you can actually use standard HTML for quite a lot.  You want your user to just install and begin writing a journal right away without having to look up how to use it.  Extra codes and fancy things are wonderful, but the core use of text is where the focus needs to be.  And there are ways to add extra fancy boxes, etc without the need for additional HTML.  


What are the Core Standard HTML codes?

First, text formatting.  Such as Bold, Strong, Italics, Emphasis, Underline, Strikeout, Abbreviation, Acronym, Code, Teletype, Insert, Subscript, Superscript and Small.  These all need little extra than basic knowledge HTML.  Even if someone does not know how to do the bold or italics text, this is in the Sta.sh Writer's WYTIWYG editor.  And users can switch to HTML mode to do more advanced editing.  There are also Subheadings 1-6, though the editor only offers 1-5 and normal.  


So that is Bold, Italic, Underline, then Subheading sizes.  After that, we have Unordered List, Ordered List and Blockquote.  Then Left alignment, Centered and Right alignment.  And finally, the links.  I like to code for just about everything, including paragraph.  I like to use paragraph to make an alternate blockquote style or feature box.  Instead of a long div class with a code name to memorize,  they can simply use the

tag.  
How do you write the HTML for these?


  • Bold
  • Strong
  • Italics
  • Emphasis
  • Underline
  • Insert
  • Abbreviation
  • Acronym
  • Small
  • Code
  • Teletype
  • Strike
  • Subscript
  • Superscript
  • Blockquote

  • Paragraph


  • -- Horizontal Rule

  • Subheading 1


  • Subheading 2


  • Subheading 3


  • Subheading 4


  • Subheading 5

  • Subheading 6


How do you write the CSS codes?

  • b{} 
  • strong{}
  • i{}
  • em{}
  • u{}
  • ins{}
  • .abbr{}
  • acronym{}
  • small{}
  • code{}
  • tt{}
  • strike{}
  • sub{}
  • sup{}
  • blockquote{}
  • p{}
  • hr{]
  • h1{}
  • .text h2{} (I add .text so it does not effect the title of the journal)
  • h3{}
  • h4{}
  • h5{}
  • h6{}


You can actually write things that are all going to be the same style stacked:
b, i, u, small{color:#ffffff ;}
I like to stack a lot of elements, less coding to write and not so long!Lists and Things

Writing a list, I recommend everything be written all in one line.  This way, they do not have weird spacings in between and look nicely grouped together.  

    Unordered List
  • Unordered Item
  • I like to add spaces
It may not look as pretty on the input box, but on the live journal it makes a huge difference.  Coding can get a little bit more complicated if you make child elements on this, but it really is not very difficult.

  • ul{} -- Unordered List
  • ul li{} -- Unordered List Item
  • ul li li{} -- Unordered List Item Child
  • ol{} -- Ordered List
  • ol li{} -- Ordered List Item
  • ol li li{} -- Ordered List Item Child


Okay, not really so bad, but the problem is that your moods are also list items.  So they will adopt the list styling unless you specifically tell them not to:
.list li{list-style:none;}
That should eliminate that!Images and dA Embeds

Here's the fun part!  At least to me, but I really enjoy doing CSS, which if you don't, maybe it is not the best activity for you...  I like this especially since it is what can really make a journal skin shine.  Everyone likes featuring art.  But to really make their feature stand out, it needs a lovely layout and lots of options.  Now there are several different types of images, not just your standard thumb code.  The codes for these can sometimes be tricky, as a simple thumb actually has layers of codes.  And a secret one most people might not even know about!  How do I find these secrets?  I right click and "Inspect Element" in Google Chrome or Firefox.  I use Chrome now.  If you don't really know your way around this, play with it a bit.  The Firefox version has a 3d view that lets you dissect a website like it were cake.  If that makes sense...  That would be how I discovered the code for the secret italic, embedded deviations and embedded videos.  Let's have a look:

Standard Thumb with secret italic!



Embedded Deviation and Embedded Video.


Assuming my readers do not know how to code standard thumbs, I will go ahead and explain it.  The thumb code is the code dA generates when you submit a deviation or journal.  This is located on the info bar, just under the fav.me link.  :thumb#:.  You post that in your journal and a thumbnail of the deviation is generated.  Behind the scenes there is a lot more to it.  

  • .shadow{}
  • .shadow-holder{}
  • .shadow-holder img{}  


or
a.thumb{}
a.thumb img{}
which I rarely ever use.  Just as it seemed redundant since I am already using the shadow-holder which has more layers.

This code effects big thumbs :bigthumb#: and the lit thumb as well.  As more and more people are featuring literature and other articles in their journals, it is important to include the oft forgotten lit thumb codes.  Because otherwise, they may end up entirely illegible and ruin your gorgeous skin.  And if you don't code it neurotype-on-discord will give you a face.  Lit CV's appreciate lit thumbs.

  • a.lit{} -- The entire thing
  • q{} -- The text area
  • q strong{} -- The title
  • img.lit{display:none;} I remove the image usually, because I can!


I like to make additional styles for emotes/stamps/png thumbs where the bg is transparent and might not look very good with a border or something.  So I make a cancel code.  I use :thumb# as it is easy to remember em=emote.  But really, you can use any standard core html codes to contain the thumb code.  And here is how the CSS would look:

  • em .shadow{}
  • em .shadow-holder{}
  • em .shadow-holder img{}  
The em version of thumbs is the only one effected.  And this code is simple enough rather than making a div
:thumb#:
.  Easy for the coder and the user.I do the same thing, only using :thumb#: to create a mini gallery effect.  So much less code and HTML than making a container just for these little thumbs when I can write small and that's it.  Easy to remember and gives an extra feature style to the user.

  • small .shadow{}
  • small .shadow-holder{}
  • small .shadow-holder img{}  


Back to this secret italic thing.  Why is it even there?  You may have noticed that in official skins, they may have a neat hover effect where a little magnifying glass may pop up on the image or something along those lines.  The code is already there for you to implement this!  Nothing for the user to do.  You simply add an image to the hover of the image italic:

  • .shadow-holder img:hover .shadow-holder i{}


Moving on.  I'm sure you may have noticed large images in journals.  In Sta.sh, it is as simple as adding images from the "add items" sidebar.  But there is actually an easy code for this.  At least, easier than looking up the urls for the link and the image to use and tags.  DeviantART has their own special codes. where the # is the thumb code without the word thumb before it.  So you simply copy the thumb code into the id and it generates your link and thumbnail.  You add in the width (height is not needed) and you have a preview image any size you like.  Previously, I would make a special container to display these, as the da code is not effected by the thumb code styles.  So I thought it would be extra codes for the user to have to input.  Or so I thought:


Finding the video embed was simple after that.  I haven't tested on the Vimeo ones, but the following codes work for Youtube and dA Film.  First your embed, .  And your code:


Conclusion

With the above codes, you can make extra fancy journals that the user needs very little HTML knowledge in order to get it to work.  Of course, there is so much more you can do, adding special divs and all.  But the point of this article is ease.  I have made a template of my blank codes to ease my own use of them.  It can be tiring typing all of that ;D  And you are welcomed to have a look.  I update it as I find new things or change how I code.  Generally, I will put in a small notation and bold newer things.  You may copy and save it.  I do not need credit for anything.  But if you find my template useful, I do not mind a shout out, a thank you or pointing people in my direction.  DevART also changes their codes periodically, so I would add those as well.  Gillian's Journal Skin Template .  


Sorry that this is not really a beginner's lesson.  But there are several tutorials that can be found to start off delving into deviantART CSS.  Groups such as deviantCSS eCSSited CSS-Babes journalcss are good places to look at resources.  I also keep a collection of most Frequently Referenced  resources, for things like custom boxes and handy CSS guides.  People ask me all the time how to code this or that, so I keep these thumbs handy.  I recommend faving them yourselves and saying a thank you to the creators.  I hope newcomers will find that we have a very tightknit and welcoming community of coders.


Thanks for reading, hope you learned something new or useful!  ~Gillian



Related content

gillianivyart - Juxtapositions Tier

[ TEXT ]


gillianivyart - To Glaze or Not to Glaze - AI Mimicry

[ TEXT ]


gillianivyart - Punk AF + Murasaki

[ TEXT ]


gillianivyart - Diamonds Anyone?

[ TEXT ]


gillianivyart - Hello, World
Comments: 49

RissingFlower [2013-08-07 04:29:26 +0000 UTC]

All though I'm a beginner it's the first time I see lots of info that gives me a head start, thank you. 

👍: 0 ⏩: 1

gillianivyart In reply to RissingFlower [2013-08-07 05:28:49 +0000 UTC]

;D  Glad to hear it is beneficial to you.  Good luck!  

👍: 0 ⏩: 1

RissingFlower In reply to gillianivyart [2013-08-07 17:39:38 +0000 UTC]

Thanks

👍: 0 ⏩: 0

serafina-rose [2013-04-20 13:38:37 +0000 UTC]

Wow! You sure have put a lot of work and effort into this. I appreciate this so much as I'm learning and it seems easy to follow.

👍: 0 ⏩: 1

gillianivyart In reply to serafina-rose [2013-04-21 01:52:49 +0000 UTC]

Thanks, I'm glad it is useful for newcomers and experienced coders. Feel free to ask me CSS questions, I don't mind ;D

👍: 0 ⏩: 1

serafina-rose In reply to gillianivyart [2013-04-21 02:17:21 +0000 UTC]

Awww thanks so much.. that's so lovely of you, I may if I get stuck.

👍: 0 ⏩: 0

Astrikos [2013-04-14 18:51:46 +0000 UTC]

Incredibly useful!

👍: 0 ⏩: 1

gillianivyart In reply to Astrikos [2013-04-14 21:12:07 +0000 UTC]

Aw, thanks! Glad people are enjoying this.

👍: 0 ⏩: 1

Astrikos In reply to gillianivyart [2013-04-14 21:38:17 +0000 UTC]

👍: 0 ⏩: 0

miontre [2013-04-07 03:39:06 +0000 UTC]

Thanks Gillian! You inspired me to make this skin with your article: [link]

👍: 0 ⏩: 1

gillianivyart In reply to miontre [2013-04-07 13:19:58 +0000 UTC]

I love the lit thumbs, they really mirror the entire design. Kudos!

👍: 0 ⏩: 0

miontre [2013-03-31 07:38:23 +0000 UTC]

By the way, something you might want to add to your skin template:

.put-art-here

It affects the area where the user writes the journal text. By default, it's set at 90% width (of the , which I find is misleading and annoying. You can change the width or center it, whatever works for you, but you've got to use !important with it.

👍: 0 ⏩: 2

gillianivyart In reply to miontre [2013-03-31 09:59:06 +0000 UTC]

Added note on it. Will help me remember to try to use it.

👍: 0 ⏩: 0

gillianivyart In reply to miontre [2013-03-31 09:47:29 +0000 UTC]

I tried using the .put-art-here and it only seemed to be part of the preview structure? I might not have been using it right, since I think I was trying to do some layered thing with it... I'll have to look at it again. I just wrote up a CSS DYK about layers. Maybe you can write a note to Bradley to add a blurb/mention on that and how to use it. Since those articles are two parts and that would go together.

👍: 0 ⏩: 1

miontre In reply to gillianivyart [2013-03-31 09:55:39 +0000 UTC]

Oh, forgot to mention that it doesn't affect the actual outcome of the journal. It affects the journal editor, the text box where the user enters the text they want in their journal. And you've got to !important everything for it to work.

👍: 0 ⏩: 1

gillianivyart In reply to miontre [2013-03-31 10:02:56 +0000 UTC]

Ah, yes, I thought it was something like that. So not good for the design aspect. Oh, I should probably add .journal-edit-mode{} as well, since that effects how the editor looks and if you have title hidden or some wonky thing, that will unwonk it. You just have to write it like .journal-edit-mode .gr-top h2{} (or whichever section needs to be fixed for editor)

👍: 0 ⏩: 0

miontre [2013-03-31 07:33:59 +0000 UTC]

Awesome article Gillian! I learnt (learned?) some new things I didn't know about before. This goes to my "Useful" bookmarks folder

Forgive me, lit community, for I always forget to style lit thumbs
Except for once when I saw someone using one of my skins with a lit thumbnail in their journal and it looked so bad that I updated the skin and told them to re-install

👍: 0 ⏩: 1

gillianivyart In reply to miontre [2013-03-31 09:53:06 +0000 UTC]

Oh yes, my old skins before lit thumbing. Lit thumb coding needs to be made the standard. Only through skinning for other people did I realize how other people use their journals. So it made me change how I skinned. Like the cancel out for emote thumbs.

I think learnt and learned are both correct, though it may be a difference in how the sentence is structured for the correct grammar. Like "he is a very learnt scholar" or "we learned to code in class today". I might be mistaken... I usually Google "learnt vs learned" to make sure I'm using the correct tense.

I have a dA Faves folder for frequently referenced, for things people are constantly asking me about like custom boxes and css basics. I used to have to dig through my resources and tutorials folder, but that got ridiculous. I have waaaay too many faves!

👍: 0 ⏩: 0

TheStockWarehouse [2013-03-30 22:31:48 +0000 UTC]

Very interesting and informative. I never went beyond the beginner stage for coding, so all my CSS journals I make myself are just boxy. I spend much more time creating banners or CSS backgrounds.

👍: 0 ⏩: 1

gillianivyart In reply to TheStockWarehouse [2013-03-31 09:54:32 +0000 UTC]

There is a collab contest going on right now for dA related, perhaps you can find a partner there to work on a skin: [link]

Hope my article might come in handy, thanks for the comment.

👍: 0 ⏩: 1

TheStockWarehouse In reply to gillianivyart [2013-04-01 02:58:59 +0000 UTC]

👍: 0 ⏩: 0

Kjherstin [2013-03-30 14:30:39 +0000 UTC]

It sure is challenging making easy to use journals and that is part of the fun. It pushes us into learning new codes, especially since DA versions keep changing and old CSS codes keep becoming redundant

SAY WHAT? "Sta.sh Writer's WYTIWYG editor" I have not explored the sta.sh properly.

👍: 0 ⏩: 1

gillianivyart In reply to Kjherstin [2013-03-30 15:00:33 +0000 UTC]

The Sta.sh is both wonderful and annoying. If you write in your codes that you want to be visible, it is a little tedious. All those < above were so hard to get them to not automatically think I meant everything to be bolded or something

I think I am always coming up with a better way to code with every single skin I make. Oh my old skins, they look so terrible to me now. Since now, it is my standard to code all the subheadings and font styles, and now I must code embedded images and videos! But I won't redo all the old skins, it is way too many and there is no easy way to just update them. And I always would find things that needed changed right after uploading.

👍: 0 ⏩: 1

Kjherstin In reply to gillianivyart [2013-04-03 14:20:31 +0000 UTC]

We are our own worse critics!

It is such a pity we can't edit the code once we upload it

👍: 0 ⏩: 1

gillianivyart In reply to Kjherstin [2013-04-03 15:11:54 +0000 UTC]

Of course. But when you get better at something then see the old version... It makes you cringe a little. CSS improvement meme! ;D

👍: 0 ⏩: 1

Kjherstin In reply to gillianivyart [2013-04-03 18:13:45 +0000 UTC]

hehe

👍: 0 ⏩: 0

PizzaPotatoNBacon [2013-03-30 06:13:18 +0000 UTC]



This didn't only help me with making user friendly skins (As of now, I'm making my first journal skin! ), but somehow, it kinda gave me the basics (despite this not being intended for beginners) and I loved it.Very comprehensive.
This week is so much win

👍: 0 ⏩: 1

gillianivyart In reply to PizzaPotatoNBacon [2013-03-30 06:41:55 +0000 UTC]

Aw, I'm glad! Feel free to ask me for tips and pointers. I have some in my forum: [link] I welcome CSS discussions there, it's a good way to keep track of random coding thoughts.

👍: 0 ⏩: 1

PizzaPotatoNBacon In reply to gillianivyart [2013-03-30 07:11:51 +0000 UTC]

Well, I kinda need help with my header links.
You see, I'm trying to change the color, but it doesn't work, and the color of the links are the default colors for links. :/ (Well, the header links anyway. The normal links are fine.)

Here is the code I am using for the headers:

h1 {font-family: 'Montserrat',serif;
font-size: 38pt;
color: #C6E399;}
h1 a {color: #DDF8B2;}
h1 a:hover {color: #E4FFB9;}
em h1 {border-style: dashed;
border-top-width: 0;
border-left-width: 0;
border-right-width: 0;}
em h1 a {color: #ddf8b2;}
em h1 a:hover {color: #e4ffb9;}
.text h2 {font-family: 'Montserrat', serif;
font-size: 32pt;
color: #C6E399;}
.text h2 a {color: #ddf8b2;}
.text h2 a:hover {color: #e4ffb9;}
.text em h2 {border-style:dashed;
border-top-width: 0;
border-left-width: 0;
border-right-width:0;}
.text em h2 a {color: #ddf8b2;}
.text em h2 a {color: #e4ffb9;}
h3 {font-family: 'Montserrat', serif;
font-size: 30pt;
color: #c6e399;}
h3 a {color: #ddf8b2;}
h3 a:hover {color: #e4ffb9;}

Not quite sure what I'm doing wrong here... Hopefully you can help me out with this.

👍: 0 ⏩: 1

gillianivyart In reply to PizzaPotatoNBacon [2013-03-30 09:06:26 +0000 UTC]

Okay, it is the dA code, you need to override it. For color you must declare it important. color:#ffffff!important; otherwise it will remain default colors. This is true for subheading links and hovers as well. I probably should have added that as a note in there. Though wasn't thinking of that.

👍: 0 ⏩: 1

PizzaPotatoNBacon In reply to gillianivyart [2013-03-30 09:22:33 +0000 UTC]

Thank you! It works.

I wonder, what is the difference between a span class and div class? That's because I noticed it in a journal skin I was using... :/

👍: 0 ⏩: 1

gillianivyart In reply to PizzaPotatoNBacon [2013-03-30 09:34:41 +0000 UTC]

Divs are containers which can hold more divs and spans, etc. Spans cannot hold divs and spans. They have a smaller scope. I guess that would be a basic explanation of it. I don't really know more than that. Same thing with p class. And you can add class to a lot of different areas. In my current project I'm using h2 class. That way it only effects the h2 that is defined as that class. I could have made it as a div class that contained an h2, but that was an extra container I didn't really need.

👍: 0 ⏩: 0

neurotype-on-discord [2013-03-29 19:14:23 +0000 UTC]

Yes we do

Huh, so editing iframe is working for you? I've no idea why it's not available for big lit thumbnails, although I can hazard a guess.

👍: 0 ⏩: 1

gillianivyart In reply to neurotype-on-discord [2013-03-30 06:43:49 +0000 UTC]

iframe{} worked for the dA film video embed. Not sure if it works for the lit one....

I think it shall be my goal to make everyone start coding for dA embeds! ;D I love it.

👍: 0 ⏩: 1

neurotype-on-discord In reply to gillianivyart [2013-03-31 04:32:02 +0000 UTC]

Huuuuh. Okay, if you can get it to work on lit, I must know!

hahaha, it's pretty awesome.

👍: 0 ⏩: 0

Lintu47 [2013-03-29 17:08:54 +0000 UTC]

Congrats for the effort to compile such a great resource

👍: 0 ⏩: 1

gillianivyart In reply to Lintu47 [2013-03-29 17:16:08 +0000 UTC]

Ha, thanks. Amazingly, I wrote it all super fast and submitted it too early, had to put back into my Sta.sh to hide it Thank you.

👍: 0 ⏩: 1

Lintu47 In reply to gillianivyart [2013-03-29 21:02:58 +0000 UTC]

As long as you know these so well as you do no wonder you wrote it fast

👍: 0 ⏩: 1

gillianivyart In reply to Lintu47 [2013-03-30 06:34:36 +0000 UTC]

Yea, well, can't help it. I love coding. So have learned a lot since I started on dA.

👍: 0 ⏩: 1

Lintu47 In reply to gillianivyart [2013-03-30 10:26:44 +0000 UTC]

👍: 0 ⏩: 0

GinkgoWerkstatt [2013-03-29 17:04:14 +0000 UTC]

👍: 0 ⏩: 1

gillianivyart In reply to GinkgoWerkstatt [2013-03-29 17:05:55 +0000 UTC]

I accidentally secretly posted this when I first wrote it. Only one person naw it , it was ^neurotype ! haha. There is more codes for the dA embeds though. I need to practice with these more

👍: 0 ⏩: 1

GinkgoWerkstatt In reply to gillianivyart [2013-03-29 17:56:17 +0000 UTC]

Haha, can happen
One day i will give those a try as well!

btw what is this "Artist comment" that you highlighted at the top? Am i missing something, because i have no idea what it is or where it comes from D:

👍: 0 ⏩: 2

gillianivyart In reply to GinkgoWerkstatt [2013-03-30 06:38:05 +0000 UTC]

It is the artist's description. When you go to edit (an installed skin) you will see those links at the bottom (where the share option is). Clicking artist's comment gives you the description the artist wrote up so you don't have to go back to the original deviation. I included a screenshot of it since I figured a lot of people may have never seen this and found it useful. Most people probably just go back to wherever they got the skin from and read the instructions.

👍: 0 ⏩: 1

GinkgoWerkstatt In reply to gillianivyart [2013-03-30 07:21:54 +0000 UTC]

Was already explained. Guess i never saw it before, because i don't install that many other skins or check for such options. Good to know that it is there though.

👍: 0 ⏩: 1

gillianivyart In reply to GinkgoWerkstatt [2013-03-30 09:01:34 +0000 UTC]

Yea, saw that after I replied It needs to be more common knowledge. I only found it because I poke around at stuff.

👍: 0 ⏩: 0

icefire8521 In reply to GinkgoWerkstatt [2013-03-29 18:33:32 +0000 UTC]

The artist comments? When you click edit skin, at the bottom, if you downloaded a skin, you can check out the artist comments from the deviation you downloaded it from at the bottom.

👍: 0 ⏩: 2

gillianivyart In reply to icefire8521 [2013-03-30 06:44:54 +0000 UTC]

Ah, you beat me to it, I answered any ways ;D

👍: 0 ⏩: 0

GinkgoWerkstatt In reply to icefire8521 [2013-03-29 18:39:51 +0000 UTC]

Ah ok, don't install that many skins or look for such infomation
Thanks for telling me!

👍: 0 ⏩: 0