Learn F5 Technologies, Get Answers & Share Community Solutions Join DevCentral

Filter by:
  • Solution
  • Technology
Answers

Advanced customization of Login Page for Edge Client

Hi Everyone,

Anyone here familiar with modifying the portal page for the Edge Client? I am not really familiar with this. And also we want to do this because we want the portal page for the browser login page will be different with edge client page.

Can anyone edit this where, what I want is login page is on the leftmost side of the page for the edge client (i got this from Access Policy > Customization > Advanced > Customization Settings > Access Profiles > /common/mypolicy > common > apm_edge.css (am i correct for the location to edit what I want)

=============================================================================

/-----------------------------------------------------------------------------------/ /* COMMON SETTINGS */

body { padding: 0; margin: 0; overflow: auto; }

table, td, th, div { border: 0; padding: 0; margin: 0; }

img { border: 0; }

/-----------------------------------------------------------------------------------/ /* FONTS */

body, table, td, th, div, input, h1, h2, h3, h4, h5, h6 { font-family : %[font_family]; color: #000000; }

body, table, td, th, div, input { font-size : %[main_font_size]; }

h1, h2, h3, h4, h5, h6 { font-size : %[header_font_size]; font-decoration: none; }

div#page_footer { font-size: %[footer_font_size]; width: %[page_width]; text-align: left; }

/-----------------------------------------------------------------------------------/ /* Body */

body{ background-color: %[page_background_color]; /*non-msie: page_alignment */ <? if( "%[page_alignment]" == "center" ) { ?>text-align: center;<? } ?> }

/-----------------------------------------------------------------------------------/ /* Noscript */

div#noscript_warning_red { padding-top: 30px; font-size: 16px; color: red; text-align: center;

/*non-msie center page_alignment */
<? if( "%[page_alignment]" == "center" ) { ?>
margin-left: auto;
margin-right: auto;
<? }else{ ?>
float: %[page_alignment];
display: block;
<? } ?>

}

div#noscript_warning_newsession { padding-top: 30px; padding-bottom: 30px; text-align: center;

<? if( "%[page_alignment]" == "center" ) { ?>
margin-left: auto;
margin-right: auto;
<? }else{ ?>
float: %[page_alignment];
display: block;
<? } ?>

}

/-----------------------------------------------------------------------------------/ /* Header */

table#page_header { display: none; }

/* ----------------------------------------------------------------------------------- / / Footer */

div#page_footer { display: none; }

/-----------------------------------------------------------------------------------/ /* Main Table */

table#main_table { width: %[page_width]; height: 100%; border-collapse: collapse; background-color: %[table_background_color];

<? /* if( "%[page_alignment]" == "center" ) { ?>
margin-left: auto;
margin-right: auto;
<? }else{ ?>
float: %[page_alignment];
clear: both;
<? } */ ?>

}

/* -------------------------------------------------------------------------------- /* Main Table Image cell */

table#main_table td#main_table_image_cell { /* vertical-align: top; width: %[page_i_mage_cell_width]; / / side image align / / text-align: %[page_i_mage_align]; */ display: none; }

/* Main Table Image cell: image */

table#main_table td#main_table_image_cell img { width: 0px; height: 0px; display: none; }

/* -------------------------------------------------------------------------------- / / Main Table Info Cell */

table#main_table td#main_table_info_cell { /* width: %[form_cell_width]; */ width: 100%; vertical-align: top;

/* form_alignment msie */
<? /* if( "%[page_alignment]" == "center" ) { ?>text-align: center;<? }*/ ?>
text-align: center;

/* border: 1px solid blue; */

}

/* ----------------------------------------------------------------------------------- / / Form */

/* form height msie / table#main_table form { height: 100%; / width: %[form_width]; */ width: 100%; margin-left: auto; margin-right: auto;

/* form_alignment non-msie */
<? /* if( "%[form_alignment]" == "center" ) { ?>
margin-left: auto;
margin-right: auto;
<? }else{ ?>
float: %[form_alignment];
clear: both;
<? } */ ?>

/* debug */
/* border: 1px solid red; */

}

table#main_table table#credentials_table { /* width: %[form_width];

margin-top: %[form_margin_top];
margin-left: %[form_margin_left];
margin-right: %[form_margin_right];*/
width: 100%;

border-collapse: collapse;
empty-cells: show;
background-color: %[form_background_color];

