Shop Mobile More Submit  Join Login
Scrolling Custom Box Widget by SimplySilent Scrolling Custom Box Widget by SimplySilent

Huge thank you to =fluf-studios who helped me figure out this code! :dummy:


To learn how adding a background image to your custom box works, make sure to read =TaNa-Jo's wonderful Custom Box Tutorial. The same sort of concept can be used here.




Scrolling Custom Box Widgets

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="previewbox"><div class="popup2-moremenu"><div class="floaty-boat"><br><img src="IMAGE URL"></div></div><div class="gr-box gr-genericbox"><div class="pp"><div class="pp">CONTENT HERE</div></div></div></div>


To increase or decrease the height of the widget, add or remove <br> from the beginning of the code.

If you insert a custom box background, the content of the widget will match the height of your background, possibly leaving you with a giant awkward gap at the bottom of your widget. For tips to fix this, check out the tutorial linked below.



Scrolling Non-Custom Box Widgets

This method uses the same code but is a little more complex, so I have a tutorial for it here:

Works for any widget that has a text box.
Add a Comment:
 
:iconkinzley:
Kinzley Featured By Owner 12 hours ago  Student Artist
how do you change the width??
Reply
:iconjaymeri-kun:
Jaymeri-kun Featured By Owner Mar 14, 2015  Hobbyist Digital Artist
So I used this code, really useful, however, it scrolls all the way down the pic I used for the background :/
didn't seem to do anything, help?
The background is really really long.
Reply
:icon2oliizzle:
2oliizzle Featured By Owner Mar 21, 2015  Hobbyist Digital Artist
you would crop the picture to the size you wanted uvu
Reply
:iconcydneighhh:
CYDNEIGHHH Featured By Owner Feb 21, 2015  Student General Artist
Question:D!
How Would I make a page look like this? blazingbacon.deviantart.com/
Really love how it looks!
(Top left box) With an image on the side while there's a custom scroll box.
I just wanna do it for a status box.
Then the rest be scroll boxes with BGs and no pictures on the sides
for other info/stuffs~
Like I have no idea how to (stretch?) the boxes, so it's not small D:
Reply
:icon2oliizzle:
2oliizzle Featured By Owner 6 days ago  Hobbyist Digital Artist
i'm just going to take a guess and say you would probably use this
Fun with Columns

i may be wrong so if i am i apologize in advanced
Reply
:iconcydneighhh:
CYDNEIGHHH Featured By Owner 6 days ago  Student General Artist
Thanks so much!
Btw, I adore your icon >3<
Reply
:icon2oliizzle:
2oliizzle Featured By Owner 5 days ago  Hobbyist Digital Artist
No problem uvu

Thank you
Reply
:icondatsunnne:
datsunnne Featured By Owner Feb 1, 2015  Hobbyist Digital Artist
how do i have multiple ones on one custom box???
Reply
:iconpastel-chuu:
pastel-chuu Featured By Owner Dec 31, 2014  Hobbyist Digital Artist
do you know how to make scroll boxes like the ones here?
sueweetie.deviantart.com/
Reply
:iconifabulicious:
iFabulicious Featured By Owner Jan 23, 2015
i want to know this too.. my head hurts from searching for an answer to this! ><; 
damn
Reply
:iconpastel-chuu:
pastel-chuu Featured By Owner Jan 24, 2015  Hobbyist Digital Artist
yeahh idk ;; i cant figure it out
Reply
:iconifabulicious:
iFabulicious Featured By Owner Jan 24, 2015
i think it kinda worked for me ?
Reply
:iconpastel-chuu:
pastel-chuu Featured By Owner Jan 24, 2015  Hobbyist Digital Artist
oooh how did you do it?
Reply
:iconifabulicious:
iFabulicious Featured By Owner Jan 24, 2015
Used the regular scroll box code  <3
it changed automatically to a grey scroller bar thingie xD 

Scroll-ception Widgets by SimplySilent
Reply
:iconpastel-chuu:
pastel-chuu Featured By Owner Jan 24, 2015  Hobbyist Digital Artist
ummm im terrible at this kind of thing
i used this code before but broke it somehow ;;
idk what to do.........
Reply
:iconifabulicious:
iFabulicious Featured By Owner Jan 24, 2015

