widen the width of theme

Random stuff about serendipity. Discussion, Questions, Paraphernalia.
Post Reply
mintintegral77
Posts: 4
Joined: Tue Oct 16, 2018 6:26 pm

widen the width of theme

Post by mintintegral77 »

hi, I would like my theme to "stretch" to 98% or maybe 100% of the screen, is this possible? Currently there is a gray background and maybe 50pixels of margin on the left and right. Or perhaps 20% is extra margin I would prefer to shrink to 8% of total screen width, for example. Here is the link, http://bassdiamonds.elementfx.com/s9y/

On my laptop the theme seems to set a fixed width and does not "stretch" to the same percent as seen on an iPhone. This is OK. On the iPhone, I would like the middle body to stretch and use 95 or 98% of width if possible. If this affects the laptop view, that's OK, as it seems there is plenty of wiggle room to make it smaller. Theme I'm using: Frontend: Andreas00 (2009-08-16). Can I make these right and left margins smaller?
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: widen the width of theme

Post by yellowled »

mintintegral77 wrote: Wed Nov 21, 2018 6:29 pmCan I make these right and left margins smaller?
Yes. However, I would urge you to consider switching to a different theme. andreas00, like unfortunately many themes available for s9y, is very old. It doesn't really adapt well to smaller screens and mobile devices, simply because it was create before Smartphones were even a thing. The Themes section of your s9y installation should highlight certain themes as "recommended" (assuming you're using a current version of s9y); those can of course be customized further as well.

If you want to keep and adapt andreas00, follow these steps:

1. in /templates/andreas00/, create a file called user.css
2. Edit said file with a text editor to contain the following

Code: Select all

#wrap {
    max-width: 760px;
    width: 98%;
}
3. Save
4. Open /templates/andreas00/index.tpl with a text editor
5. Find the line "<meta name="generator" content="Serendipity v.{$serendipityVersion}" />"
6. Insert a new line after that, add "<meta name="viewport" content="width=device-width, initial-scale=1">"
7. Save

That should do the trick, but again – please consider using a modern theme. :)

YL
mintintegral77
Posts: 4
Joined: Tue Oct 16, 2018 6:26 pm

Re: widen the width of theme

Post by mintintegral77 »

:) Thank you. this works great. And the iphone render is nice and wide. I think I will test out some newer themes.
Post Reply