 Rank: Advanced Member Medals:   Joined: 9/13/2010(UTC)
Posts: 708
Location: Minnesota
Thanks: 1 times
Was thanked: 44 time(s) in 32 post(s)
|
I connect a lot from my mobile device to do support and maintenance on customers computers. The ScreenConnect site can be a bit challenging to navigate with a mobile browser and buttons can be pretty small to click. Here is a mobile theme I created. In the App_Themes directory create a new folder called "Mobile" Then in this folder create a file called "Default.css" Add these contents: Code:
@import url("../Base.css");
@import url("../Embedded.css");
.LinkPanel{
position:relative !important;
padding-left:15px !important;
padding-top:10px !important;
text-align:left !important;
}
body{
max-width:100% !important;
padding:0px !important;
margin:0px !important;
}
.UserPanel{
padding-top:10px !important;
right:15px !important;
z-index:100 !important;
text-align:left !important;
}
#manageSessionGroupsPanel{
display:none !important;
}
body
{
overflow: inherit;
font-size:18px !important;
}
#unattendedButtonPanel.LinkButtonPanel{
display:none !important;
}
.HostMasterPanel .SessionGroupPanel a.Selected {
border-right-width:2px !important;
border-radius:8px !important;
}
#detailPanel, .HostDetailPanel, .MiddlePanel, .OuterPanel, .HostMasterPanel{
max-width:100% !important;
min-width:100% !important;
width:100% !important;
padding:0px !important;
min-width:355px !important;
overflow:hidden !important;
}
.StatusDiagramPanel .RelayPanel{
display:none !important;
}
.StatusDiagramPanel {
float:right !important;
}
.SessionInfoPanel p,.SessionInfoPanel h4{
font-size:22px !important;
}
.StatusDiagramPanel .ConnectedPanel {
width:50px !important;
height:50px !important;
margin:20px 5px !important;
}
.StatusDiagramPanel .HostEndPointPanel {
background-image:none !important;
color:#FFF !important;
}
.StatusDiagramPanel .GuestEndPointPanel.Access {
background-image:none !important;
color:#FFF !important;
}
#Dialog, .ModalDialogPanel, .ModalDialog{
max-width:100% !important;
width:100% !important;
}
.ModalDialog{
position:absolute !important;
}
.CreateSessionDialogContentPanel, .ModalDialogContent {
max-width:100% !important;
width:100% !important;
}
.CreateSessionDialogContentPanel .TypePanel div {
width:60% !important;
}
.TypePanel img{
display:none !important;
}
.ModalDialogClose {
right:45px !important;
}
.LinkButtonPanel a:link, .LinkButtonPanel a:visited, .LinkButtonPanel a:hover, .LinkButtonPanel a:active {
padding:23px 24px !important;
font-size:18px !important;
margin-right:20px !important;
}
.LinkButtonPanel img{
height:32px !important;
width:32px !important;
}
.Selected{
border-radius:8px !important;
margin:0px !important;
}
From there just visit your screenconnect instance with http://myscreenconnectserver/host.aspx?theme=mobile
and you will be directed to the mobile site. Here is a little screenshot of what it looks like. 
|
|
|
|
|
|
 Rank: Administration Medals:  Joined: 4/9/2010(UTC)