<img src="BACKGROUND IMAGE URL">


TEXT OUTSIDE
<br><br><br>

<br
>
<img src="SCROLL BOX IMAGE URL">
I'M A SCROLL BOX
<div


put the code in like this in ur custom widget.

BACKGROUND IMAGE URL: is the background of ur custom widget like mine has dots.
TEXT OUTSIDE: is where i have on my profile put the titles
SCROLL BOX IMAGE URL: i did not change this which keeps it white (do not delete either)
I'M A SCROLL BOX:  this is where you putt the text in that you want in the scroll box c:

hope this helped <3

Reply
(2 Replies)
:iconklo-chan:
Klo-Chan Featured By Owner Dec 23, 2014  Student General Artist
Uhh,right now I'm using this Scrolling Boxes,but the Contect Holder Boxes have become huge,is there any way of reversing it without removing the Scroll Box?
Reply
:iconecho-80:
Echo-80 Featured By Owner Dec 22, 2014  Hobbyist General Artist
Can someone please help me,

I'd like to have a scrolling box with a background but instead of the background moving with the scroll, I'd want it to stay still and the scrolling would only move the text I put in it while taking up the whole custom box as shown in this tutorial. I'm guessing I need to change the <*div class=" text "/> part but to what?
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Dec 23, 2014
I think the best way would be to use this scroll box: Scroll-ception Widgets by SimplySilent

Go down in the artwork description to the part that says Regular Scroll box, and try that. :)
Reply
:iconecho-80:
Echo-80 Featured By Owner Dec 23, 2014  Hobbyist General Artist
I tried it and it's not what I was looking for. I wanted it the whole custom box to be a scrolling box but instead of the background moving with the scroller, I want the background to stay still as you scroll and only the text and content to move with the scroll.
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Dec 23, 2014
Ah, I see. As far as I know, that's unfortunately not possible. :hmm:
Reply
:iconecho-80:
Echo-80 Featured By Owner Dec 23, 2014  Hobbyist General Artist
I'm sure it is possible just no one has found the formula to it yet.
Reply
:iconsheeppoops:
SheepPoops Featured By Owner Nov 20, 2014  Student Digital Artist
does anyone know how to put a scroll box on something like this?
sheepymelly.deviantart.com/

But with the background in tact? ;;u;;
Im looking everywhere and just cant figure it out. I see some people do it, but I just cant figure it out!
Reply
:iconthegirlofponiez:
TheGirlOfPoniez Featured By Owner Edited Dec 14, 2014  Hobbyist Digital Artist
You just keep the code for adding the background within the scrolling option!






Reply
:iconsheeppoops:
SheepPoops Featured By Owner Dec 14, 2014  Student Digital Artist
Ah I figured it out haha
but thankyou<3
Reply
:iconthegirlofponiez:
TheGirlOfPoniez Featured By Owner Dec 14, 2014  Hobbyist Digital Artist
Oh okay, that's good ^^

You're welcome 
Reply
:icongiyb:
Giyb Featured By Owner Edited Oct 27, 2014  Hobbyist Digital Artist
What is "Content here"? There are places that tells me that put in the codes but I do not know how to do.
  Just I know that must be put the URL information when you indicate me.
