New Skin FAQ

Welcome to the cause of my erratic activity, what you may have heard me refer to as my "Secret Project".

Okay but seriously here's what you need to know.

"Is the skin finished?"
Not entirely. I've been working on it since March and then solidly for the last 6 weeks and it's aesthetically pretty much done. Let's call it 95% complete.

"I've found an issue with the skin, what should I do?"

1. First you should hard refresh (ctrl+f5) and make sure your cache has been cleared recently. You'd be surprised how many problems this clears up, particularly on phones!
2. Secondly, you should check the bug list and make sure your error hasn't been identified already.
3. Thirdly, if your problem isn't on the list and refreshing and cache clearing didn't fix it, take a screenshot of your issue and post it in a reply to this thread! When your problem is fixed I will delete your post and hopefully remember to tell you it's fixed.

"If it's not finished... What's left to do?"
There are a few features I'm planning to implement gradually over the coming weeks. I'll cross them off as they're completed.

• A 'Read More' button will hopefully condense the index down a little where we have particularly wordy forum descriptions.
• Expand and collapse the banner function for more streamlined (and work friendly ;]) browsing.
• The cbox will become draggable and stay put after refreshing - this will hopefully alleviate forum overlap issues.
• Threadlogs will not open in a new window, I just forgot about it until now.

Bugs & Incomplete

• Our Docs pages aren't properly finished
• The class icon on the profile is being worked on, the box looks empty for now
• The Announcement Block (that thing under the banner) will expand and collapse with the toggle but it won't stay collapsed after refreshing.
• The fancy avatars on the index won't show our cute af default avatar, I'm not actually convinced I can fix this.
• The delete button popup on posts needs straightening out
• The cog button drop down shows empty fields on non-staff accounts, I need to sort this.
• Guest view is a hot mess but I couldn't view the new skin as a guest until it went live
• UCP is not as responsive as I'd like, I threw in some panic coding last night so it wouldn't be the worst hot mess you've ever seen but it's not ideal yet.
• There's a popup when you click on avatars on the index and I meant to turn it off but I think I forgot. It's not styled. I'm going to delete it soon.
• Threadlogs have a forum number field, I'm hoping to turn this into a forum name. It's harder than it might seem.
• There are some minute gaps appearing on the welcome bar when viewed at certain zoom levels (that bar with your username on it at the top), I'm aware of this and I will be fixing it in the near future because I despise it.
• The announcement block is a bit touch and go at times on smaller screens, I'm keeping an eye on it. I've fixed it about 5 times in the last week.
• WW and DP templates will be updated very soon and will hopefully be more responsive than ever before!
• Board statistics pages (member list/post count list/etc.) haven't been styled yet, I'll do that when I'm in the mood to regret my life choices

I'm particularly interested in hearing about responsive issues and border inconsistencies. Responsive web design is when you code for all screen sizes and the design scales down cleanly - if you find something that breaks on a smaller screen please tell me! As for borders, I've got a very complex game of border chess going on and sometimes certain elements aren't visible to certain members and the result is a really thick border or no border at all. I want to know about these.

"How can I make my own coding more responsive without having to learn a lot of css?"
Honestly I'm just here to tell you all about REMs. Pixels are so last decade. Pixels won't resize, pixels don't care. Rems care.
1rem on desktop Charming = 16px
1rem on phone Charming = 10px
This also means you can change your browser settings to show Charming with a font size of whatever you like and the site will scale accordingly. Want giant font? You can make it happen.
This handy converter got me through skinning like a champ <3

Another way to make your codes more responsive is to ditch html tables. CSS grids and flex boxes are the shit. If you're a coding novice you might struggle a little - it overwhelmed me a little at first (tbf it was March and my coding skills were still rusty af) but if you can get to grips with them they will become an addiction be infinitely useful.

---

As there will be some ongoing construction it's doubly important that you refresh your cache before reporting a bug, especially if it's one that's cropped up since the skin release because I may well be working on the skin at that moment or else have updated some things since your cache last refreshed itself! I will try to remember to shout out in the cbox if I'm actively working on the skin.

The following 2 users Like Ursula Black's post:2 users Like Ursula Black's post
   Amelia Evans, Holly Scrimgeour

---

So posts seem to be okay so far, but viewing the board header/profiles once you've enlarged the font cuts everything off at the sides. see here

ETA: I changed the font settings in my browser. Didn't zoom in on the actual site xD

The following 1 user Likes Melody Crouch's post:1 user Likes Melody Crouch's post
   Aldous Crouch

---

beautiful set by mj

So posts seem to be okay so far, but viewing the board header/profiles once you've enlarged the font cuts everything off at the sides. see here

ETA: I changed the font settings in my browser. Didn't zoom in on the actual site xD

So you've told your browser to set the font to ??px and it scaled things up but it's cutting off? Have you tried refreshing your charming cache? I doubt that's the issue but idk if changing the font maybe needs a reset to sort itself out? I'll try to replicate this on my phone

  

---

Sooooooo this might fall under "UCP is not as responsive as I'd like, I threw in some panic coding last night so it wouldn't be the worst hot mess you've ever seen but it's not ideal yet" but JUST IN CASE, here is what my UCP Home looks like: top bottom. No other pages in my UCP have this issue.

Also this maybe isn't a bug but I definitely can't read the Hufflepuff color on the default skin, it looks like this. It's totally legible on the flower child and wintersong ones.

  

---

MJ made this <3

