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: 217732
# 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
Hey, I'm looking for someone who's willing to make a code for this Journal design. I only have 87 
👍: 0 ⏩: 1
Hey,
I have added your request to the "Helping Corner", maybe someone is willing to help you.
On a different note, do you know that you would need a Core Membership first before you can use the skin? Maybe that's why you have troubles with the generator and such.
👍: 0 ⏩: 1
I do realize I need a Core Membership; I was hoping to get the code in advance. I have the code now, thanks to RetSamys , but thanks anyway!
👍: 0 ⏩: 0
Hello !
On which widgets is it possible to use CSS ? (just journal and gallery skin ? is it possible to use css on a custom box widget and how ? Or on a favorite deviation widget ?
Thank you !
👍: 0 ⏩: 1
CSS like you use it for journals and galleries, can't be used for widget. Those are the only two places where it works.
What you can do on widgets is to use pre-defined DA code to modify their look. If you search for custom widget codes (or look here at the gallery) you find plenty of resources for that.
Additionally you can "abuse" a journal to be used on your profile in a widget. When you do that search mentioned above, you will come across resources for that as well.
👍: 0 ⏩: 1
Yes ! 
Thank you for your answer !
👍: 0 ⏩: 0
Hi there, is it possible to ask for some coding help?
I'm not very experienced at all and I copied a code from a tutorial for a simple journal (no sub header boxes/emotion box/additional boxes etc) to put in my own images. I have the CSS almost working apart from the text box which just completely breaks whenever I try to alter the right hand padding (and the bottom as well, I think, but that isn't as important)
Can anyone help? I'm nearly throwing my computer out the window in frustration XD I tried adding some stuff to the code to make it centred (otherwise it just completely screws up the image alignment) so if the code needs a serious tidy, I'm sorry! I'm horrendous at programming...
CSS Code
(Note, in the code, the image links have a space between the http:// and the rest of the link)
Thank you, I appreciate any help!
👍: 0 ⏩: 1
Hey,
from what I see there is no big issue here. When you add a padding for the right you have to remove the value from width of your journal as well.
For example I tried it with a 15px padding for the right. Then took that value + the 65px from the left and distracted that from the 900px width, ending with 815px. That will give you a padding for both sides and nothing breaks.
👍: 0 ⏩: 1
Oh my gosh, it actually works. Thank you so much for explaining this to me. It is starting to make a bit of sense now. Thanks again!
👍: 0 ⏩: 1
My pleasure!
Padding always adds to the width-value for browsers like Firefox. When working with fixed widths you always need to keep that in mind.
👍: 0 ⏩: 0
hey pretty ladies (and ugly guys 
Can i ask here? Well, I'll do it.
i saw many of you uploading long journals with links to sub-headers. how do it into DA?
I would like to implement here Tips `n` Tricks + FAQ
👍: 0 ⏩: 2
It's done by using link anchors.
At the points in your journal you want people to be able to jump to, put a link tag that looks like <a title="whatever"></a>
The text you put in the title will show up in the URL bar, so it helps to make it something short but understandable, like "visualstyles" or "music_players".
Then at the top of your journal make a list for your table of contents, and link each one to the anchor by putting the URL to your journal + #whatever - for example http://burnsplayguitar.deviantart.com/journal/Tips-n-Tricks-FAQ-543106677#visualstyles
👍: 0 ⏩: 1
Yeah, i got it
thank you very much.
👍: 0 ⏩: 0
The trick is to make anchor points or bookmarks using an a tag. Anchor point - And then the bookmark link would be simply #bookmark ">Bookmark The pound sign links to the same page, and the rest is the name, each would need a unique name.
Here is the example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam auctor nec nibh at luctus. In at tortor vitae lectus tempus pulvinar. Praesent euismod ac turpis nec volutpat. Suspendisse potenti orci aliquam.
Etiam dictum nibh facilisis dolor finibus elementum. Nam ullamcorper, nunc sit amet fringilla egestas, arcu quam vestibulum velit, non ullamcorper quam mi at dolor. Aenean faucibus consequat eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris vel porta nibh, in maximus massa. Sed non libero sed turpis vehicula vulputate eget sit amet dolor. Nunc aliquet at purus eu semper. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed amet.
So, that link should bring you down the page (might not work as well in comments). But this should be where the link goes. (Edit: must have specific comment link like so: comments.deviantart.com/4/7384… )
👍: 0 ⏩: 2
Tnks Gilli.
Always very helpfull
👍: 0 ⏩: 1
Sure thing, good luck! I've been using them for the CSS Tips on the CSS-Babes articles, made a directory that goes to each tip. I'll probably be designing a new skin with all the sections anchored like that, so it is easier to navigate.
👍: 0 ⏩: 1
yes, very useful to things like that.
I thought about small articles, but everything in same place makes things easier.
👍: 0 ⏩: 0
Definitely works better in the journal format. Since you need to also have content below to have enough room to have it align properly. It still goes directly to the proper comment.
👍: 0 ⏩: 0
addyourlinkehere = the link of the page/journal etc your want redirect people at
addyourimageURLhere = the unique URL of the image that should be the link
👍: 0 ⏩: 1
I figured it out but thank you
👍: 0 ⏩: 0
As Gillian already mentioned, yes we have. But while we had regular events over there when the group was still rather young, the chat is a abandoned place these days.
Hosting chat activities has become more trickier (with timezones and such), so there is not much planned regarding that anymore.
However you can still use that chatroom for CSS related things if you are interested.
👍: 0 ⏩: 1
Thank you! GillianIvy mentioned she would like to re-activate a bit the CSS community! I would love that, too! There are a couple of friends which constantly post new journal skins, and I would be happy to interract with them on this subject under your experienced wings. So, if you need support with that - I am in. I know I am a beginner 
I know you guys are busy people, but I would be very happy to join your events!
👍: 0 ⏩: 1
She is already doing it, but mostly via CSS-Babes . If you don't watch that group yet, you totally should if you want to get into contact with other CSS people.
Regarding #eCSSited I haven't planned anything as my focus is away from DA and the CSS community these days, so there won't be any events from me. Sorry.
But if you talk to Gillian and maybe other people perhabs you can get some events done? Either in this one or the babes chatroom.
👍: 0 ⏩: 0
#eCSSited Not sure when events will happen, it is usually unoccupied.
👍: 0 ⏩: 1
Good to know there is one. If one needs support for the activity there - I'm in!
👍: 0 ⏩: 0
hello,
so i have been away from deviantart for awhile and i had a nicely coded page prior but once i logged on, everything was shifted to the right awkwardly and nothing fit. i wasn't sure how to fix it so i decided to recode my page completely.
but looking at the top right custom box on my page, the image i entered is not centered; i'm not sure how to fix this. any help would be appreciated <3
👍: 0 ⏩: 2
Hey, looks like you managed to fix it yourself?
👍: 0 ⏩: 1
I am not that experienced with custom widgets, that's why I can't help you, but added you to our 'Helping Corner'. Hopefully there is someone who can help you with that
👍: 0 ⏩: 0
Ok, I've spent some time reading though many very usefull tutorials and all but i haven't found something that covers this topic:
How do I create a linkable area or however it would be called. I have this thing here on the Background image and want it to be connected to a deviantation so ... would someone be so nice and show me where the journal for this thing is ?
Is that actually even possible to write ? or does it only work with the template things
👍: 0 ⏩: 1
You add it as image links, not as part of the background. Like you create single images for each of those links (commissions, gallery) and place them via CSS on the background, wrapping it with the a-tag.
If you want to work without images, you create transparent HTML elements with the same size of the area that should appear as a link and then work with that to create a link.
👍: 0 ⏩: 0
Hello there and sorry for bothering. I just wanted to say that I have no clue about coding whatsoever and these blogs are seriously giving me a big headache. I was wondering if someone could please be kind enough to show me at least the basics so that I can get started. Pleeeeeeease ?
👍: 0 ⏩: 1
There may be some tutorials that could be of use. Do you have any specific questions?
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, .gr-to
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
There are several other journal resources I could recommend, but maybe these will help get you started.
👍: 0 ⏩: 1
hmmmmmm more specific....I was wondering how I can customize my profile and put these backgrounds some people have. Can you suggest me some tutorials of that sort please
👍: 0 ⏩: 2
Oh sure, no problem, glad to help.
For customizing the profile, there are two ways. The first, you use a widget and add the code and bg image to it. There is a super easy generator that does the complicated bits, you just edit to your needs. The other way is a little more complicated, but gives you the interactive menus, etc you may see people have now. I have not found a proper tutorial for that and had to figure it on my own a bit with trial and error. First, the custom box tool:
For the menu profile widget:
Step one, create a blank lit deviation and submit it to your gallery. It will show up in your notifications, so maybe have the next steps readied to avoid people looking at a blank lit file.
Step two, 'Edit in Sta.sh Writer'.
Step three, add content and skin formatting your content. There is a limitation, this can only be something like 400+px high. (cannot recal exact) So you need to make several of these for a lot of content.
Step four, save and update. Then go to your profile page. Add the feature deviation widget and feature that deviation.
Step one is essential. If you skin it first, it will be a journal file instead of lit. Then you have to start over, because you cannot feature a journal in your featured widget. At least, not that I know 
👍: 0 ⏩: 1
wow just...WOW! You're so good at explaining stuff :3 Thank you so very much, your help is very appreciated and I know i'm a bother but may I ask one last question ? I've tried changing my ID background by mixing some codes people have posted here on deviant art. I've checked the customizing group for more info but it didn't help much. Do you know any tutorial that might have some basic codes ready ?
👍: 0 ⏩: 1
I actually have a folder of tutorials just for this. I actually get asked these sort of questions most commonly and it really is not a bother (I would not answer if it were). So no worries. I'll give you the link to my whole folder: Frequently Referenced
I believe CypherVisor has a tutorial for the ID widget. He is the custom box guru.
👍: 0 ⏩: 1
hmmmmm I don't quite understand it just yet but after a bit of studying I think i'll do ok :3 Thanks again for your help, can I do something for you to make it even, pleeeeeeeeease ? I'll feel bad if I don't Q.Q
👍: 0 ⏩: 1
Sure, if you don't mind sharing my Patreon launch information? I've just started on this new site that supports artists and creators and need new followers and patrons 
Patreon Launch DayAnnouncing!
I've launched my Patreon page today. I have been working hard the last month getting Patron rewards ready and tweaking my profile to make it not too wordy... As I tend to get. Blah blah blah
"Golden Sketch Cards"
What is Patreon?
Okay, first off, it is not a Kickstarter or fundraising crowdsourcing one run project. It is an ongoing, subscription like service to support artists and creators. Creators can be art, video, music... Really anything. This site is bringing back the Renaissance Era idea of patronage of the arts. People used to support an artist to help them pay their bil
👍: 0 ⏩: 1
Nope, I don't mind at all sharing your patreon launch info but there's a tiny little problem....how do I do that xD ?
👍: 0 ⏩: 1
On the journal link I gave you, there are share options just like any deviation, to share to FB, Twitter and more. Or, on deviantART, simply linking the thumb code in your journal, a status or a poll would announce it to your watchers. Whichever you like is fine by me ;D Thank you for sharing the info
👍: 0 ⏩: 0
You should try out CustomizeYourProfile , they have a ton of tutorials and resources listed for that
👍: 0 ⏩: 1
thank you very much
👍: 0 ⏩: 0
Hello!
I need a bit of help making/codding journal skins
I understand most of the basics of coding
but I need help setting the background of the journal skin im trying to make ; o ;
👍: 0 ⏩: 1
There are several different areas you can use to set a background, depending on how many images you are using (header + footer, etc). First off, which type of journal code are you using, the old or the newer Gruze? I recommend gruze (the one with all the gr codes), as it is more versatile.
Can you show us a preview, either in your sta.sh or journals and link to the image or a mock up of the design to show what you want to do?
Basically, whichever section you were adding the image to would read as following:
background-color:#ffffff ;
background-image:url('img.jpg');
background-repeat:no-repeat;
background-position:top center;
(or all in one line)
background:#ffffff url('img.jpg') no-repeat top center;
These can be applied to any section. I can't recall the old code off the top of my head, but I think .journalbox{} is the one you want. The gruze code is .gr-box{}. Sometimes I use body{}.
If you need the codes, I have the gruze version compiled in a GoogleDrive document that I update when changes are made. I grant permission for anyone to use it. It isn't basic though, I have a lot of extras added to it that are not needed. I have it precoded with a few things that I do like clearing formats and common add ons I use. The add ons can be removed and require HTML knowledge for the user. It is all tiered in commented sections so it is somewhat easily readable and in a logical order. I have comments on the side as well. Bolded text is newly added content. I update whenever I notice a change in dA's codes.
GoogleDrive Journal Skin Template
Anyways, I hope it is useful to you.
👍: 0 ⏩: 1
I think I am using Gruze ; ;
And Im trying to make my journal skin look like this -
With this header -
And this skin -
So far my journal looks like this -
((I know how to put in links and such
((and I know I need to make my header picture smaller
The Code Im using is here -
CCS thingyHEADER
My Profile Page My Gallery My Journal
SKIN
* {background: transparent; border: none; margin: 0; padding: 0;}
.journalbox
{
max-width: 650px;
_width: 650px;
color: #BD5164;
font-size: 14px;
background-color:#fff;
text-align: justified;
border: none;
}
.journaltop
{
color: #A3303C;
background: url(https://orig06.deviantart.net/5fa3/f/2015/101/c/7/header_by_xxcrystal_okamixx-d8pbbtt.png) no-repeat top center;
height: 135px;
_height: 47px;
width: 650px;
font-size: 0px;
padding: 127px 0px 0px 0px;
text-align: center;
}
FOOTER
//Put featured deviations here//.
👍: 0 ⏩: 1
Okay, looks like you are using the old journal type, so .journalbox{} is the section you should apply your bg to.
👍: 0 ⏩: 0
| Next =>