How to move and style the "branch" icon to make it easier to see

[Scot - ScotsScripts.com]

If you're using branches for template development the branch icon is a very small almost invisible thing in the lower left hand corner of the screen. If you want it to make it very visible and obvious, try putting this at the top of your global head tag:

 <style>
.mm_runtimebranchpreview
{
top: 0;
margin-top: 40px;
background-color: #ff000087;
padding-top: 10px;
border: 25px solid #ff000087;
border-radius: 15%;
max-height: 100px;
}
</style>

I use a large screen for development work and it's easy to miss the default/stock branch button, but not after this style hack.

[RTHOMASDESIGN]

Nice tip. I'd recommend adding that to an external styling app though so you don't have to do that on a site-by-site basis. Haha, are you working on an 8k display at native resolution? :p

Probably needs modification though (the menu would appear off screen -- so the user would be unable to change branches, especially if you have several). Add the following to fix that:

.mm_runtimebranchpreview.bottom_left .mm_runtimebranchpreview_menu {
bottom: auto;
top: 45px;
left: 0;
}

I think Miva opted for a smaller size because most front-end devs do a lot of responsive design. Having a large element like what you've styled above takes up way too much of the screen on mobile/tablet (not to mention it'd hide a large chunk of the header on most sites). Guess there's not a one-size-fits-all solution, but glad that works for you. They should have added a slide toggle to it. Initially have it display larger sized, and then toggled down to an arrow or something (probably what I would have done).

-Ryan

[Scot - ScotsScripts.com]

Basic miva stuff- too much cleverness getting in the way of usability.

[Scot - ScotsScripts.com]

Ryan, your css works great, I didn't even think about the dropdown. I just wanted to be slapped in the face every time a branch is being viewed :)