Shop Mobile More Submit  Join Login
Custom box: Discrete tabs (CSS) by UszatyArbuz Custom box: Discrete tabs (CSS) by UszatyArbuz


LIVE PREVIEW (no background):  Discrete tabs

CSS BASED WIDGET CODE DESIGN

Widget type: Featured deviation
Deviant type: Core member
Last update: 19 XII 2016

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


This box features two of your images, and have two tabs that are showing after hovering the arrows.

In the center, the main feature is a place for your images. Once you will hover the image, it changes for different one. You need to add your images in CSS part as described in Read-me file, and the images should be exactly 200px wide and 350px high (you can read more info after purchase).

On the left and right there are tiny animated arrows, and when you hover them a tab will slide out from under the image. Here, you can put your content such as about me, stamps, anything you want!

The design looks rather simple and it's cool for people who likes they profile to not be overwhelmed by the content that they want to put there. :)

Warning - Smiley Eyes  The code needs an update regarding being buggy in Chrome browser Warning - Smiley Eyes 


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 this free to use resources: .:Respect plz:.Pastel Social Icon Set | Stamp: I love Watermelon
Main images by Crymsie : Juliea Pagedoll and Juliea



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 sta.sh/0dhyk2qlb41
5. If you have any questions or problems with installing or editing it, note me for help :) (Smile)



Other similar resources:
   Custom Box: Crossroads signpost navigation (CSS) by UszatyArbuz
Do not hesitate to note me if something doesn't work right! I'll try to fix the code ASAP!

Add a Comment:
 
:iconshadowkhanz:
ShadowkhanZ Featured By Owner Edited May 2, 2017  Hobbyist Digital Artist
I have question how can I put in my dA page. ;w;
Reply
:iconpanda-pill:
Panda-Pill Featured By Owner Mar 2, 2017  Hobbyist Artist
Hello! I just wanted to ask if you have yet fixed the chrome bug? ; v ; I am really interested of this code but before I buy it I wanna know do I need to erase whole right side or if the bug is fixed so yeah
Looking forward to hear from you <3
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Mar 3, 2017   Digital Artist
Aw sorry, I didn't find time for that... lately I barely know my name ^^;
Here is another widget with tabs if it's the effect you're looking for, and it suppose to work everywhere fine - at least I havne't got any inquiries about it yet:
Custom box: Tabs devID (CSS) by UszatyArbuz
 :)
Reply
:iconpanda-pill:
Panda-Pill Featured By Owner Mar 3, 2017  Hobbyist Artist
That's completely understandable ; v ;
Bought it anyway because your codes are my favorites <3
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Mar 4, 2017   Digital Artist
Ah I hope you will like it nevertheless ^^; :D
Reply
:iconpanda-pill:
Panda-Pill Featured By Owner Mar 4, 2017  Hobbyist Artist
Don't worry I love it~ It's really neat and since they are scroll boxes I don't really need more than the left one ; v ; b
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Mar 5, 2017   Digital Artist
Alright then ^^; :D
Reply
:icondraco-night:
Draco-Night Featured By Owner Jan 25, 2017  Hobbyist Digital Artist
aaa this is so cool! i dont know if this counts as a question but ive been learning a bit of CSS coding and have been trying to get an image on a code im working on, but all the resource ive been using dont seem to be working. Could you possibly give me some recommendations or help?
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 26, 2017   Digital Artist
If that's in CSS, then the easiest basic class that have your image as a background is:

.name{
background: url("url-for-the-background-here") no-repeat;
height: Xpx
width: Ypx
}

where, name is the class name, in url-for-the-background-here you paste the URL for the background, and in X and Y you write the numbers for those properties.

Then you simply call it out with the html:

<div class="name"></div>
Reply
:icondraco-night:
Draco-Night Featured By Owner Jan 26, 2017  Hobbyist Digital Artist
 thanks so much!
Reply
:iconxmaalikx:
xMaalikx Featured By Owner Dec 22, 2016  Hobbyist Digital Artist
awesome but the right side doesnt open all the way. It seems to be stopping half way out. Is there a way to fix that? Or even completely remove the right side? I would buy this if it wasnt for that little bug. Also im using chrome if that helps
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Dec 22, 2016   Digital Artist
I already got report on this bug, it looks normal in Firefox but this way in Chrome. :P I can't really work on it right now, Christmas ae crazy and I'm leaving in two days, but yeah, you can remove the other tab easily by modifying the code :D
Reply
:iconxmaalikx:
xMaalikx Featured By Owner Jan 10, 2017  Hobbyist Digital Artist
Bought! I cant wait to use it and give it a try. Thanks again for such a cute code
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Jan 11, 2017   Digital Artist
Have fun :)
Reply
:iconkyo4kusanagi:
kyo4kusanagi Featured By Owner Dec 20, 2016  Professional Digital Artist
C=~~~~
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Dec 21, 2016   Digital Artist
:meow:
Reply
:iconkyo4kusanagi:
kyo4kusanagi Featured By Owner Dec 21, 2016  Professional Digital Artist
X3~~~
Reply
:iconaravil8:
Aravil8 Featured By Owner Dec 20, 2016  Student Digital Artist
faktycznie, fajny ^^
Reply
:iconuszatyarbuz:
UszatyArbuz Featured By Owner Dec 20, 2016   Digital Artist
;)
Reply
Add a Comment:
 
×
140 Purchase Purchased Download Purchase Soon
2.3 MB ZIP File. Includes ZIP
Custom box: Discrete tabs (CSS).zip
2.3 MB
Add Your Rating! Thanks for Rating! Change Your Rating




Details

Submitted on
December 20, 2016
File Size
2.3 MB
Link
Thumb
Embed

Stats

Views
1,102 (1 today)
Favourites
87 (who?)
Comments
18

License

Creative Commons License
Some rights reserved. This work is licensed under a
Creative Commons Attribution-Noncommercial 3.0 License.
×