HOME | DD
UszatyArbuz β Custom box: Tabs devID (CSS)
by-nc
#animated #background #backgrounds #batch #box #buttons #closed #code #codes #coding #colorful #commission #commissions #complex #condensed #css #custom #cute #decorate #decoration #design #designs #feature #free #freetouse #funny #hold #icon #icons #journal #label #menu #miminalistic #minimalist #onhold #open #pack #packs #payed #profile #resource #responsive #simple #skin #smooth #stamp #stamps #status #sweet #tab #tabs #widget #widgets #journalskin #p2u #artstatus #f2u #paytouse #freatures #custombox #coolprofile #looking #art #profilewidget
Published: 2016-08-16 13:00:06 +0000 UTC; Views: 26666; Favourites: 484; Downloads: 0
Redirect to original
Description
Commission Info dA Resources Prints Instagram ToyHou.se
LIVE PREVIEW (no background): Tabs devID
CSS BASED WIDGET CODE DESIGNWidget type: Featured deviation
Deviant type: Core member
Last update: 31 X 2016
Before purchase, please get to know with the On Premium Content and Refunds Q&A.
This box features one big image of your choice, and three labeled tabs, that you can open after hovering them and customize both labels and the content.
The image should be 310 x 350 pixels, added in CSS code (see how to do that in attached Read-me file). The three tabs are different size, and become a scroll box if you add enough content, so no content will be cut out from you profile. The open and closing animation is really smooth and nice for the eyes.
The code includes quite a lot of customized elements, such as: five headers, literature and image thumbs, a divider, block quote, links and more. All elements are listed and showed on the live preview (link above). You can use them both in the tabs, as well as in labels.
This code is great for people who would like to add quite a lot of content to their profile, and still keep them organized
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
For the preview, I have used this free to use resources: Deathly Hallows free avatar | Pastel Social Icon Set | Animated Pink Heart Divider | Cherish, Dream, Live Stamp Β | Rainbow Watercolor Custom Box Background | Status Bar Neutral
Art by Kyasarinn
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: 135
You um, you can chose it from the top bar when you edit the code, it's the nr 9 from here: Bar1
π: 0 β©: 1
Im having a problem. im trying to put it as my featured deviatation and it wont work.
can you help me?
π: 0 β©: 1
If you're getting only Journal categories for submission, check out "alternate submission" part of the Tutorial image that is attached. If its other problem, send me a note.
π: 0 β©: 1
I dont have alternate submission ;0;
π: 0 β©: 1
When you download the pack, in the tutorial.png on the bottom there is section with red background header called "Alternate submission"
π: 0 β©: 1
may you note me what it should look like?
I still dont see it..
and I only still get journal options...
sorry if you dont understand...
ill show you what I get in note
π: 0 β©: 1
When you open the pack you purchased there is an image file titled Tutorial.. on the bottom of it there is a section wit hred header called Alternate submission - basically that's how you should submit it when you have only journal categories. It's just there, there is no point in me sending things twice
π: 0 β©: 1
can i see a preview on this one? not a picture. the layout itself.
π: 0 β©: 1
It's in the deviations description
π: 0 β©: 1
I literally checked it twice
labels css boxH1 Lorem
H2 Ipsum
H3 Lorem
H4 Ipsum
H5 Lorem
Link, external, bold, italized, underlined. Divider:
Bock quote. My two natures had memory in common.
Unordered list:
thingthingthing
Ordered list:
onetwothree
:iconuszatyarbuz:
About me
Commissions - OPEN
Art Trades - ON HOLD
Requests - NEVER
Progress list
chibi for username icon for user full body for SomebodyElse
Art status & commissions
Stamps
π: 0 β©: 1
if i'm going to buy the zip file which costed 180 points, does it have the social media icons like the one shown in the preview above? the rainbow background too?
π: 0 β©: 1
I have literally wrote everything in the description! Social media icons are a free resource linked in there...
π: 0 β©: 0
i have a tinyΒ issue with the tabs cutting off at the end of the box, is there a way to make the tabs smaller so it atleastΒ only cuts off the title and not par of the text?
π: 0 β©: 1
Ah it's because the code is fixed size, it should fit most of smaller screens but will be cut ff on very small ones or mobile devices (I don't include mobile versions to any codes at al).. 
π: 0 β©: 0
DeAthLy hAllOwS sigN
i would really want this but i dont have any points, and im not core xD
π: 0 β©: 1
yEaH
Ow sorry.. you can earn points at dAhub again so maybe someday you'll get a core, or something differnet with the points
π: 0 β©: 1
Hi! I have another question! Finally got around to tweaking things, but, when I put it up, it's all the way to the left on a 1080p monitor and it just breaks the page flow, doesn't fit in the widget. Is there anything that can be done that can make it be centered? I should've asked before, but I didn't know that widgets could not be centered!
π: 0 β©: 1
Hmmm usually if I add (or change) margin property in the .journaltext and .journalbox classes for margin: 0 auto; everything starts to center again. 
π: 0 β©: 1
I tried to use margin: 0 auto; to center it in those classes but it didn't budge. I got it to center by changing the margins in the .deluxe and .sunflower classes, but the tabs stretch too far on both sides so the image covers everything.
π: 0 β©: 1
Change max-width: 630px to width:650px in the .journalbox class and in the same class add margin: 0 auto; and it will center the box.
Although, the image won't be in the center rather than the right border of the image, which is the actual center of the whole code design
π: 0 β©: 0
Hey! This looks really good, but I have a question, maybe you can help me out:
First: could it be possible to have multiple images inside the main square image? Ex: having them fade or scroll or move in some way that it could be possible to put custom pictures inside as some sort of a gallery preview?
Second: if not, can you point me in the direction of a good gallery preview widget for a profile page? I'm using this one right now( Preview ), but I would like another one since the current one is getting kinda stale for me. And I figured that I'd be finding them by the boatload, but it's proving harder than I first thought.
π: 0 β©: 1
The only way to add multiple artworks is to make a gif showing different arts, the code is made to feature only one file, if that's what you're asking for
Hmm I don't really know other gallery widgets than the one you showed me, I have a couple in my gallery but I doubt if you think they are better than the one you're using now.
I know SimplySilent had a nice gallery widget in her gallery , there were small thumbnails on the bottom and a big image on top, when you hover small thumbnail it shows the bigger version on top, or something like this
π: 0 β©: 1
These all are just fine for me, thank you! I don't know just how limited da's CSS options are, Will take plenty of fiddling.
π: 0 β©: 1
dA limits regarding CSS are pretty.. vast.. and unexpected usually, when I do new widgets it's always a try and error process when I encounter that dA doesn't allow to do certain stuff
π: 0 β©: 1
Yeah, I find it a bit silly that people need to rip the CSS from parts of the site and use those instead of just putting custom code in. Oh, is this code actually for a button and turns blue when it's hovered over? Oh well it's the closest thing I have right now I'm just gonna make that a content box.
The only real freedom people can have is through a Journal skin and the Featured Deviation box, which I don't think that's what they intended Journals to be used for, but here we are I guess.
π: 0 β©: 1
Yeah, indeed... I know somebody was working on a new feature where deviatnts could add background to the widgets (without ripping dA CSS - just a solution provided by dA staff itself - like an option for the widgets I guess?) but they never got to it...
π: 0 β©: 0
Are you able to explain a little better about what to do if I can't post it as a deviation? It only comes up for journal.
π: 0 β©: 1
On the bottom of the tutorial there is an Alternate Submission for cases such like this, basically create a new sta.sh writer document, submit it to your gallery (don't fill out the code!), and then edit it with Sta.sh writer. Once you edit it add the codes and your content.
π: 0 β©: 0
do i have to buy it
π: 0 β©: 1
Well if you want to use it then yes, since it a resource for sale
π: 0 β©: 1
can you change the colors or no?
π: 0 β©: 1
You can edit the code as you want including colors that is not problem, if you are asking if I will do that for you then not tat his point of time, sorry. Im to busy with my other stuff
π: 0 β©: 1
can you make some codes that don't involve being core? ^^
π: 0 β©: 1
I already have some in my gallery. There is a folder dedicated to non-core coding
π: 0 β©: 1
What's the problem? You can send me a note with details
π: 0 β©: 1
Nevermind. I figured it out.
π: 0 β©: 0
R.I.P I don't have enough points for did XC
π: 0 β©: 0
| Next =>