I am using the forum at 70%, I would like to know if there's an easy way I can work out what size my side panels should be?
First of all, what is the overall dimension of the image I should create and then, how narrow should the panels be to fit without the forum covering them ?
My profile on here has a link to my forum.You'll see what I mean about side panels
Thank you, in advance for your help.
77 views and no answers? Not even someone telling me it's impossibru to work out? :(
PS.
I tried measuring it with those onscreen measuring tools like "measureit" in Chrome extensions, but If I create an image to the dimensions that claims I need, it looks like I am creating a website for a dolls house! :((the images come out TINY)
77 views does not mean 77 people saw the topic, and there are also bots adding to that.
And it's a little unclear what exactly do you want measured, or what do you want to do. If it's the measure of your sidebar you can check that by clicking "inspect" on it on your browser, you will find a box with the measures there.
Also, with your site at a percentage, it's going to look different on every single different screen... you can't just pick a fixed width image or side column on a percentage based design
Edit: Wait, what side panels are you referring to? If it's your background, they are always going to be a different size on every monitor. Since your forum is set at 70% you can make each add to 15% of your image. Then just use a high quality image as pointed below by Gluz.
And as Kindred said, this is how your site looks on a different monitor (one of many possibilities), so you might want to rethink everything you're doing...
I would recommend a large image with the most standard big resolutions, like 1920x1080 or 2560x1440, with background-position: top center and could be with background-size: 100% 100%.
That way it will fit any screen size almost the same way, if your forum is in %.
The side panels need to be visible no matter what resolution, So the forum + background would all resize together depending on the resolution of someone's set up - I don't want the background (side panels) to be less visible on one screen than on another - ie I don't want the images to disappear behind the forum at all.
So what I was asking in a severely unclear way is:
Making the background in photoshop:
What resolution would I need to make the background in, what size would each side panel need to be in the background image, ie how many pixels should left and right panels be in photoshop, and then:
Making the background and the forum fit properly together:
What settings would I need in .css etc to make it all fit nicely no matter what resolution someone is using?
So if I have a background, and I want the forum to be 70%, do I take the resolution (which I would choose at 1920 x 1080) and calculate 15% of the 1920 to make each side panel?
that will probably work on some screens.... but as I said, it's not going to work as nicely as you want it to...
How am I supposed to create a background that works on all screens?
Most of my forumers use 1080p so I think I'll work on that and put somewhere "This forum looks best in 1080p resolution".
Right, I've looked on my chromebook and my test-sides are not even visible, so next question.
Is there anything I can place in my CSS that will force the entire background/forum/everything to resize to resolution of browser?
Because it does it for all the other themes I have seen, surely there's something I can put in the css to make the background 100% no matter what resolution?
Edit: nvm, just seen Gluz's reply
Edit: Whole forum & Background now resizes as per screen-res
Quote from: Beowulf1976 on June 19, 2017, 05:41:54 AM
So if I have a background, and I want the forum to be 70%, do I take the resolution (which I would choose at 1920 x 1080) and calculate 15% of the 1920 to make each side panel?
Yes, that's the easiest solution. Just have in mind that although the width will remain constant with percentages, the height will not always be proportionate. You can have the image stretch to both height and width (but will look distorted for some people), or cut in the corners if it "overflows" beyond a person's browser window limit. Gluz' sample code stretches both sides, but the one you now used (background: 100%) leaves the bottom corner out.
If you want, you can also make higher resolution images, but set them to be used only if a person's monitor is large, ex: you can make a 4000px wide image and define that it will only be downloaded/used if the browser has a resolution larger than 2000px. This way you have images for different resolutions without making everyone download a really large image.
Thank you :)