Kami
Forum Cat
Posts: 40,199
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,199
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Mar 14, 2023 12:18:35 GMT -8
Thanks Kami, I appreciate your time explaining a little more in depth to help me understand! I'm mostly just a 'tweak until something works' person and not properly versed in the language of coding, so it's helpful for me to learn! Yeah any time! And honestly, I appreciate the efforts to make your site responsive to the best of your ability. It's just the unfortunate case of PB not being inherently set up for it as a whole that's really the issue, and the time / skill required isn't something a majority of PB forum admins have. TBH I think it's fine if you leave it as-is, and just specify that your forum is optimised to be viewed on desktop; mobile users can still get the full experience, it just isn't tailored to them. Alternatively you could try your hand at making something fully responsive, but there's no pressure or obligation :P
|
|
Kami
Forum Cat
Posts: 40,199
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,199
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Mar 14, 2023 6:43:56 GMT -8
Yes, this worked! It stopped the big gap at the side, thank you! But I'm finding the whole page on the post/edit page is bigger - like the banner + text is cut off because it's not zoomed down and everything else is zoomed in to read clearly, whereas when looking at any other page it's zoomed back so it's all proportioned and you must zoom in to see better. If that makes sense? Is that part of the editor's effects? TLDR: Yes, because the posting page iframe is responsive and the rest of the forum isn't really. Longer: It's partially the editor, and it's partially how PB is structured. As I mentioned initially, PB is not inherently mobile compatible. If you wanted to tweak more than a handful of things, it would require a significant rewrite of PB's underlying structure (you can see an example at my own site, here: [ home page] versus [ posting page]) so that every page a) had multiple media queries that cover a wider range of sizes of desktop, tablet, and phone; and b) actually had almost entirely different CSS dependent on the screen size as defined by the aforementioned media queries. What is effectively happening on the PB end is that you've turned off "mobile" view, which means that you're by default requesting 'desktop' view. Desktop view is just that: desktop. It will fit the entire forum onto your phone, emulating what it would do if you were actually on a desktop device, unless you've otherwise specified (in the CSS) to show something else. Some of PB's default structure is responsive, some isn't, and mobile browsers don't handle mixed content like that particularly well. The editor page is one of the parts of the default structure that is actually inherently responsive to a degree. If you notice, your banner text is actually truncated on this page, because the elements on it are responsive, allowing the site to "zoom in" as it were (it's not actually a zoom, it's just responding to the device's default sizing). The home page, on the other hand, assumes you're on a desktop device because there's nothing in the CSS that tells the browser otherwise other than a fluid width (which only allows the width to respond to the viewport, but does not tell any other element on the page that they need to be displayed differently), so you get the "whole" page versus a page that is specifically designed with mobile in mind. ^ If you look at my site as an example, the responsiveness (which is still imperfect) is a result of distinct media queries that cover a range of viewport sizes, and different CSS declarations for a vast majority of them. I have 4 media queries (one for small viewports, medium, large, and extra large; I don't always use them simultaneously as some elements may not need to have distinct versions between viewports, but the widths of the target viewports are are pre-declared so that I can use them as needed. Here's a snippet of what my CSS looks like with an element that needs to look different at different sizes of screen: @media only screen and (min-width: @screen_md) { /* 768px + */ .board--card-full-width { grid-column-end: span 2; flex-direction: row; align-items: center; }
.board--card-full-width .main { max-height: none; max-width: 50%; padding: 25px 30px 30px 50px; flex-basis: 50%; } .board--card-full-width .main::after { background-position: left center; background-size: contain; width: 650px; height: 650px; border-radius: 50%; position: absolute; top: 50%; left: 0; z-index: -1; transform: translateY(-50%); } .board--card-full-width .main .icon { padding-bottom: 15px; } .board--card-full-width .main .desc { margin-top: 12px; }
.board--card-full-width .avatar { max-height: none; max-width: 70px; margin-top: 0; margin-right: -35px; }
.board--card-full-width .recent { padding: 30px; } }
@media only screen and (min-width: @screen_lg) { /* 1024px + */ .board--card-full-width .main { padding: 25px 60px 30px 75px; }
.board--card-full-width .recent { padding: 30px 60px; } }
@media only screen and (min-width: @screen_xl) { /* 1200px + */ .board--card-full-width { grid-column-end: span 3; } }
As you can see, my media queries cover a distinct grouping of sizes with different behaviours called out for each for this particular element. You can use the inspect tool from the right-click menu to emulate different sizes. I haven't captured everything (there are way too many devices with different sizes), but broadly speaking I've captured a wide array of them by using these 4 queries repeatedly.
|
|
Kami
Forum Cat
Posts: 40,199
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,199
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Mar 13, 2023 16:52:15 GMT -8
Thank you, much appreciated!! So, after playing with this a bit I cannot figure out a way to impact the editor better, but I don't actually think that's your problem. Looking at the site on my phone, I would hazard a guess and say it's probably not hitting your media queries right due to the navtree; on my iphone, it's mostly fine actually with only the slightest bit of horizontal scroll -- I'm seeing that as a result of the nav tree being longer across than my screen is wide. The same seems to be true for your screenshot. You can test it out by adding display: none; to the nav tree class just for your mobile view media query and see if that helps prevent the scrolling.
|
|
Kami
Forum Cat
Posts: 40,199
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,199
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Mar 12, 2023 17:46:31 GMT -8
Hi, I'm back again, sorry! I've gone through and everything else appears fine on mobile view except for the editing/posting pages. The main page: i.imgur.com/LHdyhIV.pngPost view page: i.imgur.com/7ATNbOV.pngThe above two appear normal on mobile, but the editing page gets wonky: i.imgur.com/7TK59z7.pngI've tried playing around, but can't figure out what to change for the 'media' tags specific to this page as all others are normal. No rush, whenever you're able to help is fine or anyone else! Thanks! If I recall correctly, this happens specifically due to the iframe for the preview editor — there are only a handful of things you can do that impact that iframe because it loads separately, so I am not sure if there's anything we can do specifically; I'll have to check it out on Monday, if no one else gets to it in the meantime!
|
|
Kami
Forum Cat
Posts: 40,199
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,199
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Mar 12, 2023 16:39:11 GMT -8
Thank you so much!! This was so helpful. As you can see, it's been a while happy to help! if you want to know how to do specific things, let us know!
|
|
Kami
Forum Cat
Posts: 40,199
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,199
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Mar 12, 2023 14:23:09 GMT -8
I think I just managed to figure it out! I searched the media breaks you suggested in old support posts and used a code I found. It's appearing well on my screen devices and on Chrome's toolbar, so fingers crossed. Thanks for your support, though! <3 awesome, well done!
|
|
Kami
Forum Cat
Posts: 40,199
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,199
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Mar 12, 2023 11:53:39 GMT -8
Hi all! I'm helping to create a new Harry Potter board (we all haven't played in years and are *rusty*). Does anyone know of any helpful quick tip guides to creating headers and footers? I have been searching through the helpful threads here, but I'm looking for something that has a general overview of creating a very *simple* header/footer LOL. Any help/links would be appreciated! I think there may be a mismatch in what you mean by "headers and footers" versus the purpose of this board; on PB there is a structural area in your admin panel where you are able to add HTML, CSS, and/or Javascript in order to impact certain areas of the forum (global, main, or board). I can't really provide a "guide" to H/F because they're literally just plain text areas that you can do almost whatever with. It sounds like — just based on my experience with RP sites — you want to create content that appears at the top and bottom of your forum. If that's the case, it would be helpful to know what your goals are / what content you want to display. In all honesty, H/F (the structural component) are obsolete with the addition of plugins, layout templates, and access to the stylesheet — I always recommend using these over H/F so you can have multiple themes with different styles of content.
|
|
Kami
Forum Cat
Posts: 40,199
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,199
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Mar 12, 2023 6:48:14 GMT -8
While I wish it was unusual, it is comforting to know the time I spent doing all that work before wasn't a huge waste haha! Thank you for the insight! Even if it's a lot of work, I do miss running a forum... It was a lot of fun. Do you have any tips for picking good mods? Like qualities to look for..? I have been roleplaying for nearly 20 years now; it is absolutely almost a part time job, if not more, if you have the kind of RP that requires a lot of moderation (eg: people need to submit profiles, or there's a point / participation system, etc). I may not be the best person to ask, but nothing about your work seems odd — I've spent weeks on updates and themes and codexes / site information, etc. I've written several world building stories, canon character profiles... it's definitely Work. Lately, I have moved away from this style of moderation, but it's still a not insignificant amount of work. My rules have been boiled down to the most basic rules possible, but I still have to check profiles, do post moderation, help people, and then actually participate in the RP on top of my full time job. It takes even longer now because I don't have a lot of spare time anymore. Bit of a ramble, but yeah — this is definitely within the realm of normal for RP sites. You may have more luck with experienced mods if you visit RPG resource forums like RPG-D, Pixel-Perfect (animanga mainly), and so on. Honestly, despite my suggestion, I generally either find staff from my friends who RP (I have been RPing with some of the same people for years on end, including my fiancé), or from active members of the RP site who are clearly experienced in the nuances of RP forums. The qualities I look for (not an exhaustive list but kind of the general gist): - someone who is kind and has shown a willingness to help others, whether by explaining the forum rules, or by helping people get jump started in the game by offering to thread with them - someone who embodies the qualities i would expect of a mod if something negative were to happen: keeps a cool head, redirects any public fighting to PMs, etc - someone who has demonstrated decently consistent activity both in the RP itself and in the OOC community - someone who can communicate by text clearly without coming across as sanctimonious or rude (this one is subjective, and I don't expect perfection in this trait) - someone who has a history with the forum and is invested in its success; I don't promote new members, or people who ask me to be staff I hope this helps!
|
|
Kami
Forum Cat
Posts: 40,199
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,199
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Mar 12, 2023 6:39:30 GMT -8
Hi Kami, thanks for your reply. Is it possible to just tweak two elements to change when viewed on mobile? Everything else seems to appear ifne. I played on Chrome using the "toggle device toolbar" letting me view the site on different screens and when I play with the css that way and change the wrapper-width to 100% (instead of 80%) and the images in the info table to 40%, it appears fine. Are you able to help work out a short code I can place in my CSS to tweak just those two just for media screens? I've tried playing around with the media code, but it's not quite working for me. No problem if you can't! It's possible; you would have to use media queries to specify the "break" — in other words, you'd need to specify when the tweak occurs, and all other screen size(s) will take on the other style. As long as you can target those two elements directly (a unique class, or if the element only occurs once per page, a unique ID), you should be able to use a media query just fine. Unfortunately I can't provide a code for you right now because I am on mobile at the moment, but if no one is available to assist by the time I'm back at my desk on Monday, I'll see what I can do.
|
|
Kami
Forum Cat
Posts: 40,199
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,199
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Mar 11, 2023 21:31:44 GMT -8
I have been roleplaying for nearly 20 years now; it is absolutely almost a part time job, if not more, if you have the kind of RP that requires a lot of moderation (eg: people need to submit profiles, or there's a point / participation system, etc).
I may not be the best person to ask, but nothing about your work seems odd — I've spent weeks on updates and themes and codexes / site information, etc. I've written several world building stories, canon character profiles... it's definitely Work.
Lately, I have moved away from this style of moderation, but it's still a not insignificant amount of work. My rules have been boiled down to the most basic rules possible, but I still have to check profiles, do post moderation, help people, and then actually participate in the RP on top of my full time job. It takes even longer now because I don't have a lot of spare time anymore.
Bit of a ramble, but yeah — this is definitely within the realm of normal for RP sites. You may have more luck with experienced mods if you visit RPG resource forums like RPG-D, Pixel-Perfect (animanga mainly), and so on.
|
|
Kami
Forum Cat
Posts: 40,199
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,199
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Mar 11, 2023 21:14:05 GMT -8
Hi,
I'm having some problems with viewing my board on phone/tablet screens in desktop version.
What do I need to change in order for the info table to stay positioned correctly and even the board descriptions so they stay proportioned but just shrink in size and have to be increased in size in order to read properly? Rather than squishing all together.
Any help is appreciated, thank you! The short answer: nothing. PB is not inherently mobile compatible. The longer answer: you would have to rewrite all of the CSS and HTML, entirely from scratch, to change it to be mobile responsive. If you're well versed in HTML and CSS, it should be relatively easy with media queries and some HTML changes for elements like tables that would need to be converted to divs. If you're not familiar with HTML and CSS this might be beyond your personal reach, but you may be able to find someone to help in Theme Request Board or resource sites like Adoxography (but to levelset expectations, I can't guarantee you'll find someone).
|
|
Kami
Forum Cat
Posts: 40,199
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,199
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Mar 11, 2023 14:45:24 GMT -8
Kami I know about them plugins but I'm looking for a scrolling effect. theoretically you could use some CSS to achieve this, how comfortable are you editing your CSS stylesheet?
|
|
Kami
Forum Cat
Posts: 40,199
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,199
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Mar 11, 2023 14:40:05 GMT -8
Okay! I have played with the left and top positioning and it seems to actually go underneath the background, rather than sit on top. That would explain why it won't show up but shows up when you play with the top and left px. Do you know how to get it *on top* rather than disappear behind the background? ooh that is... really weird. i don't know what could be causing that off the top of my head unfortunately. i'm on mobile for the rest of the weekend so i cant do a more in depth troubleshoot right now. is this urgent? or would it be OK if i looked at this on monday?
|
|
Kami
Forum Cat
Posts: 40,199
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,199
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Mar 11, 2023 13:16:46 GMT -8
could you do me a favour and see if you can right click the "empty" space where you are typing to bring up the right click menu. if so, click "inspect" and see what is impacting the css there (it should show the css that is applied to the element) and you can use the browser console to make browser-end changes to try and isolate the issue (these won't save if you reload but it's a good low-stress way to mess with specific elements without messing anything up permanently.
|
|
Kami
Forum Cat
Posts: 40,199
Mini-Profile Theme: Kami's Mini-Profile
#f35f71
156500
0
Offline
Jul 24, 2021 11:48:29 GMT -8
Kami
40,199
July 2010
kamiyakaoru
Kami's Mini-Profile
|
Post by Kami on Mar 11, 2023 13:13:54 GMT -8
|
|