/* height: %[form_height]; */
height: 100%;

}

table#main_table table#credentials_table td#credentials_table_header { height: 46px; font-size: %[header_font_size]; color: #303030; /* background-color: %[header_background_color]; */ text-align: %[header_alignment]; padding-right: 15px; padding-left: 15px; padding-top: 16px; padding-bottom: 11px; }

table#main_table table#credentials_table td#credentials_table_postheader { height: 10px; color: red; padding-right: 15px; padding-left: 15px; padding-bottom: 3px; padding-top: 1px; }

table#main_table table#credentials_table td.credentials_table_label_cell { width: %[label_width]; text-align: %[label_alignment]; padding-left: 15px; padding-right: 2px; padding-bottom: 4px; height: 30px; }

table#main_table table#credentials_table td.credentials_table_field_cell { width: %[field_width]; text-align: %[field_alignment]; padding-right: 15px; padding-left: 2px; padding-bottom: 4px; height: 30px; }

table#main_table table#credentials_table td.credentials_table_unified_cell { width: %[field_width]; text-align: %[label_alignment]; padding-left: 15px; padding-right: 15px; padding-bottom: 5px; padding-top: 5px; height: 30px; }

table#main_table table#credentials_table td.credentials_table_field_checkbox_fix { padding-top: 2px; }

table#main_table table#credentials_table td#credentials_table_footer { padding-top: 13px; }

table#main_table table#credentials_table input.credentials_input_password, input.credentials_input_text { height: 21px; width: 85%; font-size: 13px; border: 1px solid #808080; }

table#main_table input.credentials_input_password { font-family: sans-serif; }

table#main_table table#credentials_table input.credentials_input_submit { margin-top: 7px; height: 22px; }

table#main_table table#credentials_table input.credentials_input_checkbox {

}

table#main_table table#credentials_table label { padding: 0; margin: 0; display: block; }

/* ----------------------------------------------------------------------------------- / / Intraction */

table#main_table table#interaction_table { /* width: %[form_width]; margin-top: %[form_margin_top]; margin-left: %[form_margin_left]; margin-right: %[form_margin_right]; */

width: 100%;
height: 100%

border-collapse: collapse;
empty-cells: show;
background-color: %[form_background_color];

/* form height msie */
height: %[form_height];

/* form_alignment non-msie */
/* 
<? if( "%[form_alignment]" == "center" ) { ?>
margin-left: auto;
margin-right: auto;
<? }else{ ?>
float: %[form_alignment];
clear: both;
<? } ?> */

}

table#main_table table#interaction_table td#interaction_table_header { height: 46px; font-size: %[header_font_size]; color: #303030; text-align: %[header_alignment]; padding-right: 15px; padding-left: 15px; padding-top: 17px; padding-bottom: 13px; }

table#main_table table#interaction_table td.interaction_table_text_cell { padding-right: 15px; padding-left: 15px; text-align: %[header_alignment]; height: 35px; }

table#main_table table#interaction_table td.interaction_table_option_cell { padding-right: 15px; padding-left: 15px; text-align: left; height: 35px; }

table#main_table table#interaction_table td.interaction_table_option_cell img { vertical-align: middle; padding-right: 10px; }

table#main_table table#interaction_table td.interaction_table_footer { padding-top: 15px; }

/-----------------------------------------------------------------------------------/ /* progress bar comparitbility */

div#ProgressBarDIV table { border-collapse: collapse; border: 0; }

div#ProgressBarDIV table#progress_bar_table { text-align: center; empty-cells: show; margin-left: auto; margin-right: auto; border-collapse: separate; }

div#ProgressBarDIV table#progress_bar_table td { width: 21px; height: 21px; background-color: %[page_background_color]; }

div#ProgressBarDIV table#progress_bar_table td.highlight { width: 21px; height: 21px; background-color: #738495; }

/* inspection host compartibility */

div.inspectionHostDIVSmall { visibility: visible; border: 0; height: 1px; width: 1px; }

div.inspectionHostDIVBig { border: 2px solid black; visibility: visible; position: absolute;

top: 5%;
left: 5%;
width: 80%;
height: 73%;

padding: 5%;
padding-top: 4%;

width: expression( "90%" );
height: expression( "90%" );

background: #ffffff;
opacity: 0.9;
filter: alpha(opacity=90);
text-align: center;

}

/* Error message styling */

table#IHoptions td { height: 35px; padding-left: 12px; }

