HOME | DD

UszatyArbuz — Custom box: Six tiles (CSS) by-nc-nd

#background #backgrounds #batch #black #box #buttons #clean #closed #code #codes #coding #commission #commissions #complex #css #custom #cute #decorate #decoration #design #designs #feature #free #freetouse #hold #html #journal #menu #minimalist #modern #onhold #open #pack #packs #payed #poland #polska #polskie #profile #resource #simple #skin #status #teals #tile #transition #white #widget #journalskin #p2u #artstatus #f2u #paytouse #profilecode #freatures #custombox #looking #art #profilecoding #profilecustomize
Published: 2017-10-31 19:00:02 +0000 UTC; Views: 12464; Favourites: 228; Downloads: 22
Redirect to original
Description

Commission Info dA Resources Prints Instagram Twitter Buy me a coffee!


LIVE PREVIEW :  6box layout

CSS BASED WIDGET CODE DESIGNWidget type: Featured deviation
Deviant type: Core member
Last update: 20 X 2017
Before purchase, please get to know with the On Premium Content and Refunds Q&A.


Another layout that has been sketched forever ago, but just recently got into actually encoding it

The box features six tiles, with the main one on top-middle where you can write your name or other short info, and five other boxes. The other boxes can be entitled as you want and once hovered, additional info appears from under the tile "cover".
You can write in there anything you want and there is plenty of customized things that goes with the layout, including among many, headers, unordered and ordered lists, Quote box and more. Once you reach certain amount of text in the small box, it becomes a scrolling box.

The widget is very clean, very minimalist and at the same time can hold a lot of info in one place.

Same layout but you can add your images as covers and in white&red:


Premium content pack contains: Text files codes:
- CSS base codes (the layout)
- Journal base code (the content)
- Widget base code (the background)
Step by step tutorial on how to install it - click HERE to see the preview!
READ-ME.txt file with additional info about how to customize the content

I have used art status icons from Simple Resources Pack (10 colors) for the preview only.

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. Please give a PROPER CREDIT as described in my Terms of Service
5. If you have any questions or problems with installing or editing it, note me for help

Other similar resources: 

 
Do not hesitate to note me if something doesn't work right! I'll try to fix the code ASAP!

Related content
Comments: 52

UszatyArbuz In reply to ??? [2019-03-11 07:13:30 +0000 UTC]

Just pure CSS+HTML

👍: 0 ⏩: 1

Cherry-berri In reply to UszatyArbuz [2019-03-11 15:42:17 +0000 UTC]

Is there like a website??
.3.

👍: 0 ⏩: 1

UszatyArbuz In reply to Cherry-berri [2019-03-14 09:18:03 +0000 UTC]

This one is the best ;D


www.w3schools.com/html/default…

www.w3schools.com/css/css_intr…

👍: 0 ⏩: 1

Cherry-berri In reply to UszatyArbuz [2019-03-14 17:45:33 +0000 UTC]

Ok Tysm!!

👍: 0 ⏩: 0

tantetoska [2018-08-23 23:46:40 +0000 UTC]

I'm wondering, can you change the amount of boxes? 
I have 20 things I'm trying to display so i was wondering if that was possible

👍: 0 ⏩: 1

UszatyArbuz In reply to tantetoska [2018-08-24 07:35:10 +0000 UTC]

 In this one it's set amount but you can put several of them on the profile if needed Or you can change the code however you wish

👍: 0 ⏩: 0

saltyfoxprince [2018-01-16 19:58:32 +0000 UTC]

heyy
i was wondering if you could only et colors and transparent as the "cover" or use actual images?? : o

👍: 0 ⏩: 1

UszatyArbuz In reply to saltyfoxprince [2018-01-19 08:44:56 +0000 UTC]

In this one only colors are working BUT several people already asked for a "gallery" version with same idea as you, and I'm working on it at this point of time ^^ If I won't have any surprises I will be posting it on Tuesday

👍: 0 ⏩: 1

saltyfoxprince In reply to UszatyArbuz [2018-01-19 17:38:18 +0000 UTC]

oooh okay thank you very much!!

👍: 0 ⏩: 1

UszatyArbuz In reply to saltyfoxprince [2018-01-23 08:27:04 +0000 UTC]

It's up if you're still interested!

👍: 0 ⏩: 1

saltyfoxprince In reply to UszatyArbuz [2018-01-23 12:02:10 +0000 UTC]

Yessss thank you a lot!!

👍: 0 ⏩: 0