Only happens on Ben's account (sweep powers) but I get weird partial overlaps on the right hand side of the new posts list, but only on some threads (with no discernible rhyme or reason). The little overlap boxes have a slightly lighter background color and do have their own borders, in case it's hard to tell in the screengrab: image

ETA: happens on Today's Posts, New Posts, and Search results but not in subforums

  

---

MJ made this <3

Not sure if it’s already been mentioned bc I’m no good with technical terms, but the little button for PMs was on mobile goes under the name and is difficult to click on.

  

---

I sent you an image on skype because I can't link them here, but the white post BG broke in a thread so I could see straight to the pretty picture background.

Slso the scrolly bar spazzes a lot.

  

---

MJ always makes her so pretty

Not sure if this has been flagged yet but for some reason my alerts number button has skipped a line. I already refreshed cookies and such, and it’s still like this!

Also Im only getting this issue on iPad/mobile browsing.

  

---

I'm not sure if this is a glitch and more of a responsiveness issue, but when you're on mobile profile view most of the text in the "other" and "personality" section get cut in half, and God forbid if you're using any sort of list or tables like me, because they get cut right off the edge :P

I'm not sure if there's a way to make the mobile coding work so the other and personality section are on top of each other instead of beside each other?

  

---

— set by MJ <3 —

I'm not sure if this is a glitch and more of a responsiveness issue, but when you're on mobile profile view most of the text in the "other" and "personality" section get cut in half, and God forbid if you're using any sort of list or tables like me, because they get cut right off the edge :P

I'm not sure if there's a way to make the mobile coding work so the other and personality section are on top of each other instead of beside each other?

Using iOS, I do have side-scroll in those fields so if I fiddle I can read the table in Valerians profile, it’s just not sexy

  

---

— Aldous walks with a cane and pronounced limp as the result of a splinching accident. —

— graphics by lady ❤ —

I'm not sure if this is a glitch and more of a responsiveness issue, but when you're on mobile profile view most of the text in the "other" and "personality" section get cut in half, and God forbid if you're using any sort of list or tables like me, because they get cut right off the edge :P

I'm not sure if there's a way to make the mobile coding work so the other and personality section are on top of each other instead of beside each other?

Using iOS, I do have side-scroll in those fields so if I fiddle I can read the table in Valerians profile, it’s just not sexy

I also have side scroll but everything is still outside the box so my brain hurts xD

  

---

I'm not sure if this is a glitch and more of a responsiveness issue, but when you're on mobile profile view most of the text in the "other" and "personality" section get cut in half, and God forbid if you're using any sort of list or tables like me, because they get cut right off the edge :P

I'm not sure if there's a way to make the mobile coding work so the other and personality section are on top of each other instead of beside each other?

Using iOS, I do have side-scroll in those fields so if I fiddle I can read the table in Valerians profile, it’s just not sexy

I also have side scroll but everything is still outside the box so my brain hurts xD

I'm going to tinker around with a css today to see if I can fix this, since it's a problem with the individual codes we throw in the boxes and not the boxes themselves. If I'm successful I'll share xD

EDIT: here's what I came up with! includes the base coding if you want to try and improve on it xD

The following 1 user Likes Reuben Crouch's post:1 user Likes Reuben Crouch's post
   Cameron Gillenwater

---

MJ made this <3

When my browser is shrunk down to half-screen on my laptop:



EDIT: It's only at ONE SPECIFIC WIDTH; slightly larger and it's normal and slightly smaller and it's mobile, so probably not a super high priority, just a responsive oddity

  

---

— Aldous walks with a cane and pronounced limp as the result of a splinching accident. —

— graphics by lady ❤ —

Not sure if it's a stylistic choice or if it was unintentional, but the padding in tables is making it very difficult to tell where one cell ends and another begins.

In the occupations list, the requirements are all squished together and without turning up the contrast super high I can't tell which ones fit with which occupation:


And on the Hogwarts roster it's impossible to tell which students belong to which year because of the spacing. I know George Waterford is a sixth year but from the looks of it I would have assumed he's a fifth year :P

The following 1 user Likes Flora Mulciber's post:1 user Likes Flora Mulciber's post
   Aldous Crouch

---

I've noticed this before but forget to bring it up every time I make a new thread. There's an extra radio button next to the post icons and it makes it confusing sometimes!

  

---

I've noticed this before but forget to bring it up every time I make a new thread. There's an extra radio button next to the post icons and it makes it confusing sometimes!

That's actually not a bug, that's a blank icon and completely intentional! The alternative was that every post that wasn't assigned an icon would look like this:


The easiest way to keep the shape was to make sure that no threads lacked an icon. However, we have a lot of OOC threads and I didn't have the template for the icons to try making an OOC one (plus O is already taken). I tried some alternatives but they looked a bit mehh so I went with a blank icon for now. The simplest way to make the forum automatically assign an icon was to delete the option to select no icon and tell the code to select a different icon by default. However, I took this opportunity to tell the forum to select the Open thread icon for default because technically all threads without an icon are considered open and fair game but no one ever takes advantage of this and IC threads without icons are a longstanding pet peeve of mine.

Unfortunately the blank placeholder icon can't be hidden from the post icon selection list (I tried as hard as I could to hide it away) and by nature of being a transparent square... Is also invisible. I could potentially code a border for it so it's more visible but I don't know that I could do so without it looking weird and fugly.

N.B. I ran a database query which replaced all threads with no assigned icon the blank icon so you shouldn't have any IC threads from the past marked Open unless you selected that option intentionally.

The following 1 user Likes Ursula Black's post:1 user Likes Ursula Black's post
   Flora Mulciber

---