[tutorial] for posting templates

[sammie0]

This thread finally helped me with my box problem I've been having so thank you very much. I have two questions about the box. One does anyone know around how many lines before the scroll bar pops up if it's only around ten then just skip the next question. Two, Is it possible to have the scroll bar appear earlier on than it normally does?

[Kami]

Apr 11, 2017 11:09:47 GMT -8 sammie0 said:

This thread finally helped me with my box problem I've been having so thank you very much. I have two questions about the box. One does anyone know around how many lines before the scroll bar pops up if it's only around ten then just skip the next question. Two, Is it possible to have the scroll bar appear earlier on than it normally does?

The scroll bar "popping up" is dependent on the height set for the container and the size of the font. A large font in a small box will get it to appear sooner versus the same small box in a smaller font, simply because it takes up more of the box's height.

You can set the scroll bar to always be visible by adding overflow:scroll to the box:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultricies ipsum ut neque rutrum, eu viverra libero tempor. Donec sollicitudin placerat orci eget tristique. In porta arcu in turpis fringilla, eu tempor libero vulputate. Sed augue orci, consequat et massa in, efficitur elementum quam. Vestibulum tincidunt ultricies ipsum non convallis. Sed aliquet eros quis leo dignissim rhoncus. Mauris euismod varius mauris, eget auctor magna ullamcorper non. Nulla iaculis lacus dictum, mattis felis fringilla, euismod metus. Nulla dictum efficitur sem eget mollis. Aenean quis faucibus libero.

Vestibulum purus sem, faucibus quis sem luctus, scelerisque laoreet lacus. Aliquam pellentesque tellus et augue accumsan, a euismod odio ullamcorper. Vestibulum purus ligula, tempor in maximus et, commodo malesuada sem. Curabitur nec mauris dolor. Maecenas a erat et urna dictum gravida ut eu sem. Ut feugiat nulla vitae velit porttitor aliquet. Integer placerat, neque eu efficitur porta, dui ante posuere dolor, a euismod felis erat sed neque. Nunc consequat egestas sem, ut pretium quam condimentum nec. Phasellus congue magna nisl, a vulputate nibh pellentesque rutrum. Aenean ut rutrum est. Etiam sed neque id nisl tincidunt mollis. Proin accumsan id nunc ac pulvinar. Curabitur lacus libero, rhoncus ut sapien sit amet, consectetur hendrerit quam. Praesent quis quam maximus, aliquet nisi et, condimentum neque. Morbi efficitur orci sed lorem viverra, at fermentum massa porta.

Etiam id risus sed diam elementum congue. Integer porta facilisis dolor vitae eleifend. Ut placerat nunc eu magna egestas, at placerat dolor tempor. Quisque posuere eget urna nec elementum. Donec eu velit risus. Mauris dictum diam sed nunc condimentum, dapibus tristique magna rutrum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam tristique mauris vitae aliquam convallis. Aliquam pharetra nec ante quis consectetur. Nam suscipit dictum felis eget dignissim. Donec ex felis, dignissim at enim at, volutpat egestas sem. Vestibulum orci metus, semper sit amet turpis ut, tempus tempor massa. Nulla consectetur in est sit amet fermentum. Nullam et augue leo. Quisque augue ante, gravida sit amet lectus eu, egestas pretium eros. Suspendisse hendrerit venenatis lorem eget viverra.

[sammie0]

Thank you but is overflow:scrolltothebox: the actual and if not what is?

[Kami]

Apr 11, 2017 13:23:15 GMT -8 sammie0 said:

Thank you but is overflow:scrolltothebox: the actual and if not what is?

Sorry, the formatting must not have been clear. Add this to the box:

overflow:scroll;

[Eloell]

Replying here so that I won't lose this thread. Thanks!

[Retread]

Sept 14, 2018 7:09:08 GMT -8 Eloell said:

Replying here so that I won't lose this thread. Thanks!

Hello Eloell

Another way to make a thread easily available to you without replying (and bumping it) would be to Bookmark it.

Click on Actions then on Bookmark in the dropdown.

SPOILER: Click to show

Then you can click the Bookmarks link in the Navigation Bar to get a list of links to all the threads you've bookmarked.

PS: If you found this helpful tip useful, no need to reply. Just click the like button on my post and it will notify me.

[Scott]

Eloell , even tho Retread referenced "another way..." really bookmarking is the only way. One shouldn't reply solely for the means of adding the thread to their participated list.

Help Guide article: Using Bookmarks

[Eloell]

How's this:

This is such a helpful code. Thank you!

I know about bookmarks but I don't prefer them.

[startropic1]

I'm trying to tweak the OP code with background image to be fixed, (the text scrolls, but the background image does not.) but there is an issue with the left side of the image being cut off as if the image is being displayed in the context of the entire board page rather than within the confines of the post.

[div style="width:630px;background:url(url-of-image) no-repeat;background-attachment:fixed;" align="center"]
  As you can see I tried to set the width of the div to try to keep the image within the post, but it did not resolve the problem.  It looks nice in the "new post" box, but then the problems appear after it's posted lol.  The width of the image I am using is actually 1024px.  All the text and other embedded images, videos, & whatnot are aligned properly--it's just the bloody background image.