table#IHoptions a.option { margin-right: 10px; }

table#IHoptions a.option img { border: 0px; clear: right; vertical-align: middle; }

/* CacheCleaneTable */

table#CacheCleanTable { width: 100%; height: 100%;

}

table#CacheCleanTable td#main { text-align: center; }

table#CacheCleanTable td#message { text-align: center; padding-bottom: 5px; padding-top: 5px; }

table.webtopTable { <? if( "%[page_alignment]" == "center" ) { ?> /*non-msie: page_alignment */ margin-left: auto; margin-right: auto; <? } ?>

width: %[page_width];
border-collapse: collapse;

}

table.webtopTable td { width: 100%; }

/* ----------------------------------------------------------------------------------- / / div#webtop_toolbar{ width: 100%;
height: 33px; background: url(/public/images/full_wt/toolbar-background.png) repeat;
color: white;
text-align: left; }

div#webtop_toolbar .right{ float: right;
}

div#webtop_toolbar .left{ float: left;
}

div#webtop_toolbar div.container{ color: white; display: inline-block; padding-right: 5px; margin-right: 2px; margin-left: 8px;
margin-top: 2px; border: 1px solid transparent; }

div#webtop_toolbar div:first-child{ margin-left: 20px; }

div#webtop_toolbar div:last-child{ margin-right: 16px; }

div#webtop_toolbar .border_hover:hover{ color: black;
border: 1px solid gray; background-color: #E0E0E0; -webkit-border-radius: 3px; -moz-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px;
cursor:pointer; }

div#webtop_toolbar div.container img{ vertical-align: -7px; margin-right: 2px; }

div#webtop_toolbar input#waurl{ float: left; border: 1px solid #737b88; margin-top: 2px; margin-right: 4px; width: 214px; }

div#webtop_favorites_outer_container{ width: 100%; padding-top: 5px;
text-align: left;
margin-bottom : 30%;
}

div#webtop_favorites_outer_container #webtop_favorites_inner_container{ margin-right: 13px; }

webtop_favorites_inner_container div.resourcetype{

margin-left: 13px;
margin-top: 8px;    
margin-bottom: 3px;    
display: block;

}

webtop_favorites_inner_container div.resourcetype div.title{

display: table-cell;
padding-right: 5px;
color: #244265;    
white-space: nowrap;

}

webtop_favorites_inner_container div.resourcetype div.aftertitle{

display: table-cell;
width: 100%;
background: repeat-x url(/public/images/full_wt/aftertitle-background.png); 
color: #244265;

}

webtop_favorites_inner_container div.favorite{

display: inline-block;
width: 292px;
height: 47px;
margin-left: 13px; 
margin-bottom: 2px;

color: #333333;
border: 1px solid transparent;    

}

webtop_favorites_inner_container div.favorite:hover{

 background: white;
-webkit-border-radius:6px;
-moz-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;    
border: 1px solid gray;
cursor:pointer;    

}

webtop_favorites_inner_container div.favorite div.image{

display: table-cell;    
vertical-align: middle;    
height: 48px;
padding-left: 8px;
padding-right: 8px;    

}

webtop_favorites_inner_container div.favorite div.image img{

width: 32px;
height: 32px;

}

webtop_favorites_inner_container div.favorite div.caption{

display: table-cell;
vertical-align: middle;
width: 246px;    

}

webtop_favorites_inner_container div.favorite div.caption span{

color: #999999; 
display:block;

} */

====================================================================================

0
Rate this Question

Answers to this Question

placeholder+image
USER ACCEPTED ANSWER & F5 ACCEPTED ANSWER

i don't believe you need to paste that full page here, it doesn't add anything and turns out quite unreadable.

as for your question, have you noticed that in the Customization : General mode you have a form factor section to select Edge client? that is about the max you can do with Customization on edge client.

what exactly do you want different on the portal pages? you could consider just building different ones based on client type used in your visual policy editor.

0
Comments on this Answer
Comment made 01-Dec-2015 by Allanwynn 278
"what exactly do you want different on the portal pages? you could consider just building different ones based on client type used in your visual policy editor." based on your question, I just want that the edge client users (PC) will have a different look on their login page, because on our current setup, if we change the portal page (login), there will be changes also with the browser access.
0
Comment made 01-Dec-2015 by boneyard 5579
like i said, build a visual policy with the client type element and send them to different logon elements.
0