deviantART Journal CSS Suggestions


SanguineEpitaph's avatar
Lately I've been coding a lot of journals, and this has made me realize that there are some things that I think would be beneficial for an updated journal structure. :nod: Let me know what you think! 8D
Also, I don't post in the forums often, so I hope I'm not breaking any rules. xD

1. Journal Headers and Footers
I think for this, it would be awesome if the headers and footers that we put into the journals appear in their own <div> that is OUTSIDE of the .text area! The reason is because most of what those areas are used for are navigational links or credits for the journal design/coder, and embedding them into the .text area makes it so much harder to take them out of the content flow without using position: absolute; or something similar. The only cases when the current structure is helpful is when the person wants their nav links INSIDE of the .text area, which is rare in my experience. Most people want a separate section!




2. Non-text Links
Right now, deviantART's link structure looks something like this for :thumb:s:
  • [span.shadow-holder]
    • [span.shadow mild]
      • [a.thumb]
        • [img]


The reason why these are so customizable with CSS is because there are TWO spans that we can change and also an a.

Now here is the structure for :icon:s
  • [a]
    • [img.avatar]


When I design a skin, I like to use border on links because I prefer that over using text-decoration: underline;. HOWEVER, (this is a big however), deviantART's current setup will not let you specify a img.avatar{ border: none !important; }. I don't know why this is, really, but it looks to me like the way that CSS is interpreted only allows it to apply if there is a specific div or span that an element is a child of.

If that's confusing, then here is what I mean.
This won't work: a img.avatar{ border: none !important; }
(Note, not even this works: .text a img.avatar{ border: none !important; })
Theoretically this would: span.avatar-holder a img.avatar{ border: none !important; }

Make sense?
I recommend that avatars have their own span or div around them so they can be specifically modified in some way.

Or I also recommend that dA changes the way custom CSS is interpreted so an element doesn't need a specific parent to be changed. :B




3. JQuery Support?
I'm sure this idea would have problems because of security of the site, but I think it'd be cool if we could use JQuery in our journals! Perhaps we could have a JQuery editing window beside the CSS one. Imagine:

$(.gr-box).ready(function(){ $('a:hover').animate({ opacity: .5 }) });

Obviously there would need to be restrictions on the type of functions we could use. >_>

:eyes:




4. Support for background: -webkit-gradient and background: -moz-linear-gradient!

But maybe not for filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');

:paranoid:




5. The ability to integrate our own divs into current journal structure.

I would imagine this to look something like a window where we define a class name for a div and then choose where it appears. We could drag and drop the custom div in between existing elements or make it a child of an existing element. This wouldn't be for the .text area because we can just type divs there with their class. It would be for other parts of the journal, e.g., between .gr-top and .gr-body.

:nod:




:happybounce:
Comments10
Join the community to add your comment. Already a deviant? Log In
Nesmaty's avatar
I see some of my dreams are written here .. :iconhappytearplz:

I agree with the icon border problem

I support the JQuery too

I say yes yes for background: -webkit-gradient and background: -moz-linear-gradient

I am still thinking about our own divs though :slow:
SanguineEpitaph's avatar
:happycry: We have the same dreams. <:

Well, my main motivation with the custom divs is that I think it would lead to more innovative journal designs. o u o
Assuming it's done properly. :B

Thanks for your feedback! :happybounce:
Nesmaty's avatar
I think it does give one the space to be creative .. but I think their policy is to keep a unified theme in all pages .. not sure though .. :shrug:

And you are absolutely welcome :hug:
electricjonny's avatar
Hmm, well I didn't quite follow all of this (I just woke up a few minutes ago, but I'll come back and try to comment more, once I can make sense of it all), but for the jQuery animation stuff, there's some CSS3 styling that dA recently played with, but it's not available for everyone to use just quite yet. I posted a journal using some CSS3 styling here [link] with links to other things, including linear-gradient()'s in the comments. I was able to post that journal because I helped bug test it.

So the available styling tags might get an update soon, although I'm not sure on the HTML structure of things. The CSS3 selectors might help you out there, though.

I don't know if or when the CSS3 stuff is going to come out to people, but there's at least some thought going into it right now.
SanguineEpitaph's avatar
Oh yeah, I can't believe that I neglected CSS3. Tht would be a much better alternative to the JQuery animation! I tried @keyframes and it didn't work, so I assumed dA hadn't implemented CSS3 support. I'm glad you showed me that journal, though! It gives me hope. :giggle:

Thanks for your feedback! :D
electricjonny's avatar
Yeah, all CSS3 styles aren't supported yet, and they don't allow @keyframes, unfortunately. Just transition.

But it allows you to add :hover/:active transitions, which is cool.

For example, I use this for my links:
/* links in the content */
.news a {
     color:#107605;
     border-bottom:1px solid transparent;
     text-decoration:none;
     outline:none;
     transition:color 40ms ease-in, border 80ms ease-in;
}

.news a:hover {
     color:#18A508;
     border-bottom:1px solid #18A508;
     transition:color 80ms ease-in, border 80ms ease-in;
}

.news a:active {
     color:#19B208;
     border-bottom:1px solid #19B208;
     transition:color 80ms ease-in, border 80ms ease-in;
}

/* define the external links */
.news a[class^="external"] {
     color:#053275;
     text-decoration:none;
     border-bottom:1px solid transparent;
     transition:color 40ms ease-in, border 80ms ease-in;
}

.news a[class^="external"]:hover {
     color:#0852B2;
     text-decoration:none;
     border-bottom:1px solid #0852B2;
     transition:color 80ms ease-in, border 80ms ease-in;
}

.news a[class^="external"]:active {
     color:#0A5ECC;
     text-decoration:none;
     border-bottom:1px solid #0A5ECC;
     transition:color 80ms ease-in, border 80ms ease-in;
}

/* external link image */
.news a[class^="external"]:after {
     content:" "url(http://electricjonny.com/journal/outgoing.png);
}
SanguineEpitaph's avatar
Ah, I am not familiar with transition, but from the looks of that CSS it seems just as good as @keyframes for the purposes I'd use it for. :nod: Thanks for that! :D
electricjonny's avatar
transition is fairly simple. All it does is describe how things should change when you hover or click on things. You can select a property to transition between, the time it takes, and the easing function. So yeah, for most things, it should work pretty well.

The only good thing keyframing does is let you fade things in, or drop them in, and other things, once the page loads. Or cause things to spin in circles or whatever. I bet most people just want to transition between stuff, and animations would just be an eye soar =P
SanguineEpitaph's avatar
Ah, so transition couldn't be used for a one-time animation when the page loads, then. I guess that would be @keyframes.

I need to experiment more with CSS3, I think. xD