Can anyone share how to properly set a fixed background image?

[Kami]

Nov 25, 2023 10:31:59 GMT -8 startropic1 said:

I'm trying to tweak the OP code with background image to be fixed, (the text scrolls, but the background image does not.) but there is an issue with the left side of the image being cut off as if the image is being displayed in the context of the entire board page rather than within the confines of the post.

[div style="width:630px;background:url(url-of-image) no-repeat;background-attachment:fixed;" align="center"]
  As you can see I tried to set the width of the div to try to keep the image within the post, but it did not resolve the problem.  It looks nice in the "new post" box, but then the problems appear after it's posted lol.  The width of the image I am using is actually 1024px.  All the text and other embedded images, videos, & whatnot are aligned properly--it's just the bloody background image.

Can anyone share how to properly set a fixed background image?

can you link to a post where this is happening? i'm pretty sure i know why, but i would need to see it in action to confirm (note for the future: always provide a URL when asking for help on your forum).

[startropic1]

Nov 25, 2023 10:40:00 GMT -8 Kami said:

Nov 25, 2023 10:31:59 GMT -8 startropic1 said:

I'm trying to tweak the OP code with background image to be fixed, (the text scrolls, but the background image does not.) but there is an issue with the left side of the image being cut off as if the image is being displayed in the context of the entire board page rather than within the confines of the post.

[div style="width:630px;background:url(url-of-image) no-repeat;background-attachment:fixed;" align="center"]
  As you can see I tried to set the width of the div to try to keep the image within the post, but it did not resolve the problem.  It looks nice in the "new post" box, but then the problems appear after it's posted lol.  The width of the image I am using is actually 1024px.  All the text and other embedded images, videos, & whatnot are aligned properly--it's just the bloody background image.

Can anyone share how to properly set a fixed background image?

can you link to a post where this is happening? i'm pretty sure i know why, but i would need to see it in action to confirm (note for the future: always provide a URL when asking for help on your forum).

ecentertainment.freeforums.net/thread/392/dark-lord-grimmstone-solom-noctourne

(The post in question is the reply)

I did try putting everything inside a basic table, but that didn't really solve anything.  The text isn't quite aligned properly either, but I suspect it's the same problem effecting both the background image and the text.  (I also want to set a CSS style transparent/coloured scroll bar, but that's an entirely separate matter.)

[Kami]

Nov 25, 2023 11:13:03 GMT -8 startropic1 said:

Nov 25, 2023 10:40:00 GMT -8 Kami said:

can you link to a post where this is happening? i'm pretty sure i know why, but i would need to see it in action to confirm (note for the future: always provide a URL when asking for help on your forum).

ecentertainment.freeforums.net/thread/392/dark-lord-grimmstone-solom-noctourne

(The post in question is the reply)

I did try putting everything inside a basic table, but that didn't really solve anything.  The text isn't quite aligned properly either, but I suspect it's the same problem effecting both the background image and the text.  (I also want to set a CSS style transparent/coloured scroll bar, but that's an entirely separate matter.)

So, taking a look at the post, your coding is just incorrect. There's a lot going on there, that I don't really understand, but try this on for size instead:

[div style="height:768px;background:url(https://tinypic.host/images/2023/11/25/gothicpegHDghost.jpeg) no-repeat;background-position:center;overflow:scroll;"][div style="padding:10px;color:#ac5dfb;margin:auto;"]YOUR CONTENT HERE[/div][/div]


So what I did here was:
- Set a PARENT DIV for the background image. In this div I declared the image URL, the repeat behaviour, and the overflow behaviour. I also, very crucially, defined a HEIGHT. The height is the same height as the image. I also stuck the image position as 'center' so the image would always be centred within the div, but you can change this to left or right if you want to see the side design instead of the centre design.
- I created a CHILD DIV inside of the parent div that defined the colour of the font (it seemed you were using one colour, but if I'm wrong and you want more granularity in font colours, remove this property and value), the amount of padding the text should have from the edges, and set the margin to 'auto' so the child div would position itself in the centre of the parent div.

I will point out that your nesting is very messy, as well; I don't say this to be rude, but you have a lot of tags mixed up and whatnot and random bits of empty font tags and lots of bizarre spacing. I'm not sure how that happened, but I definitely recommend making sure that all tags are properly opened and closed, are properly nested (so it should be like [b][u][/u][/b], where the first opening is the last close), and making sure that any tags that have no content in them are removed. And to clean up the extraneous spaces -- unless of course, you're doing that intentionally for a specific visual effect.

You can see the results on this [test post], the first post in this thread is your original, the second post is taking the elements of your post and using the code provided above. You should still be able to add in additional images, declare new styles (eg bold or centred font), etc, as long as you keep it confined to the YOUR CONTENT HERE space.

[startropic1]

Nov 25, 2023 16:11:16 GMT -8 Kami said:

Nov 25, 2023 11:13:03 GMT -8 startropic1 said:

ecentertainment.freeforums.net/thread/392/dark-lord-grimmstone-solom-noctourne

(The post in question is the reply)

I did try putting everything inside a basic table, but that didn't really solve anything.  The text isn't quite aligned properly either, but I suspect it's the same problem effecting both the background image and the text.  (I also want to set a CSS style transparent/coloured scroll bar, but that's an entirely separate matter.)