Reply
:iconadoptspound:
AdoptsPound Featured By Owner Nov 16, 2014
"Content here" means that you put the text you intended to put in the original custom box. So, for eg., I would put this "I'm Vika, but most people go by Vi or Cookie!" where it says "Content here", so the text appears on the custom box on my profile. Does that make any sense?
Reply
:iconmanga-dreamz1117:
Manga-Dreamz1117 Featured By Owner Sep 16, 2014  Student Artist
SO just put this in your custom box?
Reply
:iconmyshwie:
Myshwie Featured By Owner Oct 24, 2014  Hobbyist Traditional Artist
You can delete content here and <img src="">
Reply
:iconorribu:
orribu Featured By Owner Aug 26, 2014  Hobbyist Digital Artist
Why are you always so amazing. ;w; <3
Thanks so much for this code; I've been searching for itt ;w; <3
Reply
:iconkuchikixrukia:
KuchikixRukia Featured By Owner Aug 13, 2014  Student Artisan Crafter
Ahh this helped so much with lessening the load and stuff on my page. thanks <33 !
Reply
:icongaminggoru:
GamingGoru Featured By Owner Aug 11, 2014  Student Digital Artist
Is there a way to make a scrolling content holder (with a background) within the custom box? (Thought it would give a little extra depth to my custom boxes).
Reply
:iconcocobunnie:
cocobunnie Featured By Owner Jul 13, 2014  Student Filmographer
Hi there! I think you already answered this question, but I'm still a bit confused - If I want to have a custom box background, but I only want one scroll bar, do I use this tutorial or this one? Currently I'm using this one, but I can't get the background to repeat so after a scroll or two there's just a white nothing for a background. Thanks for the help and the wonderful coding!
Reply
:iconcarbon-vanilla:
Carbon-Vanilla Featured By Owner Edited Jul 8, 2014  Hobbyist General Artist
Hmm, I played with the code for your Scrolling Custom Box Widget and even added your Adjustable Background Scroll Code but since I'm using a Custom Background (made by me) and CypherVisor's Shiny Content-holder box-2 (Default), the scroll bar seems to expand the content boxes width to the dimensions of the custom box. I know that my background image is long and I'll have to play with it's margins till I find a desired size appropriate for your Scrolling Custom Box Widget code in that, it removes the dead space.

I have the code on the bottom of my profile, testing, so my real question is what did I do wrong in the coding that the scroll bar forced the content box to expand to the sides? If you want the code for analysis, I can give it to you... no problem.
Reply
:iconwilliam-black:
William-Black Featured By Owner Jul 1, 2014  Professional Digital Artist
This is an awesome resource, thank you so much.
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Jul 5, 2014
:heart:
Reply
:iconkillercats101:
KillerCats101 Featured By Owner Jun 27, 2014  Student
Thank you for sharing this ^-^

I've used it for my stamps box :D
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Jul 5, 2014
No problem. :)
Reply
:iconmissimoinsane:
missimoinsane Featured By Owner Jun 17, 2014  Hobbyist Digital Artist
This is brilliant :heart:
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Jul 5, 2014
:huggle:
Reply
:iconsavagedmutt:
SavagedMutt Featured By Owner Jun 5, 2014
Doesn't work...
Reply
:iconinvisibleking:
InvisibleKing Featured By Owner May 30, 2014  Hobbyist General Artist
Hei, the box covers extensible menius like "send a note" or "gifts" or submit/browse da etc. [if you visit my page you'll understand///] I was wondering if you have any idea how it could be fixed? Like, is there something to add in order to stop it from being on top of everything?
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Jun 5, 2014
I don't think there's a solution to it. :hmm:
Reply
:iconinvisibleking:
InvisibleKing Featured By Owner Jun 5, 2014  Hobbyist General Artist
<snall> aww.. k, thanks for reply tho <3
Reply
:iconcheshire--fox:
Cheshire--Fox Featured By Owner May 3, 2014  Hobbyist Digital Artist
Hello, it appears that we can't put any text or images before a scroll box once you inserted it in your custom box... It perfectly works inside the scrolbox, but outside, nothing 8D I can't understand it because I use simple custom boxes for it... The custom box doesn't seem to hide the text either, since the scroll box never changes place no latter how many lines we skip ^^' (I hope I was clear, English isn't my native language :'D)
Would you know if this problem is fixable?
Reply
:iconzaellrin:
Zaellrin Featured By Owner Mar 22, 2014  Professional General Artist
Oh! Out of curiosity! Is there any way to center align everything in the box?
Thank you so kindly! :)
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Mar 22, 2014
Before you put in your text, write < div align="center"> (without that first space)
Reply
:iconzaellrin:
Zaellrin Featured By Owner Mar 22, 2014  Professional General Artist
Thank you so kindly! :)
Reply
Add a Comment:
 
×




Details

Submitted on
July 31, 2013
Image Size
27.8 KB
Resolution
609×325
Link
Thumb
Embed

Stats

Views
25,636 (2 today)
Favourites
1,572 (who?)
Comments
145
Downloads
32
×