A stylised Language Selector Region for APEX

A stylised Language Selector Region for APEX

Matt Mulvaney's photo
Matt Mulvaney
·

1 min read

Have you ever been jealous of how the language selector looks on the APEX login page?

... want one that looks just like it?

...Just follow these steps:

  1. Edit Login Page 9999

  2. Click on your Login Region

  3. Set Appearance > CSS Classes to

     padding-bottom-md

  4. Add a Sub-Region called Language Selector

  5. Set it Type to Dynamic Content

  6. Set the Source to

     RETURN apex_lang.get_language_selector_list;

  7. Set the Template to Blank with Attributes

  8. When you're finished it looks like this

  9. At the page level, paste the following to CSS > Inline section

     .a-Login-links {
     padding: 12px 24px;
     text-align: center;
     font-size: 12px
 }

 .a-Login-links>a {
     margin: 0 8px
 }

 .a-Login-links--languages {
     border-top: 2px solid;
     border-color: black;
 }

 .a-Login-links {
     padding: 12px 24px;
     text-align: center;
     font-size: 12px
 }

 .a-Login-links>a {
     margin: 0 8px
 }

 ul.a-LinksList.a-LinksList--lang {
     text-align: center;
 }

 .a-LinksList--lang .a-LinksList-item {
     display: inline;
     margin: 0;
     border: none
 }

 .a-LinksList--lang .a-LinksList-item.is-active {
     font-weight: 700
 }

 .a-LinksList--lang .a-LinksList-item:after {
     content: " ·"
 }

 .a-LinksList--lang .a-LinksList-item:last-child:after {
     display: none
 }

 .a-LinksList--lang .a-LinksList-link {
     display: inline;
     white-space: nowrap;
     font-weight: inherit;
     transition: none
 }

 .a-LinksList--lang .a-LinksList-link:hover {
     text-decoration: underline
 }

  10. ENJOY

What's the picture of? It's Aysgarth Falls. Visit Yorkshire!

orclapex