Help questions about variables, hidden scroll, and more!

[esbees]

hi there ! i have an idea of what i'm doing thanks to experience editing basic tumblr themes & using bbcode on an old rp forum years and years ago. that being said, i'm still pretty lost with what to do on here!

- how do i hide the scroll bar while still being able to scroll?​

---- will i need to adjust the padding to keep everything looking centered on a coloured bg while hiding the scroll?​

​

- how many different sections of [div] should i have for let's say a reply post with a sidebar hat has two separate quotes and maybe a picture? ​

i understand nesting for the [div] boxes but what do i make a div box for? for each individual "item" (quote, picture, etc) ?​

​

- how do i change the positioning of what i'm working on?​

---- will things get messy if i do this to multiple [div]/items? ie i want the sidebar on the right but i also want the whole thing centered or off centered​

​

- how can i make variables to plug into my code? ie background: var(--quote-shadow-colour);​

---- where do i put these in my script​

---- can i add multiple factors to a variable like colour, font, and font-weight or do these all have to be separate variables ?​

---- if i were to bold something, could i have it also coloured/add shadow/etc to that?​

 

[Uxie]

- how do i hide the scroll bar while still being able to scroll?---- will i need to adjust the padding to keep everything looking centered on a coloured bg while hiding the scroll?

i'll direct you to this thread and this thread, which list the same method. the former discusses a little more about padding while the latter explains the scroll coding itself a little more!

- how many different sections of [div] should i have for let's say a reply post with a sidebar hat has two separate quotes and maybe a picture? i understand nesting for the [div] boxes but what do i make a div box for? for each individual "item" (quote, picture, etc) ?

i can't super visualise what your end product is, but i'd recommend applying the same logic you apply to powerpoints when you make elements — if you need to make a new element to arrange it in the exact way you want it, then make a new div.

- how do i change the positioning of what i'm working on?---- will things get messy if i do this to multiple [div]/items? ie i want the sidebar on the right but i also want the whole thing centered or off centered

also a lot of different ways to do this and not super clear what your end product is! if you have a code you're working on or at least a little diagram to present what you want to achieve, it would be easier to advise (*_ _)人

- how can i make variables to plug into my code? ie background: var(--quote-shadow-colour);---- where do i put these in my script---- can i add multiple factors to a variable like colour, font, and font-weight or do these all have to be separate variables ?---- if i were to bold something, could i have it also coloured/add shadow/etc to that?

would recommend reading through this post on another thread of mine, which should cover everything you've mentioned in the question. with regards to [b]bolding[/b] something, you can still style it with a separate div with the display:inline; property on it.

hope that helps! (~人^)

 

[esbees]

ahh thank you Uxie for your help! most of my questions were answered, thank you for that! i do see why a couple were confusing without an example though, so i found one to try and help visualize my goals. i love VALEN T's codes but this one feels the closest to what i'm trying to achieve.

the sidebar to the left of the text box, would i be able to have it on the right? what would i need to do? i've been looking at the code to try and dissect it but can't pinpoint what might putting it in the center instead of on the left nvm, i think i figured this one out!!

what i'm going for is to have the character's name as one blurb, a mood/location blurb below that, and then a textbox for a quote or ooc below that all in a sidebar, and then to have the text box for writing its own thing. hopefully i explained this well enough to give an idea haha

thank you for your time!!

-- update, i think i answered most of my questions enough, but thank you for the help and resources! i greatly appreciate your time!

 

[CloudySkyLoftyMoon]

I've seen this overflow: hidden workaround a lot and while it is effective, it doesn't remove the scrollbar it just hides it behind some other div or otherwise moves it to some location the user can't see. Instead of that, I would suggest you use scrollbar-width: none; which will save you some time and simplify your code.

scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll

[div=overflow: scroll; scrollbar-width: none;
width: 100px; height: 300px;
border: 2px solid black;] Content Here[/div]

Edit: This will work on most browsers, but it won't work on Safari because it isn't supported.

 

[fluticasone]

I've seen this overflow: hidden workaround a lot and while it is effective, it doesn't remove the scrollbar it just hides it behind some other div or otherwise moves it to some location the user can't see. Instead of that, I would suggest you use scrollbar-width: none; which will save you some time and simplify your code.

scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll

[div=overflow: scroll; scrollbar-width: none;
width: 100px; height: 300px;
border: 2px solid black;] Content Here[/div]

Edit: This will work on most browsers, but it won't work on Safari because it isn't supported.

didn't realize this had more support now! around the time the overflow hack started, this was unsupported. i went and checked and it's at 71.38% for global support. good enough for use in rpn.

 

[CloudySkyLoftyMoon]

didn't realize this had more support now! around the time the overflow hack started, this was unsupported. i went and checked and it's at 71.38% for global support. good enough for use in rpn.

OH! That makes sense, I was seriously wondering why everyone favored the overflow hack instead of this.

 

[fluticasone]

OH! That makes sense, I was seriously wondering why everyone favored the overflow hack instead of this.

ahaha yeah! a lot of scrollbar styling used to be webkit locked, so i assumed the same for this.