HOME | DD
Valognir β [Custom Box Code] White Scroll Boxes
#box #bright #code #content #css #custom #da #design #deviantart #holder #scroll #style #white #scrollbox #contentholder
Published: 2015-03-20 17:09:36 +0000 UTC; Views: 45474; Favourites: 2118; Downloads: 0
Redirect to original
Related content
Comments: 398
I copied the right box code but nothing showed up.
π: 0 β©: 1
Well, you probably didn't copy the actual right box code then. It's not just the bit that comes after "Right box content".
<div class="ccexpanded mods-column-rr"><div class="ccexpanded"><div class="inputs modal new-elnino-modal"><img height="100" width="0" src="http://fc05.deviantart.net/fs71/f/2013/268/d/e/trans_by_daemon_moeroris-d6ns7fa.png"><div class="previewbox blt-ad-container"><div class="ppp">
RIGHT BOX CONTENT
</div></div></div></div></div>
π: 0 β©: 0
I've seen people using this, only they have a picture on the outside, overlapping the box.
Any help with doing this? Thanks in advance ^^
π: 0 β©: 1
I'm not exactly sure what you mean. Can you show me an example?
π: 0 β©: 1
Like this?Β prayimdead.deviantart.com/ on the right.
π: 0 β©: 1
That is not this box, but I can tell you how to do the overlapping image.
When you add an image using the img HTML tag, just add align="right" or align="left", depending on where you would like your image, inside of the image tag. Example: <img align="right" src="url">
π: 0 β©: 1
Argh thanks so much this is the only working scrollbox so far XD i have a question though, how to make the background not white? can we put an image in it? and secondly how did you get the scrollbar to look like that?Β
π: 0 β©: 1
It is possible to put a background image on it by using the regular background code found here: Custom-box Background Tutorial Just put the background code inside of the scroll box content area.
And the scroll bars are part of my OS theme, so there won't be a code for that... ^^'
Happy coding.
π: 0 β©: 0
Do you know how to edit the code to make the scroll
boxes wider or thinner?Β I tried changing the width in
this part of the code butΒ it didn't work at all.Β
<img height="100" width="0" src="http://fc05.deviantart.net/fs71/f/2013/268/d/e/trans_by_daemon_moeroris-d6ns7fa.png">
π: 0 β©: 1
Making it smaller or wider is not ... directly possible. You could use this code: [Custom box code] Wide content It will make the whole custom box area always use the biggest available width, adjusting depending on screen resolution, but you will have to set your own height. To make it smaller, you could use one of the "half width" boxes, but it would stay in one side.
π: 0 β©: 1
Thank you for helping me
the best way you could : )
I'll use your suggestion,
thank you thank you !!!Β
Β
π: 0 β©: 1
You're welcome. ^^ And if you run into any problems with coding, feel free to contact me.
π: 0 β©: 1
it worked !!! Ty !! ;U ;
i won't hesitate to ask you ifΒ
there's some coding things i need
ahhh ;v ; !
π: 0 β©: 1
How do you type out code without it actually making the thing it's meant for, like you have up there?
π: 0 β©: 1
Useful dA thingsAdd the username symbol of your choice including the pop-up window on click.
Premium Member
Code: <span class="user-symbol premium" data-quicktip-text="Premium Member" data-show-tooltip="1" data-gruser-type="premium">
Result:
Beta Tester
Code: <span class="user-symbol beta" data-quicktip-text="Beta Tester" data-show-tooltip="1" data-gruser-type="beta">
Result:
Premium Member 'til Hell Freezes Over
Code: <span class="user-symbol hell" data-quicktip-text="Premium Member 'til Hell Freezes Over" data-show-tooltip="1" data-gruser-type="hell">
Result:
Beta Tester and Premium Member 'til Hell Freezes Over
Code: <span class="user-symbol hell-beta" data-quicktip-text="Beta Tester and Premium Member 'til Hell Freezes Over" data-show-tooltip="1" data-gruser-type="hell-beta">
Result:
Senior Member
Code: <span class="user-symbol senior" data-quicktip-text="Senior Member" data-sh
Scroll to the middle.
π: 0 β©: 1
i'm p confused on the ' right box ' coding ^ ^
π: 0 β©: 1
Ask your questions and I shall try to answer them. ;D
Does anything not work?
π: 0 β©: 1
i tried copying the ' right box ' code and pasting it
but it doesn't appear orz
is there a solution to this ?
π: 0 β©: 1
I see you do have the center box and left box on your profile. Did you copy the full code and the right box just doesn't appear? Or did you copy parts of the code?
π: 0 β©: 1
I assume the right part of your profile contains these boxes? I'm looking into your code right now, and it differs from mine. Try copying again. ^^
π: 0 β©: 1
I'm kind of confused on where to put the content in the code. What is the top part for; the part above "Center Box Content"?
π: 0 β©: 1
I tried to test it on codecademy.com, but it won't do anything. I am completely confused and I need to figure this out quickly.
π: 0 β©: 1
I think I figured it out, but it won't work. Does this thing only work for premium memberships?
π: 0 β©: 2
Dude, it was 2am when you asked all that... xD Please give me some time to actually be awake and reply.
You put the content where I say "Content" in the code. The part above "Center Box Content" is... How do I explain.... Well, it actually is the code that makes this scroll box. These codes only work on DeviantArt, because it's not general HTML and CSS but rather uses DeviantArt's already existing coding. And it's only for Premium members, like any other code you will find, because DeviantArt only allows codes to be used by Premium members.
π: 0 β©: 1
Oh, sorry. I was only 10 where I am.
Thanks. However, I can use coding on my page anyway. Maybe it's just for some code, like images and link. (I don't see where it says content.)
π: 0 β©: 1
Image, link and other "basic" codes work. But these more complex codes, like "div" don't work for non premium users. It says content in bold font, in between the code snippets. You have to copy the full code, including the text parts saying "Center Box Content", "Left Box Content", "Right Box Content". Then replace the mentioned content parts, which serves as placeholder, with your own content.
I suggest you look up some HTML tutorials before you use these codes. I'll give you some keywords you should get to know: HTML basics, div-container, classes.
That should do for a start. You need some understanding of codes if you wish to use complex coding.
π: 0 β©: 1
Oh. Β For some reason I thought that bolded part just labeled which code was which box...
I know most basic coding, but I just had a huge brainfart while trying to read this.
π: 0 β©: 0
Yup, sorry dude ;;
Unless you can figure out how to put it in your ID box
π: 0 β©: 0
I've used it. Thanks so much, my page looks epic xD
π: 0 β©: 1
I'm glad you like this code.
π: 0 β©: 0
Thus far this is the only scroll box that worked for me. Thank you.
π: 0 β©: 0
Would it be possible to use these scroll boxes in a journal? If so, how would i do so?
π: 0 β©: 1
To be honest, I have no idea. But in a journal you can code your own scroll boxes, since a lot more HTML and own CSS is allowed there.
Try this.
Where you type text, write this:
<div class="scrollbox">
Your content goes here.
</div>
Then, in the css of the journal skin add:
div.scrollbox{
display:inline-block;
height:100px;
width:300px;
overflow:auto;
}
That should create a scrollbox. Haven't tested it though. ^^'
π: 0 β©: 1
hmmm... well, unsure of where to put that bit about the css(i put it in there, but nothing happened.)
I went to preview it, nd all i got was this
<div class="scrollbox">
the test failed
</div>
thats what i typed, and got no scroll box. Seems i may need to learn where to put coding in css...
π: 0 β©: 1
Wait, the div thing actually appeared in the preview? Hm... Of course it has to be enough content for the scroll bars to appear. But the div part should not appear...
I've got an idea. It might possibly be a bug I've encountered before. If you have copied the code from my comment: Try pasting the div part into a simple text editor like "Editor". Then copy it from there and paste it into the journal.
π: 0 β©: 0
Oh whoa I really like the scrolls on these. O:
π: 0 β©: 1
They are part of my windows theme... Sadly not included in this code... ^^'
π: 0 β©: 1
OH DANGIT THAT EXPLAINS A LOT.
π: 0 β©: 0
Imagine that with a squeaky chipmunk voice. And then a deep masculine voice: "I am Goerge."
π: 0 β©: 1
OH MY GOSH
I JUST
-laugths until words end-
π: 0 β©: 0
<= Prev |