Deviation Actions

UszatyArbuz's avatar

Custom box: Spiral notebook devID (CSS)

Published:
By
18K Views

LIVE PREVIEW (no background): Book custom box light


CSS BASED WIDGET CODE DESIGN

Widget type: Featured deviation
Deviant type: Core member
Last update: 25 VI 2016

Before purchase, please get to know with the On Premium Content and Refunds Q&A.


This box shows a desk with random stuff on it, including a spiral notebook and a small writing pad on the right.

The notebook part of the code consist two columns, respectively for left and right page of the book. They both have fixed width and height, and if there is more content included than can be displayed on the sites, the particular site becomes a scroll box, so no text is lost. The book part was designed for all content, not only text content, but also art status, lists, user icons and such.

The writing pad part is a tiny box, created especially for social media links or other tiny important links, such as Commission info or FAQ. Social media icons displayed on the preview are not attached, and are a free resource used only for the preview (link below). If there is more content included than can be displayed in this small box, the content is cut out from the page and will not be displayed.

The code includes quite a lot of customized elements, such as: five special fonts/colors (headers - can be chosen from the top bar of editing page), literature thumbs, divider, block quote, links. All elements are listed and showed on the live preview (link above).
The desk background is attached, and it's appearance (how the stuff like letters and pen will be displayed on the screen) can change a bit, depending of the screen resolution. Despite this, the book and writing pad does not change it's size or place on the widget.

This design is quite cute and condensed, and it can bring an original touch to your profile page :)

Premium content pack contains:

Bullet; Green Text files codes:
- CSS base codes (the layout)
- Journal base code (the content)
- Widget base code (the background)

Bullet; Green Step by step tutorial on how to install it - click HERE to see the preview!
Bullet; Green READ-ME.txt file with additional info about how to customize the content

For the preview, I have used these free to use resources: Miku icon | Books stamp | Pastel Social Icon Set | Orange progress bars | Harry Potter stamp | other resources from "+Add media.." tab.



RULES
1. No distribution is allowed! Only for personal use.
2. You can change the code anyhow you want, but no further selling is allowed.
3. You cannot use this premium content as journal skin for your journal, or as a base to create a journal skin.
4. If you have any questions or problems with installing or editing it, note me for free help :)



Other similar resources:
 
dA profile: Spring pixel meadow theme by UszatyArbuz Custom box: Lace themed devIDs by UszatyArbuz dA profile: Black Beauty theme by UszatyArbuz Custom box: Fancy gallery (CSS) by UszatyArbuz  Custom box: Pastel profile + menu + thumbs (CSS) by UszatyArbuz
 

Do not hesitate to note me if something doesn't work right! I'll try to fix the code ASAP!
Comments have been disabled for this deviation