Custom F5 APM Logon Page

Recently, a customer wanted to have a custom F5 APM logon page branded. The GUI lets you do nothing more than just some colors or change the logo. With a little bit of web experience and a lot of F5 experience, I felt like I was up to the challenge. I started by diving into the advanced customization section of the APM module.

An example of a custom F5 APM Logon Page

I’ve looked at the code quickly over the years, but never really took a closer look. I had seen some PHP tags in there and just assumed it was a PHP page, but there’s really a lot more to it.

When you take a look at the advanced page, you see a bunch of different folders. There’s the different access policies in the menu, and obviously all the files for customizing each policy are in there once you drill down. In the policy you have three main folders, Common, Logout and Access Policy. The Common  folder is the CSS for the site, and also the header and footer html. You’ll notice that the CSS files have a css extension, but that the HTML files have an “inc” extension.

I assume the “inc” extension was used meaning “include” initially, but maybe somebody from F5 with the history will correct me. I’m not a big PHP guy, but it seems like a convention that others use too. The Logout folder has what you’d expect, the main logout pages. This includes when you click logout, and when you are denied access due to the policy ending. The Access Policy folder has all of the rest of the pages, including the Logon page, and the pages you get when you encounter any number of errors. We’ll cover customizing webtops in a future post. The webtops have their own separate folder at the base of the customization folder.

When you open up the CSS files, you’ll see a lot of standard CSS, but with one big exception, a bunch of PHP in there. What it looks like is going on in the background, is all of the links in APM are actually php files. In the apm.css for example, it basically checks the browser type, and then includes the correct css file and generates it as well formed CSS.  You can use just standard CSS. The easiest way to add your own is to add the CSS at the bottom of the file. If you’re modifying all the pages, go ahead and overwrite the whole file. At worst, a random error page won’t look too nice

The .inc files are similar to the CSS files, in that they’re a mix of HTML and PHP. All of the pages I’ve gone through are put together with a hodge podge of tables. If you search for “credential_input” you’ll see the table and can go through and rewrite it as needed.

An example BIG-IP APM error page

In modifying the pages, I tried to keep the loops all the same. Then you can still modify the the site with the VPE and the general customizations. You could just overwrite everything if you were going to maintain it yourself.

The final piece to the puzzle is the advanced image customization. For example, to add a background page that you can update in the GUI, I added a line to the end of my css:

.hero {
background: url("%[image00]") center center no-repeat;
}

With that, you’re able to make use of the Advanced Customization Images in the settings. You won’t break anything else, such as using a logo in your design somewhere else.

Adding a newer CSS to the APM such as bootstrap, and a little bit of HTML customizations will make your custom f5 apm logon page a lot more palatable to management and your users.

Need help or have a question? Leave a comment, or email us at info@thelbc.io. One of our engineers can get you started on your own custom F5 APM logon Page.

2 Replies to “Custom F5 APM Logon Page”

  1. Hi Dave,

    I read this post but i am in middle of doing customization and find it very difficult understand loops. I tried searching for credential_input and dont find this either in login.inc or apm_full.css. Requesting you to share steps to do customization.

    Thanks & Regards,
    Habib Khan

  2. Hi Habib,

    I’d be happy to hop on a webex and help out and we could do another blog post about what we find. The web design is pretty 2001 in APM, so it can be confusing depending on your web design experience. Shoot me an email on one of the LBC contact emails or hit me up on linkedIn.

    -Dave

Leave a Reply

Your email address will not be published. Required fields are marked *