Post by joyride on Sept 3, 2016 15:24:28 GMT 10
I'm not sure if this is the correct forum to ask this on, but I was wondering how I add a scrollbar to the Proboards smiley menu after a certain number of smileys are displayed so the box/menu isn't yuge :/ I wish I knew how to code myself, but I really don't have a clue on what to do.
|
|
Post by Nathan Lecompte on Sept 3, 2016 21:39:53 GMT 10
Welcome to the forum! Yes this is the place to ask such questions, since it does go under the category of "Web".
I'm guessing you're using some additional smiley's, which is making it look cluttered? May I just ask what the sizes (or the maximum size) of the smiley's are?
|
|
Post by joyride on Sept 4, 2016 0:45:22 GMT 10
Welcome to the forum! Yes this is the place to ask such questions, since it does go under the category of "Web". I'm guessing you're using some additional smiley's, which is making it look cluttered? May I just ask what the sizes (or the maximum size) of the smiley's are? Great! And yes I am. Most of them are the "GIF icons" some forums use. I keep mine at 50 by 50 pixels. P.S. Your forum is beautiful by the way! I hope I can learn to be this great at coding some day.
Last Edit: Sept 4, 2016 0:45:58 GMT 10 by joyride
|
|
Post by Nathan Lecompte on Sept 5, 2016 16:26:27 GMT 10
Ah ok, well in your CSS (Advanced Styles section of the settings page), add this to the very bottom: //Smiley menu modification for 50x50 icons .smiley-menu { width: 105px; //Since the largest width of a smiley is 50x50, the width of the menu is set to 105px; 100px for two rows of smileys and 5px for any excess rendering height: 105px; //Same as before but then height wise overflow: scroll; //rather than the smiley items overflowing the menu, this will hide them and display a scrollbar to access them instead padding: 5px; //So the smileys don't line up to the edge of the menu (looks nicer) } .smiley-menu>li { height: 50px; //Set the height of the smiley width: 50px; //Set the width of the smiley } .smiley-menu>li>a { padding: 0px; //Remove the padding so the smiley fits the menu and the smiley image fills the smiley box height: 50px; //Set the height of the smiley link text-align: center; //Any smaller smiley's will be aligned to the center (looks nicer) } I've added some comments explaining what each line does so you can fiddle around with it yourself, you can remove the comments (comments all start with two slashes " // ") if you want; however if you leave it then it'll make it easier to understand when going back to it later on. Hope this helps! (if it doesn't work then, just show me a screenshot and I'll see what I can do )
|
|