HOME | DD
Fli-c — Custom box
Published: 2012-01-23 21:38:58 +0000 UTC; Views: 4924; Favourites: 59; Downloads: 177
Redirect to original
Description
Simple journal skin, with styles from default skin preview, and some improvements, so journal entry might look like any standard widget
> Live preview
upd 1:
• fixed links color;
• li valign in chrome/safari;
• .text right padding
upd 2:
• fixed header inon and timestamp valigns;
• .grf-indent right padding (and all dependencies);
• added ability to change header icon (usage: write in the body of your journal entry; see Custom Box Icon Legend for icon indexes)
upd 3:
• skin has been renamed from minecraft-related "Custom block" to deviantart-related "Custom box"
• custom icon position adapted to use with multiline journal title
• fixed li paddings (there were changes in the dA's basic styles)
• font-size and line-height in Firefox reduced to 8.8pt and 120% to look like in other Windows browsers
• unified view of
and
• unified vertical alignment of the text around (plz)avatars
• added ability of easily control the vertical alignment (see live preview for details)
• added basic spoiler features (usage:line spoilerandtitle content)
Related content
Comments: 15
Hi, I have a weird question, but....how do you make those solid line separating the text and stuff? I can't figure out how to do that and I see so many people with those kind of boxes ;n; I'd truly appreciate it if I could find out ;n; thanks
👍: 0 ⏩: 1
Oh, wait o-o I thought this was an actual custom box. xD
👍: 0 ⏩: 0
I can't seem to make the spoiler work...is that only for journals?
👍: 0 ⏩: 0
This is perfect. I regret ordering a journal skin commission now haha XD But I need a little bit of help.
First, can I make this stop at a certain height, with a scroll of if it goes past that height?
Second, how do I make the background image repeat as needed?
Third, can I add a content-holder box like on a regular widget?
👍: 0 ⏩: 1
Thanks 
I think that all you need is just add some rules for "grf-indent" class at the end of journal CSS code. Something like this:
.grf-indent {
background: url(http://e.deviantart.net/emoticons/l/la.gif) repeat 0 0;
max-height: 200px;
overflow-y: auto;
}
where:
"http://e.deviantart.net/emoticons/l/la.gif" - is, obviously, background image url
"repeat" - it's repeat mode (can be "repeat", "repeat-x", "repeat-y", or "no-repeat")
"0 0" - coordinates of it's top left point, x and y (can be integers like "-10px 50px" or keywords like "top center")
"max-height: 200px" + "overflow-y: auto" - is what you need to make it scrollable afrer certain height (200 pixels, in this case)
And about third - sure, you can.. I guess.. Or there's any problems with it?
👍: 0 ⏩: 1
Okay, thanks on the first two ^^
And for the third, I did use the HTML code in the journal body text to add a content-holder box like the ones on my page, but I was wondering if there was a way to actually code them into the skin 
👍: 0 ⏩: 1
That's a really good question
Yes, there are ways to do this, but move it into the skin - is not the best idea. Because if you want to use single HTML element (like
I think that better solution, in this case, is move the "box effect" to the SVG and use it as fit-sized background:
.dabox {
background: url(http:/ /fc08.deviantart.net/fs71/f/2012/324/6/f/dabox_by_fli_c-d5lmar0.svg) 0 0 no-repeat;
background-size: 100% 100%;
padding: 12px 9px;
overflow: hidden;
}
That's it. You can add this class to the end of journal CSS code and use as
👍: 0 ⏩: 1
Ooooh, thank you! It works beautifully! Thanks so much!
👍: 0 ⏩: 1
Is there a way to add a background, like in a normal custom box widget on a profile page?
👍: 0 ⏩: 1
Yes, you can add your own background in almost any installable journal skin, with adding this CSS rule:
.gr-body { background: url(http://path.to/your/image.jpg) transparent; }
Sorry for the late reply, I can't write here for some strange reason .. and, of course, support doesn't care about it.
(this comment was written with cheating:)
👍: 0 ⏩: 1
Thanks, it really blends in with the widgets on my profile! Love it!
👍: 0 ⏩: 0