Constrain Width

[Paul Barrett]

I am experimenting with a test environment using Template 18

This template, and every other that I have tried, goes full width which, on my 27 in 2K monitor is way too much.

How do I create a boxed layout of say 1000px please?  I have a look around this forum and the Wiki but haven't found anything thus far

Thanks folks

[theKiwi]

Isn't that something that you'd let your users decide?

Just because a window can be stretched to full width on a 27" display doesn't mean that all your users would do that.

I rarely make browser windows full width on my 24" displays, even though it's handy for viewing some things like Ancestry.com charts on.

But if you define a max width of say 1,000 px then you'll frustrate those people who wish to view things at say 1200 or 1600.

Roger

[Paul Barrett]

Hi Roger

Thanks for your reply.

I agree, to a point.  I use Windows split screen mode all the time.  But TNG content is, in very many cases, not best when rendered at full screen width, for example  "Notes".  This is much more difficult to scan:

On my WordPress TNG site the width is constrained by the WordPress setting.  There's a good reference point.  WordPress allows  boxed content if the owner wants to use it .  Even this forum uses boxed content (Approx 1630px)

I'm just experimenting.  Is there a way to do it please?

[Newfloridian]

Hi Paul

I think you need to be looking for a class called .page, either in genstyle.css or in templatestyle.css **

If I remember correctly, back in the days of TNG4 or 5, the width of the page was restricted to 700px to make it conform to the average monitor screen dimensions of 800 x 600

I have always used template 4 and in later incarnations and larger screen dimension, the page became stuck in the middle of the screen with very wide blank margins.  

** Might be wrong here as I don't use TNG12 and I long ago changed to using percentages rather than fixed measurements! 

Good hunting

Alan

[Paul Barrett]

Thanks Alan, a huntin' I shall go  

[Paul Barrett]

I could not find that class in Template 15, but I did in 4

.page {
    background-color : #FFFFFF;
    margin-top: 0px;
    text-align:left;  /* added to replace style="text-align:left" in 6.2.0 */
    margin-right: 0px;
    border-collapse: collapse;
    padding: 0px;
    width: 100%;   /* to center, change to 900px or 90% */
}

 

So I created an entry in template 4 mytngstyle.css and changed the width value but it didn't work, even with Ctrl+F5.  Did I do the wrong thing?

[Ken Roy]

Paul,

The implest solution is to not run your browser in full screen mode.  Remember if you change the constraints in the template you are impacting everyone who access your site not just you. 

[Paul Barrett]

Thanks Ken.  Yes, I hear what you're saying.  I routinely run my monitor in split screen mode 2 x 1280 wide.  I am just experimenting.

[Ken Roy]

Paul,

If you are going to experiment, then you should look at using screen size conditional such as the following used for smart phones

@media only screen and (min-width:320px) and (max-width:680px) {

but in your case where the screen widths are larger than normal 1920.  Overrides should also be  implemented in you templateN/mytngstyle.css

[Paul Barrett]

I will have a tinker.