Trouble re-arranging buttons on vtour control bar

  • I am trying to customize the control bar buttons after using the Make Vtour batch and have been able to change colors, add showtext, and re-arrange th eorder of the buttons. However, I am having an issue moving around 3 of the buttons and my head is spinning! I was hoping someone could take a look at my demo page, my code, and give me a helpful tip!

    Test Website/Mockup

    My issues are:

    1. The Thumbnails button is currently over the Previous Scene button and blocking it. For the Thumbnail placement I currently have

    Code
    <layer name="skin_btn_thumbs"    style="skin_base|skin_glow" crop="0|128|64|64"  align="left"        x="150"   y="0"  scale="0.5" onhover="showtext(Viewpoint Thumbnails, navbar)" ondown2="skin_showmap(false); skin_showthumbs();" />

    and for the Previous Scene placement I have

    Code
    <layer name="skin_btn_prev"      style="skin_base|skin_glow" crop="0|64|64|64"   align="left"        x="50"    y="0"  scale="0.5" alpha="0.5"  onhover="showtext(Previous Viewpoint, navbar)" onclick="if(skin_settings.thumbs_loop, skin_nextscene_loop(-1), skin_nextscene(-1) );" />



    2. I can't get the fullscreen button to move no matter what I set x equal to. I want to keep it in the center cluster but can't move it a little to the left like I want without changing align="left", which doesn't make it right.


    3. The Hide Controls button won't move. I currently have

    Code
    <layer name="skin_btn_hide" style="skin_base|skin_glow" crop="0|448|64|64"  align="right"       x="5"   y="0"  scale="0.5" onhover="showtext(Hide Controls, navbar)" onclick="skin_hideskin()" />

    but as you can see it is not close to the right edge of the control bar skin like my Home button is close to the left edge of the skin.

    It's furstrating to me because I can move the other buttons around just fine by adjusting the align= and x= variables, but it isn't working for these 3 instances.

    Can anyone help? Thanks in advance for taking a look.

  • Hi)

    There's also an action called 'skin_arrange_buttons' inside the vtourskin.xml. It adjusts buttons according to skin settings and some other stuff. I guess, this action overrides your settings, so you'll have to look inside this action too and adjust it.

    Regards,

    Alexey

  • Thank you Alexy for the tip! I did not even see that section. It is very interesting, by just changing the layer names (just putting a "2" behind them), I am able to position the buttons exactly where I want using just the align and x coordinate. However I am just viewing on desktop, so I have to test design and functionality on mobile devices to see how the layout may be affected.

    But now I at least know the section of code to learn about/adjust to make further changes. Thanks again!

  • Thank you Alexy for the tip! I did not even see that section. It is very interesting, by just changing the layer names (just putting a "2" behind them), I am able to position the buttons exactly where I want using just the align and x coordinate. However I am just viewing on desktop, so I have to test design and functionality on mobile devices to see how the layout may be affected.

    But now I at least know the section of code to learn about/adjust to make further changes. Thanks again!

    Thank you ggarmen for noting the simple layer name change! I've been messing with this for hours.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!