HOME | DD | Gallery | Favourites | RSS
| eCSSited
eCSSited
[7384589]
[2008-05-20 10:23:07 +0000 UTC]
"a place for all your CSS needs"
# Statistics
Watchers: 2406; Pageviews: 217730
# Group admins
# About me
eCSSited is a group dedicated to the world of deviant CSS (and HTML). Its main purpose is to help deviants customize their journals and galleries. The group aims to be your first choice CSS resource, collecting useful tutorials and guides.
# Comments
Comments: 1362
I need help coding my page o.o
Reading all of this just confused me more, & I'm a coder for a different site..
👍: 0 ⏩: 1
I can help you what kind of problems do you have?
👍: 0 ⏩: 0
It wasn't me! No idea what that deviant is doing there.
But changed the privs already
👍: 0 ⏩: 1
Oh snap.. I was really confused why I out of all people would have gotten that invite.. my best bet was that there was someone with an A name on someones friends list and that's how I got it D:
👍: 0 ⏩: 1
The deviant just joined the group shortly before they sent the invite to you. Seems their first group and I guess he/she is a bit confused by groups and how they work.
👍: 0 ⏩: 1
oh, that makes sense.
👍: 0 ⏩: 0
Can anyone give me some suggestions on how to code this design ?
I am new to css and have no clue (have looked at some tutorials and tried them, but I just don`t get it. The journalskins I have created for sale in my gallery is made out from free templates).
I have this design saved as a PSD with several layers, but I have no clue on how I should save them or how to code it... (just tell me if you need the PSD to see how you would have coded it, I`ll gladly send it if it means I`ll get a chance to use it ^^).
👍: 0 ⏩: 1
I hope you have permission to use the free templates for such a purpose. If you use them to sell skins without permission you are breaking the rules you agreed to, when you installed them.
"Free" just means, that you can use them for your own journal, not to sell the code (even modified) or create new free skins.
More about that can be read here
Free Journal Skins - What does that mean?This news article has nothing to do with me being a Gallery Moderator, but based on my own experiences I know that this is a serious issue that causes frustrations and anger quite often. So this news article is mainly about two things: respect and fair behaviour.
I guess every member of deviantART who owns a Premium Membership has used a free journal skin at least once in their dA life, right?
They make your journals look more personal and attractive. It's a nice feature that everyone likes to take advantage of and the best, it is for free – the skins (not the Premium Membership ;)).
To use a skin all you have to do is to click that install button, agree to the terms that pop up and then you can start using that fancy new layout you just found. It's really easy and if that template doesn't fit your needs 100% you can make modifications to it and be happy.
In some cases it is not enough for people, they want to share their new creations because people like what they have ma
Explaining in a few sentences how to code a journal does not work. And if tutorials don't help you much, the best would be to either commission someone to code it or to find someone who is willing to give you direct help with coding.
Basically you would need to slice your images in PS first, then start with the basic code to add colors and the images and then you add the menu and other fancy extras.
All I can do here is to link you to tutorials again. In the "Layout based Resources" you will find tutorials that explain you how to deal with images in PS. Afterwards you need to start coding, the following should help you
CSS Tricks: Skin TemplateFollowing up my previous tutorials Journal break-down and Deviations in Journals here's the tutorial or rather resource for a basic blank journal skin.
It is merely a collection of classes that should be considered when coding a new skin, they are all given by DA, none of them have been created by me. I only broke them down into the nude.
Skin Template
* {
background: transparent;
border: none;
margin: 0;
padding: 0;
}
/* ----------------------------- General ----------------------------- */
.gr1, .gr2, .gr3, .gr-top .tri, .gr-top .gr h2 img {
display: none;
}
a {}
a:hover {}
/* ----------------------------- Journal ----------------------------- */
.negate-box-margin {}
.gr-box {}
/* ----------------------------- Top ----------------------------- */
.gr-top {}
.gr-top .gr {
padding-left: 0!important;
}
.gr-top .gr h2, .gr-top .gr h2 a {}
.gr-
CSS Tricks: Journal break-downThis has been done before by many others 
If you still write CSS NOT using gruze … stop that! Start using gruze. Just do it!
There are a few "hacks" that you will need to make it work totally under your control, but there's always help with those
Well, here comes help with those hacks 
At the end of this CSS Trick I will provide you with a template, that I use myself, as a base for creating new skins. It will only contain the basic classes of the journal deviation, from which it is made up of, the basic HTML, without any content.
Beforehand explanation
Now, I know you will say: but that is not the default skin! That is not how journals without CSS look like! And you are right. But. There is always a but. But the default journal skin for coders is not the same as an unsk
👍: 0 ⏩: 1
Yes, I do have permission (They are made by a real life friend who has moved to another place to continue his film education, but I don`t want to bother him with coding this skin. I want to try to do it myself).
Thanks for the tips.
👍: 0 ⏩: 1
Ah ok. That's good. Many sell them without permission and don't know that they could get intro trouble for that.
In case that doesn't help you, let me know and I will add you to the "Helping Corner". Maybe there is a deviant who can give you more direct/personal help.
👍: 0 ⏩: 1
ok, by the way, what journalskin type should I use, old og gruze (or rather, wich one do you recomand for a css beginner) ?
👍: 0 ⏩: 1
Hm, as a beginner the old would be easier to handle, but if you want to stick to journal coding and such I would recommend to get used to gruze right away. It will offer you better ways of coding skins later.
Unless you just want to create simple ones, then the old structure works fine as well
So it's more or less a choice of preference.
👍: 0 ⏩: 1
Hello, I am looking for some visual help for my profile. How does one code a custom widget so that there are two or three images on the same line as opposed to having the images stack one underneath another? I am curious how, for example, this artist rosuuri.deviantart.com/ , coded their "Semi Hiatus
I can see they are four individual images, but I can not seem to line up images in a row.
👍: 0 ⏩: 3
Depending of the amount of images...
Please follow this link because dA sucks d... when you want to paste the codes in the comment section 
👍: 0 ⏩: 0
It could be, that the images you want to use are too wide and a line break is created because the widget does not have enough space for them to go next to each other. Judging from my own page, the width of all images should be about 386 px.
This is if you use the simple image code
However if you have the images in
You can, of course, have the images in links, links will also not create a line break.
I hope this may already help
👍: 0 ⏩: 0
Will add you to the "Helping Corner" as I can't help you much with that custom box stuff. Maybe someone else will know a solution.
👍: 0 ⏩: 0
how can I display a line of codes in the description without executing them?
👍: 0 ⏩: 0
I want to make an icon so you can click it and it will go to a character reference. how do I do so?
👍: 0 ⏩: 1
It's basic HTML you can look up easily.
The code looks like this:
👍: 0 ⏩: 0
sorry to ask but I found a part to the Gallery Folder widget edit called Description
I tried potting in the same code I use for my costume widget so I could have the background look like the costume widget but it blocks the images of my art
can you tell me what code I need to use to have it as a background image and send it to the back of the widget so I can still see my art
I'm really new to this part of DA and there seems to be a lot of ground I need to cover so I thought it would be easier to ask for help
th04.deviantart.net/fs70/PRE/i… " />
here is the code I'm using
👍: 0 ⏩: 2
Widget and gallery codes are different - especially as customizing widgets is just a tolerated bug.
If you want to use a certain image as a background for your gallery you have to work with
background: url(YOURIMAGEPATH);
In your case it would be
body{
background: url(http://th04.deviantart.net/fs70/PRE/i/2014/245/2/0/da_background_4_by_new_atlas-d7xr0se.png);}
And that needs to be applied to a custom gallery folder in the CSS area, not the description area.
👍: 0 ⏩: 0
I have created a journal for you here:
Please leave a comment if you have problems with it
Gallery Folder Backgrounds ChangeNOTE:
You must be aware that as I am writing this Journal we cannot customize the Featured Gallery here on DA.
The only Gallery we can customize are the Gallery Folders
This is very basic tutorial and because some users are not able to know this yet... even if it's just basic I dig in deeper.
The Screenshot above is my Feature Gallery so there is no way we can customize it yet.
And the screenshot below is what it looks like Inside my Zodiac Characters Gallery.
Click "Folder Options" at right-upper-corner of the webpage.
And you should see a pop-up like the image below.
👍: 0 ⏩: 0
Has anyone here ever used Macaw? macaw.co/
It looks like it's a visual CSS designing tool and I wonder if I could make my dA journal skins in there (I tried, but I still can't get the CSS to be implemented correctly because dA limits in CSS)
👍: 0 ⏩: 1
No, I haven't - until you posted this here, I didn't even know of it before.
The problem with such sites/software is, that they don't know the default dA structure. They assume you start from scratch on a blank canvas, not with something that already has pre-defined elements. That's why there will always be trouble with such tools.
👍: 0 ⏩: 0
i got a question
are backround and materials
permitted?
👍: 0 ⏩: 1
I am not sure if I understand your question. What do you mean with "background and materials"?
👍: 0 ⏩: 0
do anyone have any idea how to make scroll to make picture stay in same spot such as this
Boldly Facing The Future
Artist Credit
DanielaUhlig
WELCOME.
Many of you have been in this community for a long time, but whether you’ve just joined or you’ve been a member since day one, this is your first impression of the new DeviantArt.
Change is not something that we take lightly, because it affects our collective identity. It was important for us to define who we are and what we’re made of at our core before we changed anything. We all have our own understanding of what that means, but the process of getting that core story down on paper took almost a year.
The result is “Bleed and Breed Art.” This is our center of gravity and our reason for getting out of bed in the morning.
It is the guide and the justification for everything, including our business partnerships, the development of the new app and the design of our new ide and kodamacreativecommissions.tumb… and kodamacreative.deviantart.com/
hnn, im fantastic with them, hopefully I can learn codes like that since i didn't want to be rude to asking them. Hopeful in any chance you, guys know about it? ; v ; Thank you!
👍: 0 ⏩: 3
hi, Watolf you can make like this one ..
put this on your Skin CSS
IMPORTANT: the background-attachment is set to fixed as you can see. I hope it helps
though this is not like the announcement journal like that DA's Boldly Facing The Future.
but I am now trying to find out the trick I can do to make like that one.
CODE BELOW
.journalbox {
background-attachment:initial;
background-color:initial;
background-image:url(fc03.deviantart.net/fs70/o/201… ;
background-color:transparent;
background-repeat:no-repeat;
background-position:initial initial;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
border-bottom-style:none;
border-bottom-width:2px;
border-color:initial;
border-color:initial;
border-left-style:none;
border-left-width:2px;
border-right-style:none;
border-right-width:2px;
border-style:initial;
border-top-left-radius:0px;
border-top-right-radius:0px;
border-top-style:none;
border-top-width:2px;
border-width:initial;
height:1000px;
width:800px;
background-attachment: fixed;
}
👍: 0 ⏩: 0
I haven't done anything like that myself, but basically it is just playing with the background property and fooling the eye.
If you remove the background images via Firebug or something like that, you can see that it is just plain content like you have for all journals/blogs.
Seems like they also work with a combination of :before and :after to get more effects.
👍: 0 ⏩: 1
: O thank you, i shall try testing out with journal CSS, then ; v ; i'm hope its going worked well.
👍: 0 ⏩: 1
Often it is just a matter of how you combine things, so it's lots of playing around with the basics.
Good luck with it!
👍: 0 ⏩: 0
This is something that is pretty much restricted to the staff and companies that use this site for promotional things (I've only come across one company promo group and hell if I can remember which it was).
👍: 0 ⏩: 0
So I'm trying to get that box over towards the left, but no matter what I do it doesn't change it's place? This is a super group, by the way
sta.sh/015ef1tk1qjs
👍: 0 ⏩: 2
you can just grab the photo and edit it through any software you have there.
there are HTML properties that enables us to move a photo embed.
But is seems like you don't have live version of that in your profile. So, I can't help with it.
Please put your codes live if possible and your custom box too.
👍: 0 ⏩: 0
Could you please link to a live version or send me the code via note? With just an image I can't do much to look up the problem.
edit: Oh, wait... it's for a custom widget. Then I can't help you much. You might want to check the "Custom Widgets" folder, perhabs you will find some code or a tutorial that can help you with that problem.
👍: 0 ⏩: 0
I have a question!!!!
just simple.
how to add background in journals?
I mean what's the path? I just noticed some deviant coders used
this example
.journaltop{
background: url("http:// fc00.deviantart.net /fs50/o/2009/326/f/d/144424013_97319_11spk6a.jpg");
//CODE IS SAMPLE ONLY!!!
}
so my question is, how to add background pictures in your journal. need answers.
👍: 0 ⏩: 1
So, How do you make multiple custom boxes in one widget going vertically??
Also, How can you put Journal dolls on your page so they cover the content holder box and the custom box?
And one more, How do you align things, Say you wanted to put a youtube player in the middle of a content holder box?
👍: 0 ⏩: 1
Please take a look at the "Custom Widgets" folder. There are plenty of tutorials there that should help you with that.
👍: 0 ⏩: 1
I couldn't find an answer to the first question, unfortunately.
👍: 0 ⏩: 1
Ah ok, well I can't help you with that, as I am not that much into custom widgets things, but maybe someone else can help (who reads this). Or you could try and ask CypherVisor , he is pretty good with that stuff
👍: 0 ⏩: 0
Gosh, aren't those amazing CSS design!
Anyway, greetings and....can i ask to be directed to place for all this css terms?
I am new to CSS and if i am not wrong, floaty-boat isn't quite an actual CSS term but something of deviantart custom.
Ot am i wrong? Help? Thank you!
👍: 0 ⏩: 1
Hi, you should be able to find most terms in our tutorials folder. But I may have some more specific faves that can help you out.
CSS Tutorials and ResourcesCSS and DeviantART
So you want to start creating your own journal skins? Learning CSS can be somewhat time consuming, but there are plenty of awesome resources to help you.
Remember, learning CSS and webdesign can land you a job in the future! Not only that, but coding Cascading Style Sheets is actually a lot of fun. It's awesome to see others using your Journal/ Gallery skins.
Examples of Journal Skins!
Finding others to code with
One thing that makes deviantART awesome is that there are over 26 million active users! This means a bunch of others will always be willing to learn with you. I'd be happy to answer any questions you have, or help you find the information you need.
deviantART Related Groups
CSS Basics
CSS Tricks: Skin TemplateFollowing up my previous tutorials Journal break-down and Deviations in Journals here's the tutorial or rather resource for a basic blank journal skin.
It is merely a collection of classes that should be considered when coding a new skin, they are all given by DA, none of them have been created by me. I only broke them down into the nude.
Skin Template
* {
background: transparent;
border: none;
margin: 0;
padding: 0;
}
/* ----------------------------- General ----------------------------- */
.gr1, .gr2, .gr3, .gr-top .tri, .gr-top .gr h2 img {
display: none;
}
a {}
a:hover {}
/* ----------------------------- Journal ----------------------------- */
.negate-box-margin {}
.gr-box {}
/* ----------------------------- Top ----------------------------- */
.gr-top {}
.gr-top .gr {
padding-left: 0!important;
}
.gr-top .gr h2, .gr-top .gr h2 a {}
.gr-
👍: 0 ⏩: 0
This group has been so helpful to me in learning CSS. Thank you!
👍: 0 ⏩: 0
//awkwardly waddles in holding journal skin//
I've been struggling trying to find anyone who can help me in creating my journal.
I know the basics on CSS, but I taught myself the coding [same with html] so I'm really inexperienced and my struggles have led to five hours of trying to get codes to work that just... don't.
If anyone could maybe help [even willing to tell me where I'm going so wrong] it would be appreciated, since I want to learn more on CSS and html codes and layouts. ;;;;;
/awkward
👍: 0 ⏩: 1
<= Prev | | Next =>