Posts: 2,061
Thanks: 1 times
Was thanked: 393 time(s) in 188 post(s)
|
Love the nice big buttons! |
ScreenConnect Team |
|
|
|
|
|
Rank: Advanced Member Medals: Joined: 9/13/2010(UTC)
Posts: 708
Location: Minnesota
Thanks: 1 times
Was thanked: 44 time(s) in 32 post(s)
|
Made some more mobile friendly changes. Here is Version 2 Code:@import url("../Base.css");
@import url("../Embedded.css");
.LinkPanel{
position:relative !important;
padding-left:15px !important;
padding-top:10px !important;
text-align:left !important;
}
.LinkPanel a{
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
padding: 23px 24px !important;
font-size: 18px !important;
display: inline-block;
border: 1px solid #5B5B5B;
text-decoration: none;
text-align: center;
color: #222;
background-color: #F2F2F2;
background: -webkit-gradient(linear, center top, center bottom, from(#F2F2F2), color-stop(50%, #EBEBEB), color-stop(51%, #DBDBDB), to(#CFCFCF));
background: -moz-linear-gradient(center top, #F2F2F2 0%, #EBEBEB 50%, #DBDBDB 51%, #CFCFCF 100%);
}
.HeaderPanel {
height:90px !important;
}
body{
max-width:100% !important;
padding:0px !important;
margin:0px !important;
}
.UserPanel{
padding-top:10px !important;
right:15px !important;
z-index:100 !important;
text-align:left !important;
}
#manageSessionGroupsPanel{
display:none !important;
}
body
{
overflow: inherit;
font-size:18px !important;
}
#unattendedButtonPanel.LinkButtonPanel{
display:none !important;
}
.HostMasterPanel .SessionGroupPanel a.Selected {
border-right-width:2px !important;
border-radius:8px !important;
}
#detailPanel, .HostDetailPanel, .MiddlePanel, .OuterPanel, .HostMasterPanel{
max-width:100% !important;
min-width:100% !important;
width:100% !important;
padding:0px !important;
min-width:355px !important;
overflow:hidden !important;
}
.StatusDiagramPanel .RelayPanel{
display:none !important;
}
.StatusDiagramPanel{
float:right !important;
}
.StatusDiagramPanel .NodePanel{
width:140px !important;
}
.SessionInfoPanel p,.SessionInfoPanel h4{
font-size:22px !important;
}
.StatusDiagramPanel .ConnectedPanel {
width:140px !important;
height:60px !important;
margin:20px 5px !important;
}
.HostEndPointPanel {
position: absolute !important;
margin-top:25px !important;
margin-left:5px !important;
font-size:16px !important;
}
.GuestEndPointPanel {
position: absolute !important;
margin-top:25px !important;
margin-left:155px !important;
font-size:16px !important;
}
#Dialog, .ModalDialogPanel, .ModalDialog{
max-width:100% !important;
width:98% !important;
}
.ModalDialog{
position:absolute !important;
}
.CreateSessionDialogContentPanel, .ModalDialogContent {
max-width:100% !important;
width:100% !important;
}
.CreateSessionDialogContentPanel .TypePanel div {
width:60% !important;
}
.TypePanel img{
display:none !important;
}
.ModalDialogClose {
right:45px !important;
}
.LinkButtonPanel a:link, .LinkButtonPanel a:visited, .LinkButtonPanel a:hover, .LinkButtonPanel a:active {
padding:23px 24px !important;
font-size:18px !important;
margin-right:20px !important;
}
.LinkButtonPanel img{
height:32px !important;
width:32px !important;
}
.Selected{
border-radius:8px !important;
margin:0px !important;
}
.ProductPanel{
display:none !important;
}
.SessionDialogTopContentPanel{
width:100% !important;
}
.HostDetailPanel h3{
margin:0px !important;
}
#searchBox{
display:none !important;
}
#masterPanel p{
display:none !important;
}
.StatusDiagramPanel{
width:300px !important;
}
|
 3 users thanked bigdessert for this useful post.
|
|
|
|
 Rank: Member Medals: Joined: 12/18/2011(UTC)
Posts: 28
Location: Napier, New Zealand
|
Thanks bigdessert, works great!!
Cheers |
Justin Prebensen Just In Tech Ltd We're Just In to Technology Computer Repairs, Support and Sales www.justintech.co.nz |
|
|
|
|
|
Rank: Member Joined: 9/17/2012(UTC)
Posts: 26
Location: Sidney, BC. Canada
Thanks: 3 times
Was thanked: 1 time(s) in 1 post(s)
|
Looks greg, Thanks for the time and effort.
Mark
InnSource Solutions Inc.
|
|
|
|
|
|
 Rank: Newbie Joined: 11/16/2012(UTC)
Posts: 1
Location: hefei
|
Thanks for sharing this awesome post which makes me learn such more
|
|
|
|
|
|
Forum Jump
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.
