My project is simulating a 16:9 TV experience. When I view my project in a browser, fullscreen (F11), it looks GREAT, however the letterboxing that appears above/below the 16:9 image, due to the fact my monitor is 16:10 is visible and white ( light grey?)…
Is it possible to change this vignette/letterbox color to (traditional) black?
Thanks in advance!
You can set the page color to black in the STYLE pane. Make sure there are no widgets selected, click the Fill Colt box and set it to any color or gradient.
I set the page FILL color to black, however once previewed (chrome) browser, the page is cropped to the PAGE DIMENSIONS, which my case is 1920x1080. All the surrounding “fill” around it appears to be a default Axure grey fill. This is the color I’m looking to change.
Thanks for the response mbc66!
OK, did not realize you were setting page dimensions. Do you have to use the mobile previewer? If you set the page dimensions to “Auto” or clear the width and height input, then entire background should be black.
Getting closer… Setting the PAGE DIMENSIONS to Auto now shows the black FILL, however, the page is position in the top left corner of the screen, and not centered on my 19:10 monitor… Given the choice, I’d rather have a grey letterbox, than an un-centered black bottom.
Two things you can do for that. Set the Page alignment to Center (just above Color).
To get it vertically centered, you can select everything on a page, group it and use the Page Loaded or Window Resized to move the group to [[(Window.height/2) - (Target.height/2)]]. If you have a lot of pages and don’t want to do this on every page, you could set up the first page to “embed” the rest of your prototype in an Inline Frame widget. Hide its border and scrollbars, set its Frame Target to the (previous) first page (from right-click menu). Size it the same as your page dimensions. Add the Move action for it.