Deviation Actions

LabLayers's avatar

Scrolling Content Boxes

By
Use this in any profile widget. You can put formatting and anything you can imagine inside it!

Without further ado, here is the code:


Code

Horizontal Scrolling Gallery: (Art Widgets Only!)
Make sure that there aren't any line breaks for this to work.
<div class="freeform-fullpreview ch-ctrl pp">:thumbXXX::thumbXXX::thumbXXX::thumbXXX::thumbXXX::thumbXXX:</div>

Vertical Scrolling Gallery:
<div class="freeform-fullpreview ch-ctrl pp">:thumbXXX::thumbXXX::thumbXXX::thumbXXX::thumbXXX::thumbXXX:</div>

Vertical Content Box:
<div class="freeform-fullpreview ch-ctrl pp"><h2>Content Heading</h2><hr/>
Paragraph text, Soufflé chupa chups candy canes danish biscuit chocolate bar chocolate!</div>


Colors

Blue:
<div class="freeform-fullpreview ch-ctrl indifade pp">CONTENT</div>
Green:
<div class="freeform-fullpreview ch-ctrl subscription_pitch has_subscription pp">CONTENT</div>
Red:
<div class="freeform-fullpreview ch-ctrl subscription_pitch no_subscription pp">CONTENT</div>
Devious Green:
<div class="freeform-fullpreview ch-ctrl altview h pp">CONTENT</div>
Black:
<div class="freeform-fullpreview ch-ctrl pager-dark rounded pp"><span class="smbutton-purple popup2-clear">CONTENT</span></div>
Sta.sh Blue (Requires Comission Widget)
<div class="freeform-fullpreview ch-ctrl stash-upload-box pp">CONTENT</div>
Purple: (as requested by *Drache-Lehre, not shown above.)
<div class="freeform-fullpreview ch-ctrl smbutton-purple pp">CONTENT</div>


For more custombox tutorials, check out #CustomizeYourProfile: customizeyourprofile.deviantar…

***A PREMIUM MEMBERSHIP IS REQUIRED IS REQUIRED TO FULLY CUSTOMIZE YOUR PROFILE WIDGETS!***


Need Help? Go read `CypherVisor's custombox guide before commenting!


Feel free to share/republish/modify this with everyone else! Credit is optional, but appreciated. Enjoy! :D
Image details
Image size
983x3788px 511.39 KB
Published:
© 2013 - 2021 LabLayers
Comments120
Join the community to add your comment. Already a deviant? Log In
SortaKindaPopular's avatar
at least someone still has these up im not moving to eclipse until they force us over
PopcornTea's avatar
your horizontal and vertical codes are the same...?
Accidental-Strix's avatar
THANK YOU SO MUCH FOR THIS !!
SelflessDevotions's avatar
Used for my front page :D
namasthay's avatar
does not work anymore I am affright 
DreamDrifter91's avatar
Still working for me, only in the widgets on your profile page:
Try this:

For the  
Vertical Content Scroll  Box:
<
div class="freeform-fullpreview ch-ctrl pp"><h2>Content Heading</h2><hr/>
Paragraph text, anything you want in the scroll box here!</div>

OR if you don't need/want a content heading part

<div**class="freeform-fullpreview ch-ctrl pp"> 
Paragraph text, anything you want in the scroll box here!</div>
just replace the ** with a single space

Also if you are still having trouble with it. You could make a sta.sh or google document of the things you would like in your scroll box and I can code it for you :) (Smile) 
moon-apprentice's avatar
Fun fact - if you want a non-rounded one without the outline, just remove the part of the code that says "ch-ctrl".

I know for a fact it works with that "black" one (which is actually dark grey and looks really good on top of a black background), but it probably works with the others... try it out, let me know how it goes.
ShinyRaii's avatar
is it possible to add the scroll bar into an already existing custom box?
like I have a different model/color box but I want the scrolling bar to appear in it anyways. Would that work?
DreamDrifter91's avatar
If anyone needs help with this - feel free to contact me.  :) 

I have a bunch of these vertical scroll boxes on my profile, and I have used the coloured boxes in the past so I know they work as well. 

REPLY TO THIS COMMENT FOR HELP
 :happybounce: 
SisterKosho's avatar
Can I get some help? How can I make it thinner? I want to have it like the columns where my stamps are, but I want it to be able to scroll instead of having them like they are now ;w;
DreamDrifter91's avatar

hello, I'm so sorry I haven't gotten to this sooner. I was tinkering with the code for a while trying to get a size difference to work but, unfortunately, now the new Eclipse style has bombarded us and html codes don't seem to work like they used to at this stage ;/ I'm so sosrry :( I wish I could have been of more help

SisterKosho's avatar
Ah don't worry! I've figured out the issue quite some time ago. I apologize for not mentioning that sooner. But thank you for trying to help!
DreamDrifter91's avatar
Endorell-Taelos's avatar
For the vertical scrolling box, do you know how to make it wider?
DreamDrifter91's avatar

Hi, oh gossh this is really late. I'm so sorry. I tried to work it out but I'm not sure how to make the scroll box larger :( I think they were a set size <sub> (and now with Eclipse- I can't work out at all how to use the html codes to edit widgets, or even if widgets are a thing with the new design :ashamed: ) I'm so sorry </sub>

DreamDrifter91's avatar
For the  Vertical Content Scroll  Box:
<
div class="freeform-fullpreview ch-ctrl pp"><h2>Content Heading</h2><hr/>
Paragraph text, anything you want in the scroll box here!</div>

OR if you don't need/want a content heading part

<div**class="freeform-fullpreview ch-ctrl pp"> 
Paragraph text, anything you want in the scroll box here!</div>
just replace the ** with a single space

Also if you are still having trouble with it. You could make a sta.sh or google document of the things you would like in your scroll box and I can code it for you :) (Smile) 
LynKofWinds's avatar
Hey, hopefully this isn't too unrelated, but I've been testing some out on my profile, and I've used a scrolling box before, but sometimes it just doesn't look good.... do you happen to know if there's a way to put content over your background image in a custom box, and just have the text itself be able to scroll without it being in it's own little scroll box?
DreamDrifter91's avatar
Holy wow this is a laaaaaaaaaate reply. It got buried in my inbox :ashamed: 

Unfortunately I only know these scroll boxes and the only way they seem to work is within their own little box

you can however put an image / background BEHIND the little scroll box (like I have done with them on my profile page ) 
LynKofWinds's avatar
I actually found a working wide custom box code, which has it so that I can just write on top of my background, and it will scroll if the content ends up being longer than the length of the image. Thank you though!
bIissey's avatar
im trying to use someones code with a background, but its not working at all Q_Q
DreamDrifter91's avatar
Sorry this is a late reply.
The scroll-box will almost always sit ontop of the background of the widget as far as I have seen...

If you still had the link to the background you were trying to use I could have a look and try to get it to work for you :)  
SugarMoonFox's avatar
How do you make the widget the scroll box is in longer?
DreamDrifter91's avatar
The scroll box is always the same size...

As far as I'm aware to make the widget itself longer just include more content to it :) 
you can see on my page I have two scroll boxes in almost every widget and that makes them a bit longer .
SugarMoonFox's avatar
Oops.. I meant to say how can I make the box larger?
The last time I tried it, the box came out really long and skinny
Join the community to add your comment. Already a deviant? Log In