Centering theme

  • Hello,

    I have tried to reduce the zoom of the theme to 80% with the following code in global CSS:

    Code
    @include screen-lg {
    body {
    zoom: 0.8;
    -moz-transform: scale(0.8);
    -moz-transform-origin: 0 0;
    }
    }

    and it works fine on Microsoft edge & Google Chrome but with Mozilla Firefox the theme in not centered


    How can I fix it?

  • I have tried to force the body to the center by changing the previous code into this, but nothing happened

    Code
    @include screen-lg {
    body {
    zoom: 0.8;
    -moz-transform: scale(0.8);
    -moz-transform-origin: 0 0;
    body-align: center !important
    }
    }

    (my CSS knowledge is equal to zero so be patient)

  • Hello,


    This isn't the proper way to approach this, especially not with zoom which has so many strange effects. Just edit the style, set it to like 80% width and you're done, you don't need this strange and horribly outdated code




    Disclaimer: The custom style may have different settings applied that could interfere with this, when in doubt ask the style creator for help.

    Alexander Ebert
    Senior Developer WoltLab® GmbH

  • Thanks Alexander Ebert for the reply, the code was provided by the creator (I would have never got to even that point by myself)

    Unfortunately by following your instructions the theme does not display correctly


    UPDATE:

    I tried to set the following

    - Minimum Layout Width 80%

    - Maximum Layout Width 80%


    the theme displays correctly (Body 20% reduced and correctly displaying on mozilla) but all writes, logos, menus are the same size (100%)

  • Why would you even zoom the entire site, this introduces a lot of scaling issues including fuzzy text and other sorts of artifacts as a side effect of anti aliasing attempts? Are you just trying to reduce the width?

    Alexander Ebert
    Senior Developer WoltLab® GmbH

  • I am trying to display the site at 80% zoom as I think looks much neater (including all text, logo and menus)

    Why would you even zoom the entire site, this introduces a lot of scaling issues including fuzzy text and other sorts of artifacts as a side effect of anti aliasing attempts? Are you just trying to reduce the width?

    It was not my idea to be honest I asked and this code was provided..

  • I wouldn't recommend to zoom the site, the results are overall pretty poor and the aforementioned anti aliasing decreases the legibility of the site. Just looking at the menu buttons, that text is anything but sharp. This also means that image quality decreases and longer messages become harder to read.


    I can see the motivation behind your approach, but I don't think that it outweights the drawbacks from a user's perspective.

    Alexander Ebert
    Senior Developer WoltLab® GmbH

  • I wouldn't recommend to zoom the site, the results are overall pretty poor and the aforementioned anti aliasing decreases the legibility of the site. Just looking at the menu buttons, that text is anything but sharp. This also means that image quality decreases and longer messages become harder to read.


    I can see the motivation behind your approach, but I don't think that it outweights the drawbacks from a user's perspective.

    Understoot I am now trying your approach but I would need further help in identifying the px values that would need to be decreased 20% (I tried to do it manually but other than "Global settings" I would need to touch the "advanced settings" values) and I just wouldn't know which ones needs doing.

    I don't want to post the code here as it would mean giving away the theme I guess and wouldn't be correct

  • The style author uses a different approach, but this additional (!) rule should do the job.

    CSS
    @include screen-lg {
        .pageContainer {
            min-width: auto;
            max-width: none;
            width: 80%;
        }
    }

    Alexander Ebert
    Senior Developer WoltLab® GmbH

  • The style author uses a different approach, but this additional (!) rule should do the job.

    CSS
    @include screen-lg {
        .pageContainer {
            min-width: auto;
            max-width: none;
            width: 80%;
        }
    }

    Just tried the code, Unfortunately as it only reduces the width all the rest remains the same size and does not display correctly.

    I think the only way to do this properly is to reduce by 20% al px sizes in Global and advanced settings, which will be a pain especially because I'm worried I will mess all the theme up

  • You can still reduce the font size, you will find it right in the style properties, there is a dedicated section for font sizes.

    Alexander Ebert
    Senior Developer WoltLab® GmbH

  • I did but in this case, the menu bar would not reduce as well as the control panel/notification/moderation bar


    the effect I am looking for is the one the zoom at 80% gives which scales all of the parts of the theme, this is why I think I should reduce all of the sizes on the Advanced settings as well

  • The only proper way is too adjust everything that you want to be scaled down, like reducing the font size, paddings, margins, etc. "Zoom" is basically like using a scrap press to make your car a bit smaller. It works, but the result is a constant source of strange artifacts and rounding errors.

    Alexander Ebert
    Senior Developer WoltLab® GmbH

  • The only proper way is too adjust everything that you want to be scaled down, like reducing the font size, paddings, margins, etc. "Zoom" is basically like using a scrap press to make your car a bit smaller. It works, but the result is a constant source of strange artifacts and rounding errors.

    Almost forgot about this, I abandoned ship as it was getting way too complicated for me! :D