HOME | DD
jonarific —
'Wrapped' Journal skin (CSS)
Published: 2012-09-22 19:18:12 +0000 UTC; Views: 12904; Favourites: 416; Downloads: 1686
Redirect to original
Description
Live preview »Here's my second Journal skin attempt for =CypherVisor 's Modern Elite CSS Contest . This time, I went for a darker, more gloomy style, making use of some subtle background patterns, minimal and semi-transculent borders for many elements, an elegant ultra-condensed font for the headings, and sections at the top and bottom which look like they're wrapped around the content (hence the name "Wrapped").
In contrast to my other entry , this design is already fully coded and therefore installable, so I'd appreciate if you'd give it a shot! For information regarding the usage of all the included elements, check the instructions below. Enjoy!
Instructions
General note:
Because of the fact that writing a line break in the Journal editor leads to a real HTML line break (
), you might have to remove empty line breaks between certain items in your text (between a heading and the following text, for instance) to achieve the right spacing between the elements.
How to use headings:
—Heading title—
How to use lists:
- —List item—
- —List item—
- —List item—
How to use quote boxes:
—Quote content—
How to use code boxes:
—Code snippet— Note: If you want to prevent HTML code from being rendered, replace each front parenthesis (<) with <
How to use two columns:
How to use images:
How to suppress the background around an image:
How to remove all image backgrounds in an area:
How to center images:
If you've got any further questions, feel free to ask!
You are free to use this work without prior permission.
The wallpaper thumbnails used in the preview are by =winnichip (permission granted)
The small icons used in the preview are by ~bogo-d (CC Attribution license)
Related content
Comments: 72
This is an amazing journal skin, aand i totally love to use it *w*
but i wonder if there is a way to make pictures bigger.. because if i insert a devination id and want to show it in full size it does not work.. it just shows the smal version
*example screenshot.. the first picture is with DAid and the other one is with simple url code*
and im not that good in programming that i understand why this happens so i tried the normal '' code but then that happend
so i wonder if you could give a lil hint how im able to fix that :0
👍: 0 ⏩: 0
Is there any way to make the "extras" look nice and above the bottom wrap? The feeling, eating, drinking, etc?
👍: 0 ⏩: 0
Wow, what a cool journal skin! And the description is fantastically helpful, too. I still don't remember many codes, so I'm just gonna save a screenshot of that. :'D Thanks for the awesome, clean skin! I'll be sure to put this all to use sometime.
And on a random note, I'm almost upset that I broke the 666 number of Installs - but a number's just a number, and I really would like to use this eventually.
👍: 0 ⏩: 0
This is an amazing journal skin! Thank you for sharing it
Congratulations on the Daily Deviation as well c:
👍: 0 ⏩: 1
Thanks a lot, glad you like it!
👍: 0 ⏩: 0
Congratulations on the well deserved DD!
I hope you have a fantastic day!
👍: 0 ⏩: 1
Thanks a lot, I certainly had!
👍: 0 ⏩: 1
You're welcome
I'm glad you've had a great day ^^
👍: 0 ⏩: 0
This is so amazing! Very good style, composition, concept and all. Congratulations!
👍: 0 ⏩: 1
Thanks so much for the kind words!
👍: 0 ⏩: 0
Ooh, the subtle use of texture is quite nice <3
👍: 0 ⏩: 1
Glad to hear, thanks!
👍: 0 ⏩: 0
Congratulations on your well-deserved DD!!!
👍: 0 ⏩: 1
Congratulations on the Daily Deviation!
Much deserved!
👍: 0 ⏩: 1
just wanted to ask how can you put an picture and actually preview it with an image in the journal .cuz I tried to put the code "How to suppress the background around an image:" and used my own picture but when I preview it .the picture doesn't appear only a box with an icon of a device or something I really need reply asap thanks so much in advance
👍: 0 ⏩: 1
Hmm, there's nothing wrong with the code… Actually that sounds like the image you inserted can't be loaded for some reason. I'd double-check if the image is really available online and if it can properly be reached through the URL you pasted in.
👍: 0 ⏩: 1
thanks for the reply ..the image that I want to insert is one of my artwork here in deviantart ..any solution? super thanks in advance
👍: 0 ⏩: 1
Check the code listed as Thumb on the right side of the deviation page and simply insert that into the Journal editor. If you want your image to display larger, use :bigthumb*********: (with the same digits) instead.
👍: 0 ⏩: 1
thanks but how can I exactly check the code im really sorry for the trouble .its really new to me ..
👍: 0 ⏩: 1
Here's an image for reference: [link] The highlighted text box can be found on the right side of every deviation page.
👍: 0 ⏩: 0
Oh my goodness, thank you so much for the DD suggestion! Couldn't be more glad this met your taste!
👍: 0 ⏩: 1
Yay Congrats! Looking forward to seeing more designs from you
👍: 0 ⏩: 0
Do you have the coding available for super group journal skins?
👍: 0 ⏩: 1
I don't have any experience with that, so no, sorry.
👍: 0 ⏩: 1
It's ok. I found out how to get the CSS code.
👍: 0 ⏩: 0
Glad to hear! I wasn't aware that you could use :bigthumb: in Journals, otherwise I wouldn't have used a fixed height there
👍: 0 ⏩: 1
Haha, well apparently you do! 
👍: 0 ⏩: 0
So, I've installed this skin now in my journal, but I use :bigthumbdeviationcode: not just :thumbdeviationcode:, but when I do this, it get's only wider, not higher.
👍: 0 ⏩: 0
| Next =>