HOME | DD
tragicallyhipster — Deviant's HTML and CSS | This is a Work in Progres
#css #html #deviantarthtml #deviantart
Published: 2016-05-10 00:10:12 +0000 UTC; Views: 963; Favourites: 15; Downloads: 0
Redirect to original
Description
body div#devskin12891523 .social { } body div#devskin12891523 .header { }
Name of Blog
Updated May 17 2016 (still have more to do and more comments to read)
Hi all! I'm relatively new to DA, even though I've been telling myself for years to join. I'm a web developer specializing in LAMP, and consider myself Full Stack; however, that's not really important here. We only have a limited amount of HTML and CSS available, so customization is limited. This entry is for those who consider themselves to be good to expert level of HTML and CSS, but are trying to figure out what they can do on DA. So, as I explore this entry you'll be learning at the same time.
As I said this is for people who know HTML and CSS. There are plenty of tutorials and resources here for beginners, but nothing comprehensive.
There will be a bunch of links to for the reference Tutorials that I found; however that doesn't mean I didn't figure it out for myself.
Notes
For right now (5/9/2016) this journal will not have a skin associated with it.
In order to share HTML code on DA:
I was about to pull our my hair -> this is helpfull ecssited.deviantart.com/journa…
Restrictions
Limited CSS, no inline CSS, and no Javascript. The only way JS will work is if you add a browser addons, and this will only work for you (and maybe people who also have the addon). I don't recommend using them if you want your Profile to be customer/client based.
I need to test to see how much HTML5 can be used here.
Responsive?
Not really. Since DA has an App there is no really reason to make the site responsive, but you can do your best to try to make your profile as responsive as possible. Percentages are your friend .... and sometimes your enemy.
Resouces
Code Pen codepen.io/
JS Fiddle jsfiddle.net/
Placehold.it placehold.it For simple placeholder images.
Inspect is your friend (just right click and find inspect element)
HTMLA lot of what can be used you wouldn't see around, but hell they work.
Align EX
Font EX Super old school with this one
Fonts
Google fonts can only be used in the tag (da imports it through some JS), and not imported straight from their webfonts.
No font-face (note this really needs to be tested ... maybe with a CDN font?)
All fonts for dA
Font colors Colored Text (Custom box) - More colors
CSS
@import is not supported.
Classes that can be used (all Deviant Based)
dev-page-button For links, Turns them into buttons
share-button
more
popup2-moremenu —
floaty-boat —
gr-box —
gr-genericbox —
ccomment —
ccomment-featured —
ch-ctrl —
cc-in —
pp —
SectionsCustom
Can not use CSS
You can do anything HTML wise, but you can not insert inline CSS and there are no Stylesheets associated to them. In order to have a background to the section you need the use this HTML.
To have centered contented in it's own
Basic Full HTML setup
Journal
Can use CSS
Featured
Can not use CSS
So how do people get those rad styles to work on their profile. Well this is a combination of using the Journal and the custom Box. IN the featured section you'll want to add a journal or text page, but to get a back ground that will span the whole section you'll need to put in the image background like you do in a custom box in the description section. Other wise if you just have a background throw the CSS of the journal it will be limited and not span.
More information Profile Navigation Menu tutorial
Places to Get More Information
These are just overall areas to get more information. They range on levels, from Beginner to Expert
Deviant Art : tragicallyhipster.deviantart.c…
Speed Paint Youtube : www.youtube.com/channel/UChscD…
Society 6 : society6.com/amandaiaria
Red Bubble : www.redbubble.com/people/tragi…
Threadless : beautyinthelines.threadless.co…
Art Tumblr : beautyinthelines.tumblr.com/
Twitter: twitter.com/TragiclyHipster
Instagram : www.instagram.com/tragicallyh1…
Dev Portfolio: beautiful-tragedy.com/
Comments: 11
Thanks everyone. I'll get this updated when I can. I just wanted to leave a note saying I saw the comments 
👍: 0 ⏩: 0
About Custom widget sections, you can use any of the dA style sheet parameters to mix and match to make your 'own'. I suggest looking at CypherVisor 's extensive collection, as he has already gathered several as buttons and text blocks to look nice and edit from there. There's a lot of trial and error there to get it how you actually 'want' it to look.
For the profile menu type widgets, a lot of people make a transparent bg journal for it or use something to coordinate with the floaty-boat bg of the widget box. But it is important to note that you have to make a blank lit deviation (as in no HTML or skins on it when submitted) and then edit it and add skin/HTML formatting. Otherwise dA wants it to be a journal entry and that cannot be featured as the 'featured deviation' widget.
And xs-deviant 's suggestion is good, you delve too far into it and they'll change codes, etc and ruin your layouts. There was once this floating site div that everyone quickly learned that you could add HTML to (links, images, etc). Most people used it for a cute little 'profile pet', but people abused it to black out the page and send you a spam link to click instead. So they had to nix that right away.
I generally don't like skinning galleries because they have changed the codes so much and ruined old skins, etc and I expect more changes soon. Journals have both the old format and gruze versions available, but you cannot mix and match those. Gruze has more versatility. They have edited some minor things which have altered some journals a bit, but most are easy fixes.
Note on the GoogleFont thing, they work in journals, not on galleries and I don't think on custom boxes either. They should all be integrated. Watch kemayo 's journals for updates on that sort of thing. I think he's in charge of that.
I inspect all the things! Such a useful element. I use it a lot when you go to read some article and they pop up a white/blackout asking you to subscribe to continue reading. I just display:none; and continue reading
Thanks for sharing your notes with us ;D
👍: 0 ⏩: 1
I've been waiting to reply to you till I got some of your notes in... But that might be a little longer than I thought it would be 
ANYWAY,
👍: 0 ⏩: 1
Hahaha, yus, I do tend to write long winded things. lols. If you ever want more run on sentences of random factoids (particularly CSS related, but I can ramble about other things as well), feel free to ask.
Inspect All the Things would be awesome!
👍: 0 ⏩: 0
It really boils down that you cannot use HTML or CSS. You can hack subsets that DA offers you and thats it. Don't even try to make sense of it as it is totally fuzzy and from what I have seen can change without notice. So stick to very simple things as adding a background and aligning stuff or you might one day get up and find you fine tuned designed unrestorable shattered.
👍: 0 ⏩: 1
I don't understand why, considering the circumstances, they even bother. This code is really begging for a rewrite. Maybe with help of HTMLPurifier to get the right users the right editing option. I cant imagine why anyone with a payed account would risk his account to troll with spam. And account verification is easy with a payed account.
👍: 0 ⏩: 1
Yeah. I don't know about the history of DA, but it almost looks as if there hasn't been much of a restructure of the site or Code since it was created. This is only an assumption since it looks like what I remember from all the times seeing artists pages in the past. I wonder if they will (or are) pushing for more use with the app? Or maybe (depending on when the [app] was released) they are going to do a redesign of the site now?
But in any case ... _/\^^/\_
👍: 0 ⏩: 1
"No google fonts can be used."
You can use them. They are imported by DA already. You just have to write them down via font-family.
👍: 1 ⏩: 1
Gotcha. I'll have to clear it up since you can't @import or add the stylesheet.
👍: 0 ⏩: 0