So, taking a look at the post, your coding is just incorrect. There's a lot going on there, that I don't really understand, but try this on for size instead:

[div style="height:768px;background:url(https://tinypic.host/images/2023/11/25/gothicpegHDghost.jpeg) no-repeat;background-position:center;overflow:scroll;"][div style="padding:10px;color:#ac5dfb;margin:auto;"]YOUR CONTENT HERE[/div][/div]


So what I did here was:
- Set a PARENT DIV for the background image. In this div I declared the image URL, the repeat behaviour, and the overflow behaviour. I also, very crucially, defined a HEIGHT. The height is the same height as the image. I also stuck the image position as 'center' so the image would always be centred within the div, but you can change this to left or right if you want to see the side design instead of the centre design.
- I created a CHILD DIV inside of the parent div that defined the colour of the font (it seemed you were using one colour, but if I'm wrong and you want more granularity in font colours, remove this property and value), the amount of padding the text should have from the edges, and set the margin to 'auto' so the child div would position itself in the centre of the parent div.

I will point out that your nesting is very messy, as well; I don't say this to be rude, but you have a lot of tags mixed up and whatnot and random bits of empty font tags and lots of bizarre spacing. I'm not sure how that happened, but I definitely recommend making sure that all tags are properly opened and closed, are properly nested (so it should be like [b][u][/u][/b], where the first opening is the last close), and making sure that any tags that have no content in them are removed. And to clean up the extraneous spaces -- unless of course, you're doing that intentionally for a specific visual effect.

You can see the results on this [test post], the first post in this thread is your original, the second post is taking the elements of your post and using the code provided above. You should still be able to add in additional images, declare new styles (eg bold or centred font), etc, as long as you keep it confined to the YOUR CONTENT HERE space.

I actually agree, it is messy lol!  I didn't write it that way though.  Fixing the text in the main tab then switching to the bbcode tab just ended up making a complete mess of the bbcode due to the autocorrect mechanism that kicks in when you switch back to the regular tab after messing around with the bbcode.  I did, however, save a clean copy of the bbcode before the autocorrect started mixing everything up.

Thanks for new code though!

[Kami]

Nov 26, 2023 7:30:09 GMT -8 startropic1 said:

Nov 25, 2023 16:11:16 GMT -8 Kami said:

So, taking a look at the post, your coding is just incorrect. There's a lot going on there, that I don't really understand, but try this on for size instead:

[div style="height:768px;background:url(https://tinypic.host/images/2023/11/25/gothicpegHDghost.jpeg) no-repeat;background-position:center;overflow:scroll;"][div style="padding:10px;color:#ac5dfb;margin:auto;"]YOUR CONTENT HERE[/div][/div]


So what I did here was:
- Set a PARENT DIV for the background image. In this div I declared the image URL, the repeat behaviour, and the overflow behaviour. I also, very crucially, defined a HEIGHT. The height is the same height as the image. I also stuck the image position as 'center' so the image would always be centred within the div, but you can change this to left or right if you want to see the side design instead of the centre design.
- I created a CHILD DIV inside of the parent div that defined the colour of the font (it seemed you were using one colour, but if I'm wrong and you want more granularity in font colours, remove this property and value), the amount of padding the text should have from the edges, and set the margin to 'auto' so the child div would position itself in the centre of the parent div.

I will point out that your nesting is very messy, as well; I don't say this to be rude, but you have a lot of tags mixed up and whatnot and random bits of empty font tags and lots of bizarre spacing. I'm not sure how that happened, but I definitely recommend making sure that all tags are properly opened and closed, are properly nested (so it should be like [b][u][/u][/b], where the first opening is the last close), and making sure that any tags that have no content in them are removed. And to clean up the extraneous spaces -- unless of course, you're doing that intentionally for a specific visual effect.

You can see the results on this [test post], the first post in this thread is your original, the second post is taking the elements of your post and using the code provided above. You should still be able to add in additional images, declare new styles (eg bold or centred font), etc, as long as you keep it confined to the YOUR CONTENT HERE space.

I actually agree, it is messy lol!  I didn't write it that way though.  Fixing the text in the main tab then switching to the bbcode tab just ended up making a complete mess of the bbcode due to the autocorrect mechanism that kicks in when you switch back to the regular tab after messing around with the bbcode.  I did, however, save a clean copy of the bbcode before the autocorrect started mixing everything up.

Thanks for new code though!

Yeah np! I would strongly recommend that if you're using posting templates that you actually default to the bb code tab / don't switch over to the preview at all, just to minimise some of the parsing that occurs when you switch to reduce the risk of coding being funky when you submit.