[personal profile] ema_k posting in [community profile] ao3_skins
Wow, It's been a while. Long story short, I've been fiddling with a skin I found (adding tumblr stuff and using code from other sources. Very few amounts of this CSS are actually mine, and I'm not taking credit.)

Here's the skin:
docs.google.com/document/d/1EUgKGeIZtHl7WqgkgklFrlD4Kla1cU7k6kMApahRbgI/edit

I've been having so much trouble trying to translate this to mobile. I'm pretty sure there's no way to specify when it's mobile in the CSS of the skin, and I no matter how hard I try, I can't understand the whole parent situation. I've been looking for ages and tutorials always use examples using public skins and I just don't know how to apply it to my custom skin. The minor attempt I made using the advanced settings on a new skin didn't work (the custom font I installed on my computer wouldn't appear because, obviously, it's custom, so I ctrl + c ctrl + v:

h1,
h2,
h3,
h4,
h5,
h6,
.heading {
  font-family: Halloween Kliwones, "Bookman Old Style", "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
  border-bottom: none;
  font-weight: normal;
}
 
and changed Halloween Kliwones to Gothic Bold (installed on my phone), nothing. If anyone could give a direct play-by-play on how to change the mobile look with this frankenstein meshed skin, that would be deeply appreciated.

Date: 2023-08-03 06:18 pm (UTC)
vegetablearian: ([d] quinn typing laptop)
From: [personal profile] vegetablearian
The parent thing is pretty easy, you make a desktop skin that's the parent of the mobile skin. You do that through the mobile skin in the options at the bottom. In the mobile skin, it's code that only applies to mobile. You use the mobile skin all the time, it just doesn't apply on desktop so it doesn't matter

In the mobile skin, you make it "Media: only screen and (max-width: 42em)" That's all there is to it! And you don't need to put !important on the overwritten stuff in that file or anything like that, it does it all for you :) Just use the plain css you want to use on mobile that's different to the desktop version.

You can label your skins like MAIN SKIN - PARENT - DON'T USE and MOBILE - USE THIS ONE or whatever if that helps. I have a bunch of skins in a weird tree-chain and when I change skin for any reason I forget it's the mobile one I need to go back to!
Edited Date: 2023-08-03 06:18 pm (UTC)

Profile

ao3_skins: OTW logo with text "Emerging" (Default)
AO3 Skins

December 2024

S M T W T F S
1234567
891011121314
15161718192021
22 232425262728
293031    

Most Popular Tags

Style Credit

Expand Cut Tags

No cut tags
Page generated Jun. 21st, 2025 12:54 pm
Powered by Dreamwidth Studios