The Tip Jar

9 min read

Deviation Actions

gillianivyart's avatar
Published:
8 Comments
5K Views


As we learn to code, we all find some handy tricks of the trade to make our jobs easier.  Here, we'll be sharing our knowledge and pass on these tips to you.  Even CSS skinners who've been at the game for quite a while could use a tip or trick or two.  At the end of several of our blogs, we have been sharing some tips, tutorials and more from our community of skinners.  

Tip Collection


Give CSS-Babes Tips

We are accepting tips!  What have you learned from your coding experience?  What is one of the most useful tricks you know?  Share something, whether you think it is something everyone knows or not.  Or, if you have made a tutorial and would like it featured, it may get added to the collection.

We are accepting :points: at this time.
Currently, CSS-Babes is trying to raise points for Super Group once again.  Please make donations or contribute skins to the :points:raiser.  Donation widget on gillianivyart's page.  #superbabescss 

This journal will be updated with "notify users" on a monthly basis.  If the frequency of our articles is unsatisfactory, please let us know in the comments if we are posting too often.

:iconbab-jane::iconpica-ae::icongillianivyart::iconposerfan::iconcelvas:


Comments8
Join the community to add your comment. Already a deviant? Log In
RetSamys's avatar
One dirty trick: A lot of Journal Skins only leave space for the title and for the main text, so instead of making everything right and even creating new spaces, I put the background image into the body, place the .journalbox in the main text field (and make it scrollable with overflow:auto) and then place the .journaltop separately into the title box (with position:absolute).

For thinner Journal Skin designs, I like to work with margin:auto in the body or in the .journalbox so that the whole Journal will be in the center.
gillianivyart's avatar
Okay, I have already shared the margin:auto; trick, that is one of my favorites.

So, what you are saying is that you have a fixed text area length and use overflow:auto; to make it scrolling, correct?  I'm uncertain what you mean with the title box, could you show me an example?

Thanks for sharing your tricks ;D
RetSamys's avatar
Sure, without putting too much thought into it:

body{
margin:auto;
background:url(IMAGE) no-repeat;
width:IMAGE-width minus padding-left;
height:IMAGE-width minus padding-top;
padding-left: amount of pixels to the text field;
padding-top: amount of pixels to the text field;
}

.journalbox{
background:transparent;
width: width of the text field;
height: height of the text field;
overflow:auto;
border-width:0;
}

.journaltop{
background:transparent;
position:absolute;
top:0;
left:0;
width:100%:
text-align:center;
}


overflow:auto is indeed for scrolling, however, it is not only for the text. I have put the entire content of the .journalbox in the text field and let it scroll. This way, I don't have to worry about the Mood box, the commentslink or custom headers/footers. They're all in there.
I do, however, have to worry about the title. It would also be in the main text field, but it usually belongs above, in the title text field. So I take it out of its initial position completely with position:absolute and place it where it belongs.
If you work with margin:auto, that can prove to be a bit messy position-wise, so I make it 100% wide and put it on the left (left:0) while making the text align in the center.
That means: centred Journal Skin, centred title.

I also added a few more things in the code above that are necessary in order for everything to work.
The width/height and padding in body are the way to go in order to position the .journalbox correctly.
The .journalbox has a transparent background because it might have a Deviant Green background instead. I also dislike the non-transparent border line around the .journalbox, so I made it invisible (no border at all messes up too much) with a width of 0.
And of course, the background of the .journaltop needs to be transparent.


Apologies for working with the old design instead of gruze, but I learned it that way and am now too lazy to look everything up.
gillianivyart's avatar
No problems with the old school.  I understand what you mean and how it works.  Also, it may be useful to those who haven't learned the gruze versions.  Do you want me to add your tip?  I will quote you and put in your example codes in one of our articles.  I might paraphrase a bit.  Do you have an example in use that I would be able to link?  If you have mentions on, you should receive a notice when the tip is live.  Otherwise, I can let you know when I publish the article.

Thanks for sharing your advice!
gillianivyart's avatar
Okay, thanks.  ;D
gillianivyart's avatar
Join the community to add your comment. Already a deviant? Log In