Custom stylesheet for login pages

Discussion in 'Customization & Integration Showcase and Discussion' started by AaronMcH, May 7, 2016.

  1. AaronMcH

    AaronMcH Mega Poster

    Messages:
    129
    We are making a custom login page, along with associated pages, and we need to add a custom stylesheet to the head section of these pages. I tried a call to get_css() in the body, but that only added a link tag below the script tag, resulting in the browser not loading the stylesheet. Is there a way to add a stylesheet to the head section on the page?

    Thank
    Aaron
     
  2. dkolvakh

    dkolvakh Odin Team

    Messages:
    317
    Hello.

    Can you please give me an example of customization you attempt to made and template names you want to customize.
     
  3. AaronMcH

    AaronMcH Mega Poster

    Messages:
    129
    Hi there

    We have made a custom layout (HTML, IDs and Classes) for the following pages stored in /var/opt/hspc-root/custom/template/HSPC/SM/CoreUI
    • login.tmpl
    • remind.tmpl
    • reset.tmpl
    We now have a custom stylesheet for our layout that we need to add to the HTML Head of each of these pages, the stylesheet is stored at /var/opt/hspc-root/custom/style/login.css. While I could probably use a line of JS to add the stylesheet to the HTML Head of these pages, I wanted to know if there was a more "OBAS Compliant" way of doing it.

    Thanks
    Aaron
     
  4. dkolvakh

    dkolvakh Odin Team

    Messages:
    317
    Hello.

    Sorry for delay in answer, I was a little busy due to release of OBAS 4.5.6.

    There are two ways for doing this.

    1. Custom skins with custom templates.
    2. Custom templates, common for all skins.

    In the first case you need to create a custom skin with needed inheritance, then, create a needed directory tree under, f.e., /var/opt/hspc-root/skins/winxp_blue_<X>/ and copy corresponding files into it. In my case it looks like: /var/opt/hspc-root/skins/winxp_blue_6/template/HSPC/WebSystemLib/web_header.tmpl. Now you can insert needed CSS into correct place of <head /> tag. And this CSS will be used only in selected skin.

    In the second case, you will customize behavior of all skins at once, by working under /var/opt/hspc-root/custom/ directory with templates and CSS.

    Anyway, template HSPC/WebSystemLib/web_header.tmpl is a correct place to add custom CSS into header for WinXP based skins for PCC/RCC.
     
  5. AaronMcH

    AaronMcH Mega Poster

    Messages:
    129
    Hi thanks for the reply.

    If we were to create a custom skin, how would I set that skin as the default for the login pages?

    Thanks
    Aaron
     
  6. dkolvakh

    dkolvakh Odin Team

    Messages:
    317
    Hello Aaron.

    Wow, it's a long time passed away, sorry for that. Is your question still actual?
     
  7. AaronMcH

    AaronMcH Mega Poster

    Messages:
    129
    Hi yes this is still relevant.

    Thank you
     
  8. dkolvakh

    dkolvakh Odin Team

    Messages:
    317
    Hello.

    You may create a custom skin, and set it as default for CP login page at Top > Configuration Director > Miscellaneous Settings > Interface Settings > Default skin.

    If you want to customize a PCC/RCC login skin as well (which by default has WinXP style) and make it similar with CP login screen, you need to place customized login.tmpl template to /var/opt/hspc-root/custom/template/HSPC/SM/CoreUI/login.tmpl

    Sorry for delay, I was really overloaded during the past time.
     
  9. AaronMcH

    AaronMcH Mega Poster

    Messages:
    129
    Hi thanks for the reply

    The only issue with doing this is it changes the default skin for the PCC and RCC as well, however we only want this skin to apply to the login screens, is this possible?

    Thank you
    Aaron
     
  10. dkolvakh

    dkolvakh Odin Team

    Messages:
    317
    Hello.

    In this case you should customize login/logout/password reminder templates of common skin for PCC/RCC.
     
  11. AaronMcH

    AaronMcH Mega Poster

    Messages:
    129
    Thanks for the reply, that brings us back to the original issue, that being how to add a stylesheet that only effects those pages, so that it doesn't show in the head tag of other pages in the RCC/PCC.
     
  12. dkolvakh

    dkolvakh Odin Team

    Messages:
    317
    Hello. Since you use customized templates for login page, you may copy original CSS, modify it and use in your custom templates.
     

Share This Page