View using style other than your default?

[montuos]

SOLVED, with multiple options. THANK YOU!

I have recently started using my phone to access DW more often, and unsurprisingly I am finding that my styles, which I love and prefer to use on my desktop and laptop, do not play nicely with the tiny phone screen real estate.

Is there a way to keep my usual styles, but view pages when I'm on my phone using a different style, such as Mobility, instead?

[Edit to add] I'm specifically hoping to use an actual style rather than "?style=site" or "?style=light". [end edit]

Thanks for any advice you can give!

Comments

[healingmirth]

There may be a more elegant option, and this doesn't persist, but you can append ?style=site or ?style=light to pages to view them in those simpler options. For example, you could bookmark https://montuos.dreamwidth.org/read?style=site to read on your phone.

[montuos]

Thanks for reminding me to specify that I was already aware of those options, which are not what I'm hoping to be able to do.

[healingmirth]

Well, that's some good news/bad news then!

I'll assume in my head that you already know about viewing in a different style (less ideal if the reasons yours doesn't work for you on mobile is because of options, rather than base layout. For instance, and an example of a theme that's worse, not better: https://montuos.dreamwidth.org/read?s2id=87663


Beyond that, I don't have a hack to offer for an entirely different style in a reactive mobile view, but if you haven't yet, it may help to fiddle with these existing options in customize journal/presentation/additional options.


*The width at which the layout switches from single column mode (mobile view) to multiple columns if selected (tablet view).
Set this to 0 to use multiple columns regardless of screen size


*The width at which the layout switches to larger screen mode (desktop view) and can afford some extra whitespace

[montuos]

Aha! That does look like it might be what I want to be able to do, which based on the site and light options, I thought ought to be possible!

How would I go about finding that id number for the style(s) I want to try? (Denise posted in dw_news that Mobility works right now, and I'm sure that someday there will be more options.)

[healingmirth]

I've only ever pulled the style id off the preview in journal customizations, so I would assume if mobility is in the system you can find it there.

[montuos]

I feel like a complete idiot now -- I've used those previews a bajillion times over the last eight years, so I should have realized that myself!

Recording that id for Mobility here for posterity:
?s2id=49401

Thank you! This is exactly what I wanted to be able to do!

[koryou]

How well do you do with CSS? Because I might have a solution for you that lets you keep your own style, but it takes some editing.

As for switching to a completely different style on a different device, I don't think that's possible, at least not without manually switching it around every time.

[montuos]

Alas, I do not speak css at all, and I don't have the faintest idea where to look for / place config files on my phone. But the "?s2id=87663" thing seems like it might be what I want to do, as long as I can figure out the correct id for the style(s) I want to use on my phone.

[koryou]

No need to change anything on your phone, it's just stuff that goes into the Custom CSS in your style settings.

Or you could do that, didn't think of that yesterday. There are only two themes for Mobility, so that's not much of a choice. Tried to find a list of theme IDs, but no luck. Looks like you actually have to apply the theme to get that, so it's a good thing you already have that one.

Okay, I fiddled around with the CSS a bit and tested it on my phone, so this should work.
Your style already defaults to a one column layout on smaller screens (if you didn't deactivate that in your account settings), so that's easy. Now go to your customization page and add this to the custom CSS:

@media (max-width: 750px) {
#header {
margin: 0;
}

.module-navlinks {
text-align: center;
margin-bottom: 0;
padding-right: 0;
}

#content {
margin: -50px 0 0;
}

#primary > .inner:first-child {
padding: 0 5px;
}

.navigation.topnav.empty {
margin-bottom: 0;
}

.entry {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
}

.has-userpic .entry .header, .has-userpic .comment .header {
margin-left: 65px;
}

.has-userpic .entry .userpic {
margin: -4.5em 3px 3px;
}

.userpic img {
height: auto;
max-width: 60px;
}
}

@-ms-viewport {
width: device-width;
}

It changes nothing about the look of your layout when you look at it on a bigger screen, but you see the difference on your phone. If this is alright for you, then that's it, no need to do anything more.

It only takes effect on your own style of course.

[montuos]

I will study and play with this when I'm on a real computer again, and especially after I switch styles again (because I do that seasonally). If this method lets me adjust all my styles to allow good phone usability, that's even better than viewing in Mobility. Right now that solution is better for me because it's easy to understand and to do wherever needed, but I think I might like your css better once I understand how it works. Thank you!