march 28th check out the new event! A small little springtime event to bring some spark if you're interested!
november 17th sign up for secret santa 2019 has begun! make sure to get your wishlists in before december 1st if you wish to participate this year!
october 24th there are new site shop policies regarding our paid ad spaces that are to be considered effective immediately! give the announcement a read here.
june 19th with the coming of summer, we've decided to run summer themed writing bingo until august! if you're interested in completing writing prompts for bits rewards as well as the possibility of being entered into an elite group of bingo completionists definitely make sure to check it out!
july 1st we're open! welcome! we hope you guys are as excited as we are to finally be here on the new site. you can check out our opening announcement to find out the gist of all our features. if you have any questions, please don't hesitate to ask. here's to a great future! ♥
the skin was created by ulla specifically for pixel perfect and should not be copied, used as a base, or emulated under any circumstances. all of the content (graphics, templates, tutorials, etc.) belong to their respective owners. most site graphics are done by pixiv artist tofuvi. site banner by pixiv id 3490137
Okay I'm not 100% sure how to word this...But I'm kind of JUST dipping my toes into skin making, and I have something I'm having trouble figuring out...
I'd like to make the boards resize between my two sidebars
varianstestingsite.boards.net You can see what I'm working with here, when you resize the window, the boards and banner get covered by the sidebars, I'm trying to figure out how to make it so they resize with the window? If it's needed I can post whatever code snippets are needed!
okay so. full disclaimer here. you can do that fairly easily by turning all of your widths into percentages instead of pixels. the problem is..... you may not actually want to do that. the area for the forum is already fairly small (at least on my screen) and after a certain point, it's just gonna keep getting smaller without a minimum width in place, which then makes it rather moot anyway...
i'd recommend maybe doing 20% on either side for the sidebars and then make them have a max width of.... idk 400px? then do 60% on the wrapper area, center it, make sure the z-index is higher than that of the sidebars (you may need to add position: relative or position: absolute depending on if they're already there), and put a min-width of at least 650px. i'm pulling all those out of my rear though so. yeah.
i'm just offering the warning since a few years back i tried to do the same until i ran into that exact problem and realized the error of my ways. responsive skins are great but you gotta draw the line somewhere.
This is less about how to do it and more about what you're getting into. Making responsive skins is very time consuming and difficult, and why I'm just always lazy and tell my mobile users to use the Proboards mobile version. >x> You'll probably want something like this (I'm sure there's a Firefox version out there too) so you can get an idea of what it looks like at different resolutions. Just some things to consider:
On small screens, those sidebars are going to get really, really narrow if you make them fully responsive. Are you planning on putting content in there? Further, are they fixed? If they are, remember that people can't scroll them and will thus be unable to read any content if it falls off their screen. Paying attention to how tall the content is at the sidebar's thinnest is important. There is a min-width property just like there's a max-width one, so you can stop that to an extent, but that leads into the next issue.
If you put in some min and max widths, it might lead to a case where the boards overlap the sidebar. This means that some content is covered up. Are you okay with this? Do you have a way to deal with that so people can still get the information they need?
You'll want to make sure a reasonable amount of text is on each line. I think that's no less than 45 characters and no more than about 120ish, but I don't remember the exact numbers off the top of my head. So you'll want to check that on your narrow and wide options. Your forums are a little on the wide side on my screen (my screen is basically a small TV), but it's at levels I think would still be readable for me.
If you're making a responsive skin, you pretty much never want to set anything in pixels (IE, don't use width: 100px). You'll want to use viewport, em or percent so that all your padding, text, etc scales with the forum and doesn't look odd.
Responsive design is pretty hard. If you want an easier alternative so you can use some fixed width designs, there's always the option to put a toggle in for the sidebars. This way people with narrow screens can hide them when they're not looking at them. But these kinds of projects are good. If you can pull it off you'll have something pretty great.
To keep the forum clean and so people know that all threads in certain areas are current and that the OP is likely to still have interest, we archive threads that haven't gotten posts for 2 weeks. This thread is being archived for that reason. If you would like this thread reopened, contact a staff member.