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 One of our engineers can get you started on your own custom F5 APM logon Page.

8 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 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.


    1. Hi Dave,

      I am back after a year gap. Let me know when we can go on webex.
      I request you to share email address i can send mail.

      Thanks & Regards,
      Habib Khan

  3. Hi Dave,

    This is a very nice read! But yet again I’m not really well versed on HTML and have very few experiences with F5 but we have the system in place on our network and would like to have our APM Logon customized. One more thing is we have linked our APM with a 2FA authentication which just adds more spice to the mix. Hoping you can shed some light 🙂

    1. Hey Rodrigo,

      Honestly HTML and CSS knowledge are key here. With MFA, there’s really no difference to just username and password. If you have a third form field, you would match it up the same way as another field. If it’s another page like how duo used to do their integration, it’d be tough to change the look and feel since it uses their CSS.

      I’d recommend having a frontend dev make a page the decision makers like, and then just pasting that CSS after all the other css. Open up the page in dev tools and start hacking away at the pages CSS until you get what you want. Then go back in to the advanced customizations and modify the CSS to what you came up with.

      If you can invest a week in learning bootstrap or some CSS and maybe a bit of javascript/jQuery I think a lot of the other html pieces might fit together better. CSS enrages me like fixing an old word doc spacing, but it’s good if you need to do any kind of front end stuff like this.

    1. Hey Steve,

      You basically need to completely redo the CSS. If you want the image in the top to be the logo, that’s easy with the basic customizations. If you want it fully customized like the example, you’ll need to write your own css or use bootstrap or some other framework and customize it completely.

      Ours has survived upgrades, which is what I was most worried about, but its definitely a lot of work to get it how you want, and I have a decent amount of experience with web development and F5.

      Feel free to reach out directly if you want to try and go through in more detail.

Leave a Reply

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