A little thing I do to help when editing an HTML block

ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
edited January 24, 2016 in SmugMug Customization
There might be better solutions to this, and I'm too inexperienced to know them, but I thought I would mention this helpful thing. When I edit an HTML block, and I'm watching the changes on the page, I've always been slightly annoyed by the fact that the content is centered on the page such that HTML block covers part of it. Even resizing the browser to full screen (on my 17 inch laptop) doesn't insure that the black HTML block isn't overlaying the page content at least enough to stay annoying.

So what I did was change the layout of the page to add a right sidebar at 450px wide. Layout is stretchy, and auto-px for width. This narrows the column, obviously, and if I have images or other content that this would mess with, then I don't do it. But for plain text where I just want to see changes on the screen in relation to the HTML block where I'm editing, it solves the problem of the overlay.

I know one can edit in webdeveloper (but I've never figured out how to do that), but it is nice to see the real changes inside SM, and the color-coding of the text is helpful too.

If anyone knows how to force all gallery content to stay to one side (temporarily) so that the the content block you're editing doesn't cover content, I hope you'll share.

Comments

  • tomnovytomnovy Registered Users Posts: 1,102 SmugMug Employee
    edited January 19, 2016
    Hi ChancyRat,

    You can just move the HTML content block anywhere you want on the screen. Just grab the top of the HTML content block and move it to the side [ see my screenshot ]:

    http://take.ms/iz6ir
    SmugMug Support Hero | Customizer | My SmugMug site - http://www.photom.me | Customization Portal - https://customsmug.com/
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited January 19, 2016
    Thanks Tom. I think you are lucky in that screenshot in terms of the size of your HTML block. Here's a different image of what I often face. On a 17-inch laptop even if I fill the screen, the HTML block still covers part of the narrative.
  • photoclickphotoclick Registered Users Posts: 278 Major grins
    edited January 19, 2016
    He is not lucky - he just has a display with normal (nowdays) resolution:) The html block is 670px wide. Judging by your screenshot you are working on a 1200px screen. Yes, html block will occupy half of your screen.
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited January 19, 2016
    photoclick wrote: »
    He is not lucky - he just has a display with normal (nowdays) resolution:) The html block is 670px wide. Judging by your screenshot you are working on a 1200px screen. Yes, html block will occupy half of your screen.

    What does "1200 px screen" mean? The page width on the site is set to auto, but generally it seems the width of the blocks is about 980 or 960 (when I have set it to fixed, which I'm trying not to do now).
  • photoclickphotoclick Registered Users Posts: 278 Major grins
    edited January 19, 2016
    Your "17 inch laptop" has a screen with ta fixed resolution. I suspect the horizontal dimension of your screen is limited to 1200px. The screen resolution. It has nothing to do with Smugmug. If your laptop is Windows, then right-click on the desktop and pick "Screen Resolution" or "Display Setting" to view your screen resolution. Your monitor can be half a mile long... but if your screen resolution is 1200px wide this is what you will see.
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited January 19, 2016
    1200 is the pixel width of the browser window. Your monitor probably displays 96dpi.


    I used this CSS resizing the edit box at one time. Might reconfigure it for a narrower box.
        /* start edit box */
    .sm-overlay-container .sm-page-widget-inspector-panel{
      width:920px!important
    }
    
    .sm-page-widget-inspector-panel .sm-panel-content .sm-tabs-content{
      height:600px!important;
      width:920px
    }
    
    .sm-page-widget-inspector-panel .sm-panel-content .sm-tabs-content .CodeMirror{
      height:500px!important
    }
        /* END edit box */
    
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited January 23, 2016
    I apologize that it took me awhile before I could figure out how to find these specs.
    The screen is set at the recommended 1920 x 1080. (Monitor is 15.6 in, not 17), dpi is 96.
    The type is set to be "smallest" recommended, which for my poor eyes is as small as I can tolerate, and that's with the screen about 18 inches from my face, and with glasses on. :cry

    Allen your code - is great - it widened and heightened the content html edit box. I love the 920 width, but since the main page content stays centered on the screen and is half-hidden by that width, I'm trying 620 width. This shows about 2/3 of the page content and I still have more height area to use.

    Too bad there isn't code to say "Margin for all gallery content is on the far left side at the browser border." It seems odd that there's no way to move the content out of "centered".

    Thanks!
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited January 23, 2016
    If it is a fixed width page go to the layout tab and turn centered off.

    If it is a stretch page/gallery temporarily set it to fixed and not centered.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited January 23, 2016
    Allen wrote: »
    If it is a fixed width page go to the layout tab and turn centered off.

    If it is a stretch page/gallery temporarily set it to fixed and not centered.

    Thanks for trying to help, Allen.

    The page is stretchy. In that mode, there is no center versus fixed option at all.
    When I change it back to Fixed and turn Center off, nothing happens (meaning, the page content stays in the center).

    I do see that in Fixed, there has to be a width, which I have at 960 px.
    Body section width is set to auto (in all variations).
    Turning Center on and off, I see nothing change.

    I take it you think I should be able to position content on the left browser border?
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited January 23, 2016
    If you meant for me to turn on Fixed only to change Center to OFF, then go back to Stretchy (I didn't understand this), I just did that and it doesn't change anything.
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited January 23, 2016
    In fixed mode with a width like 960, turning centered off should move everything to the left side.
    Worked for me. Would give room for edit box on right.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited January 23, 2016
    :cry :cry :cry :cry
    Why doesn't it work for me.
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited January 23, 2016
    I should add that I have never seen the behavior you describe, Allen, ever.
    :cry :cry :cry :cry :cry
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited January 23, 2016
    I'm using a Page with 3 html widgets in the center. Not a gallery.
    http://www.photosbyat.com/Public-Site-Index-NS2/n-6dSMX
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited January 23, 2016
    Allen wrote: »
    I'm using a Page with 3 html widgets in the center. Not a gallery.
    http://www.photosbyat.com/Public-Site-Index-NS2/n-6dSMX

    Okay ... it's not possible in a SM style gallery... That's a little easier to hear....
    Okay, so you're saying if I want to draft in a page, that's a way to work this...
    I will test...

    iloveyou.gif
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited January 24, 2016
    I just tried it in a Smugmug style gallery and got the fixed 960 width to shift left.
    Al - Just a volunteer here having fun
    My Website index | My Blog
Sign In or Register to comment.