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

Filter by:
  • Solution
  • Technology
Clear all filters
Answers

Browser Logon Page Customization

I have been able to figure out where to customize all aspects of the Browser logon page except for the header line as shown here:

Image Text

Just looking to implement a simple white background for the moment - can anyone point me in the right direction?

(ver 11.4)

Thanks...

0
Rate this Question
Comments on this Question
Comment made 04-May-2016 by JackF
Thank you for this question and answer!
0

Answers to this Question

placeholder+image
USER ACCEPTED ANSWER & F5 ACCEPTED ANSWER

We had just opened a Case for this one. Here's the official answer:

  • Navigate through the flyout to Access Policy-->Customization-->Advanced.
  • Under the Properties Editor, you'll see an "Edit Mode" dropdown at the top. Click that and select Advanced.
  • Navigate to Customization Settings/Access Profiles/%YOURPROFILENAME%/Common.
  • Click to highlight the apm_full.css entry.
  • Under the Advanced Customization Editor in the right pane, you'll want to click within the text and perform a [CTRL] + [F] in your browser. Search for the first occurrence of the word background-image.
  • Comment out the entire line by inserting /* to the beginning of the line, and */ to the end.

BEFORE: background-image: url(/public/images/my/header-transient.png); AFTER: /* background-image: url(/public/images/my/header-transient.png);*/


  • After this, keep using the Find function to locate and comment out every line referencing background-image. As of the 11.5.1 code level, you'll do this a total of 4 times. Your results may vary with other code levels.
  • When you have completed, click the [Save Draft] button at the upper right, click [Yes] to confirm, then click [Save] at the top to commit the changes to the CSS file.
  • [OPTIONAL] Perform the steps above to comment the entry from any other CSS files you wish to modify, such as apm_mobile_ppc.css, apm_mobile.css, etc.
  • Once you have completed all edits, you may now Apply the Access Policy by clicking the Apply Access Policy link at the upper left and following through the necessary steps.

I hope that helps, everyone! Feel free to mark this as the answer if this helps!

-Cory

2
Comments on this Answer
Comment made 02-Feb-2016 by DenisGR 266
Working for me !!! Thx a lot Cory.
0
Comment made 02-Feb-2016 by Cory O 334
You are most welcome! Please feel free to mark my entry as the Answer and/or click the up arrow if you like.
0
Comment made 12-Jul-2018 by Marvin 430

Someone any comment on this background image not loading issue using the apm_full.css?

https://devcentral.f5.com/questions/big-ip-apm-customized-logon-background-image-not-loading-60629

0
placeholder+image
USER ACCEPTED ANSWER & F5 ACCEPTED ANSWER

There is no customization tool or menu.

All You can do is change css, html code in apm.css manually.

in customization >> advance >> edit mode:advance >> Access profile : common >> apm_full.css (apm_mobile.css if using mobile too)

edit code in table#page_header

ps. If anyone have easier method please tell me T-T

0
Comments on this Answer
Comment made 07-Mar-2014 by David G. 368
I discovered that all I needed to do was modify header-transient.png. I replaced it with all white and now the entire background is white.
0
placeholder+image
USER ACCEPTED ANSWER & F5 ACCEPTED ANSWER

This is mine (It's gradient, you can change value in background to take effect)

table#page_header {

/*width: %[page_width];*/
width: %[page_width];
/*width: 1367px;*/
/*width: %[form_width]*/
/*min-width: %[page_width];*/
height: 80px;

background-repeat: repeat-x;
/*background-color: #FFFFFF;*/

/*background-image: url(/public/images/my/header-transient.png);*/
background: #175cad; /* Old browsers */
background: -moz-linear-gradient(top,  #175cad 0%, #2465b1 8%, #3e77bb 20%, #6290c7 33%, #b7cce6 62%, #e2eaf5 79%, #fbfbfe 93%, #fcfcfe 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#175cad), color-stop(8%,#2465b1), color-stop(20%,#3e77bb), color-stop(33%,#6290c7), color-stop(62%,#b7cce6), color-stop(79%,#e2eaf5), color-stop(93%,#fbfbfe), color-stop(100%,#fcfcfe)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #175cad 0%,#2465b1 8%,#3e77bb 20%,#6290c7 33%,#b7cce6 62%,#e2eaf5 79%,#fbfbfe 93%,#fcfcfe 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #175cad 0%,#2465b1 8%,#3e77bb 20%,#6290c7 33%,#b7cce6 62%,#e2eaf5 79%,#fbfbfe 93%,#fcfcfe 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #175cad 0%,#2465b1 8%,#3e77bb 20%,#6290c7 33%,#b7cce6 62%,#e2eaf5 79%,#fbfbfe 93%,#fcfcfe 100%); /* IE10+ */
background: linear-gradient(to bottom,  #175cad 0%,#2465b1 8%,#3e77bb 20%,#6290c7 33%,#b7cce6 62%,#e2eaf5 79%,#fbfbfe 93%,#fcfcfe 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#175cad', endColorstr='#fcfcfe',GradientType=0 ); /* IE6-9 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#175cad', endColorstr='#fcfcfe',GradientType=0 ); /* IE6-9 */

/*non-msie: page_alignment */
clear: both;

margin-left: auto;
margin-right: auto;

float: %[page_alignment];
display: block;

}

0