ufo-bo [2017-12-17 15:51:16 +0000 UTC]

hey i want to add a square photo in that empty middle box
how do i do that?? it keeps messing up the code

👍: 0 ⏩: 1

UszatyArbuz In reply to ufo-bo [2017-12-17 17:24:22 +0000 UTC]

I haven't tried adding any image in there, so it's possible the code will mess up You can try to play with the CSS to adjust it to your needs if you want ^^

👍: 0 ⏩: 0

SketchyTwi [2017-11-10 19:04:40 +0000 UTC]

Is this Core only? ;o;

👍: 0 ⏩: 1

UszatyArbuz In reply to SketchyTwi [2017-11-10 19:48:30 +0000 UTC]

Yes, sorry

👍: 0 ⏩: 1

SketchyTwi In reply to UszatyArbuz [2017-11-10 21:58:58 +0000 UTC]

//sobs

Bummer.. Its ok though Its really nice!~ <3

👍: 0 ⏩: 1

UszatyArbuz In reply to SketchyTwi [2017-11-10 22:55:24 +0000 UTC]

It's really depending on dA not me, since non-core members cannot use CSS coding at all, and that's what it is

👍: 0 ⏩: 1

SketchyTwi In reply to UszatyArbuz [2017-11-10 23:09:31 +0000 UTC]

I know. Just wish it was for all XD

👍: 0 ⏩: 0

MudPuddIe [2017-11-03 12:26:47 +0000 UTC]

hjvgjhvhkvkfdvhdfkv aaaaaaaaa

I got this but then I realized I can't use it because it messes with my page layout since it can only go under "art zone" and there is supposed to be another box at the top of my page ;;

👍: 0 ⏩: 1

UszatyArbuz In reply to MudPuddIe [2017-11-09 10:24:48 +0000 UTC]

👍: 0 ⏩: 1

MudPuddIe In reply to UszatyArbuz [2017-11-09 17:12:36 +0000 UTC]

A very sweet friend of mine helped me revamp my page. I can use it now.

👍: 0 ⏩: 0

Martith [2017-11-01 02:02:06 +0000 UTC]

AAAAANnddd I buy 

Brakuje mi tu tylko jakiejś opcji zmiany tła w boxach z tego szarego na jakiś dowolny obrazek, albo jestem gópia i nie umim tego znaleźć
ale jak wstawiam url(adres) po background (ALE ZE MNIE CSS H8CKER XD ) to krzaczy cały kod ;;

👍: 0 ⏩: 1

UszatyArbuz In reply to Martith [2017-11-09 10:31:30 +0000 UTC]

W ogóle nie pomyślałam o tym, raczej skupiłam się na prostym, czystym designu Ktoś inny też to już zasugerował. Niestety zmiana tła za dużo nie da (chyba że chcesz mieć ten sam obrazek w każdym boksie ), żeby zrobić coś sensownego musiałabym przepisać kod na nowo

Według Ciebie, "okładka" z nazwą boksa powinna mieć obrazek ( +tytuł boksa?) ale po najechaniu myszką zmienić się w takie tlo jak jest teraz (jeden kolor) czy również powinien wyświetlać obrazek pod spodem?

👍: 0 ⏩: 1

Martith In reply to UszatyArbuz [2017-11-09 16:14:35 +0000 UTC]

Właśnie myślałam o obrazkach na okładce z tytułem a po najechaniu jednolite tło wówczas mogłoby to służyć jako pokaz prac, chociaż ja sobie poradziłam robiąc przezroczyste tło, dzięki temu "wpasowało" mi się w design  

👍: 0 ⏩: 1

UszatyArbuz In reply to Martith [2017-12-30 10:20:43 +0000 UTC]

Nie pamiętam czy już odpowiadałam na to czy nie, a nadal wisi w moin inboxie...
Tak myślałam, jak będę mieć czas to pomyślę jak to zrobić ^^

👍: 0 ⏩: 0

Octahazer [2017-10-31 21:20:32 +0000 UTC]

And yet another thing I'm buying from you-

👍: 0 ⏩: 1

UszatyArbuz In reply to Octahazer [2017-11-05 10:38:39 +0000 UTC]

Hope you'll like it

👍: 0 ⏩: 0

419pm [2017-10-31 21:14:48 +0000 UTC]

Are we allowed to add images such as stamps to one of the boxes?

👍: 0 ⏩: 1

UszatyArbuz In reply to 419pm [2017-10-31 21:46:49 +0000 UTC]

