Jump to content
TNG Community
Paul Barrett

Constrain Width

Recommended Posts

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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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:

Snag_53ce1fd.png

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?

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
Paul Barrett

Thanks Alan, a huntin' I shall go  

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
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. 

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
Paul Barrett

I will have a tinker.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×