HOME | DD
CypherVisor — Semi Transparent Content-holder box Tutorial
by-nc-nd
Published: 2012-12-23 11:20:20 +0000 UTC; Views: 143038; Favourites: 5207; Downloads: 0
Redirect to original
Description
______________________________________________________________________________________________________»»»»»»»»»»»»»»»»»»»»»»»»»»» Exclusively for Premium members and Super groups only «««««««««««««««««««««««««««
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
How to use ?
Just copy the source code(s) below and paste it in your deviantID-widget box in your profile page.
Step 1 :Get content-holder boxes from my gallery here: [link]
Step 2: Use "disabledbutton" property in your code:
White box example code in the tutorial:
Light Blue box example code:
Background image that I've used for demo in this tutorial:
-----------------------------------------
Background link: [link]
by =TaNa-Jo
How to use a content-holder box? Please read this Custom Box Tips n Tricks Journal
Other tutorials
For deviantID-box widget:
For custom-box widget:
For New deviation-box widget:
Want to customize your profile more?
Check all my free resources + tutorials: [link]
Having any doubt? Please read this F.A.Q. + Tips n Tricks before writing a comment below.
______________________________________________________________________________________________________
I am a free resource provider for the deviantART community. If you like my free customization resources you can donate some
points
to me as an appreciation or support.¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
I take commissions to make custom journal CSS too. Check out my Journal CSS folder or Read-made Journal Skins . Send me a note to contact me.
______________________________________________________________________________________________________
Related content
Comments: 588
Is there a way to use this box but with the content inside being solid instead of being semi-transparent?
👍: 0 ⏩: 2
Unfortunately, I didn't get any code to do that (yet).
👍: 0 ⏩: 0
there's another tutorial above this one
👍: 0 ⏩: 1
fav.me/d5xkx4d
but if u mean a semi-whateever with content in it that's solid, then no
👍: 0 ⏩: 1
Ah, ok. Well I very much appreciate the help! Thank you. ^^
👍: 0 ⏩: 1
Is it possible for these to be scrollable?
-Nevermind I figured it out
👍: 0 ⏩: 4
may i could have the code too?
👍: 0 ⏩: 1
Turns out when you dissect each box, they all have a code for making them what they are. This box consists of two codes, one is the button content code, and the other is 'disabled button', turning it transparent. The other stuff is basically fancy text for coloring, font and spacing.
Go to a scrollable content box thing (there are different ones, depending if you want it vertical scrolling, horizontal scrolling, ect.) and add that to the very top of it before the disabled button code and add the extra <./div> at the end to do it. It may take some trial and error to get it to work but usually it does.
👍: 0 ⏩: 1
thank you!! ive managed to figure it out thank you!! :3
👍: 0 ⏩: 1
<3 That's great! :3 ^^ Happy to help!
👍: 0 ⏩: 0
I cant help but to look at this comment but how do you make these scrollable? I've tried looking but it doesn't work?
👍: 0 ⏩: 1
Turns out when you dissect each box, they all have a code for making them what they are. This box consists of two codes, one is the button content code, and the other is 'disabled button', turning it transparent. The other stuff is basically fancy text for coloring, font and spacing.
Go to a scrollable content box thing (there are different ones, depending if you want it vertical scrolling, horizontal scrolling, ect.) and add that to the very topic of it before the disabled button code and add the extra <./div> at the end to do it. It may take some trial and error to get it to work but usually it does.
👍: 0 ⏩: 1
ah okay thank you!!
👍: 0 ⏩: 1
OH MY GOODNESS HOW LONG IT TOOK.
-decorates profile in my work- Lol I'll just paste the codes.
These are still experimenting, and sometimes overlap with other codes making them both horzontal and verticle or one or the other, ect. But here you go:
-doesnt work like dumbass, I'll note you the code-.
👍: 0 ⏩: 1
You're welcome, hope it went through okay
👍: 0 ⏩: 0
For some reason when I do the light blue one, it looks blue and transparent to me, but to everyone else it looks like there isn't a content holder, only an outline. Is there any reason that you know of for this?
👍: 0 ⏩: 1
Need to have the donation poll widget installed in your profile.
👍: 0 ⏩: 0
Thanks so much! This was a big help
👍: 0 ⏩: 1
Omg. Just...I have one problem : I can't put a custom background with that code... Have you a code with a background?
👍: 0 ⏩: 1
Yes. (you can see the screenshot in the tutorial with the bg in it)
Just use the custom bg code from here: cyphervisor.deviantart.com/art… and enter your content-holder box code in the "body text here" part of the code.
👍: 0 ⏩: 1
With a semi-transparent content holder box?
👍: 0 ⏩: 1
is there anyway i can have a semi-transparent content-holder box without the heading?
👍: 0 ⏩: 1
Yeah, just choose the content-holder box code that doesn't have a heading.
👍: 0 ⏩: 0
Is it possible to make the inner box transparent, but the images or the text in it not? I tried it but it don't work.
👍: 0 ⏩: 1
Nah. This code makes EVERYTHING semi-transparent.
👍: 0 ⏩: 1
Hmm, I noticed that. Do you know any tutorial where only the inner box is semi-transparent?
Thanks anyway. :3
👍: 0 ⏩: 1
Nah, I don't thing there is tut available like that.
👍: 0 ⏩: 2
Isn't there a transparent color in css?
👍: 0 ⏩: 1
Transparent color?
I don't know what you mean? Why would you use a transparent skin? It won't be visible anywhere.
👍: 0 ⏩: 1
Sorry for being vague. Here's what I meant:
rgba()
Colors can be defined in the Red-green-blue-alpha model (RGBa) using the rgba() functional notation. RGBa extends the RGB color model to include the alpha channel, allowing specification of the opacity of a color.
a means opacity: 0=transparent; 1=opaque;Example usage:
rgba(255,0,0,0.1) /* 10% opaque red */
rgba(255,0,0,0.4) /* 40% opaque red */
rgba(255,0,0,0.7) /* 70% opaque red */
rgba(255,0,0, 1) /* full opaque red */ Or maybe you could use 2 divs! 1 with the background and 1 with the text. Such that the text does not become transparent.
Also, Isn't it possible to use a semi-transparent png as the background?
(I haven't tested this out and until I'm fully aware of all the limitations that dA has for CSS. God, I'm too pressed on time to test it all out. Please send me in the direction I can find them out. Maybe a link to a pre-compiled list of all limitations... I really hope there is one)
I hope you take this into consideration and please do tell me if and why they can't work.
👍: 0 ⏩: 1
Okay, I got it. (sorry for the late reply btw)
1) I have already tried that but didn't work
2) It is possible I believe, yeah
3) I am afraid even I don't have that
4) find codes is basically digging into the DA codes (specifically the CSS usable classes). Plus since they are pre-defined in DA you have to mix-and-match lot of code details to get the right result. That makes it very challenging.
👍: 0 ⏩: 0
That's a pity. Thanks a lot anyway. .3.
👍: 0 ⏩: 1
I want to add this to my custom box with a white background, but I don't have a cctextarea
th06.deviantart.net/fs70/PRE/f… " />
th06.deviantart.net/fs70/PRE/f… " />
th06.deviantart.net/fs70/PRE/f… " />
th06.deviantart.net/fs70/PRE/f… " />
👍: 0 ⏩: 1
Then you have to use it with your tags
👍: 0 ⏩: 1
By with img, do you mean every single one?
👍: 0 ⏩: 1
Yes, ehichever you want to make semi-transparent.
👍: 0 ⏩: 1
Okay!
Finished!
Thanks so much!
👍: 0 ⏩: 1
<= Prev | | Next =>