Sure, you can add any content you want. Stamps will work fine

👍: 0 ⏩: 1

419pm In reply to UszatyArbuz [2017-10-31 21:52:58 +0000 UTC]

Cool~! I plan on buying it soon <3

👍: 0 ⏩: 2

UszatyArbuz In reply to 419pm [2018-01-23 08:27:38 +0000 UTC]

I finally made a code with images, it's here if you're still interested!

👍: 0 ⏩: 1

419pm In reply to UszatyArbuz [2018-01-23 12:41:19 +0000 UTC]

GASP I LOVE IT
i will have to save up some points for it <33 thank you for letting me know!!

👍: 0 ⏩: 1

UszatyArbuz In reply to 419pm [2018-01-23 15:46:39 +0000 UTC]

👍: 0 ⏩: 0

UszatyArbuz In reply to 419pm [2017-11-01 08:53:12 +0000 UTC]

👍: 0 ⏩: 0

PaMonk [2017-10-31 20:35:26 +0000 UTC]

Excellent This is so uplifting and very wonderful. You are  Super Cool.

👍: 0 ⏩: 1

UszatyArbuz In reply to PaMonk [2017-11-01 08:59:06 +0000 UTC]

Thank you Dear!

👍: 0 ⏩: 1

PaMonk In reply to UszatyArbuz [2017-11-01 14:03:03 +0000 UTC]

You're Most Welcome.

👍: 0 ⏩: 0

WIN7TBAR [2017-10-31 20:30:10 +0000 UTC]

Amazing!!!
I wish I had another Core Membership.

👍: 0 ⏩: 1

UszatyArbuz In reply to WIN7TBAR [2017-11-01 08:59:13 +0000 UTC]

Thank you

👍: 0 ⏩: 1

WIN7TBAR In reply to UszatyArbuz [2017-11-01 11:32:16 +0000 UTC]

You're Welcome!

👍: 0 ⏩: 0

PurpleFoxKinz [2017-10-31 19:31:59 +0000 UTC]

I have a question.
Can you change the background of each square, to an image from your gallery? (And also it be clickable to where it'll actually take you to that specific deviation?)

👍: 0 ⏩: 2

UszatyArbuz In reply to PurpleFoxKinz [2018-01-23 08:27:49 +0000 UTC]

I finally made a code with images, it's here if you're still interested!

👍: 0 ⏩: 1

PurpleFoxKinz In reply to UszatyArbuz [2018-01-23 18:15:07 +0000 UTC]

Oh, awesome!
I'll buy it! Thank you for letting me know!

👍: 0 ⏩: 1

UszatyArbuz In reply to PurpleFoxKinz [2018-01-24 08:18:15 +0000 UTC]

Ah? okay well I hope you'll like it then! :d

👍: 0 ⏩: 0

UszatyArbuz In reply to PurpleFoxKinz [2017-11-09 10:27:11 +0000 UTC]

Not with this version fo the code, sorry I haven't think about it at all.

Do you mean like the cover (where is the text) should be an image and when you hover there suppose to be text on a solid background, or the backgroun after hovering should be the same image as well?
Beign clickable wouldn't really work since you can put links inside the box. The code wouldn't know where to lead after clicking the link (to the link URL or the background?)

Or do you wish to see just a gallery widget like this, without text and only images in the boxes?

👍: 0 ⏩: 1

PurpleFoxKinz In reply to UszatyArbuz [2017-11-09 20:54:47 +0000 UTC]

The background after hovering would be the same image as well, or without the hovering effect at all.

It may be easier to explain like this, than for me to explain with words. prnt.sc/h8f0fc
I'm bad at explaining stuff. XD

👍: 0 ⏩: 1

UszatyArbuz In reply to PurpleFoxKinz [2017-11-09 21:05:00 +0000 UTC]

Yeah, so just like a gallery thingie, I got it
I probably will be redoing it because not only you are asking for the option to add the images as background

👍: 0 ⏩: 1

PurpleFoxKinz In reply to UszatyArbuz [2017-11-09 21:26:30 +0000 UTC]

Oh okay!
I look forward to seeing it, and hopefully buy it one day!

I love your work.

👍: 0 ⏩: 0

xMoon-Paintx [2017-10-31 19:20:21 +0000 UTC]

it looks great! good job!

👍: 0 ⏩: 1

UszatyArbuz In reply to xMoon-Paintx [2017-11-01 08:59:43 +0000 UTC]

Thanks!

👍: 0 ⏩: 1


| Next =>