+1 401 783 6172 (International callers)
gary@skillbuilders.com
Request Info
Register Login

Login/Register to Access all of Skillbuilders' Content

Connect with:

Login with Facebook Login with Google Login with LinkedIn

Login with your site account

Connect with:

Login with Facebook Login with Google Login with LinkedIn


Lost your password?

Not a member yet? Register now

SkillBuildersSkillBuilders
  • Services
    • Oracle APEX Hosting on AWS
    • Oracle Database Admin/Remote DBA
    • Oracle APEX App Development
    • APEX Administration
  • Products
    • Oracle Database Manager (free)
    • Deprecated APEX Plugins
  • Training
    • Course Calendar
    • Oracle DBA
    • Oracle Developer
    • Oracle APEX
    • Web Development
    • Free Webinars
    • Mentoring
    • Free Oracle Database Tutorials
      • Free Oracle Database Administration Tutorials
      • Free Oracle Developer Tutorials
      • Free Oracle APEX Tutorials
      • Free Solaris 11, Oracle VM and ZFS Tutorials
      • Free Oracle Database Retired Tutorials
      • Free Groovy and Grails Tutorials
  • Blog
  • About
    • About Us
    • Our Team
    • Events
    • Case Studies
      • Oracle Database Administration
      • Oracle APEX Development
      • Oracle APEX Administration
      • Oracle and AWS Cloud
    • Client Testimonials
    • Contact
    • Services
      • Oracle APEX Hosting on AWS
      • Oracle Database Admin/Remote DBA
      • Oracle APEX App Development
      • APEX Administration
    • Products
      • Oracle Database Manager (free)
      • Deprecated APEX Plugins
    • Training
      • Course Calendar
      • Oracle DBA
      • Oracle Developer
      • Oracle APEX
      • Web Development
      • Free Webinars
      • Mentoring
      • Free Oracle Database Tutorials
        • Free Oracle Database Administration Tutorials
        • Free Oracle Developer Tutorials
        • Free Oracle APEX Tutorials
        • Free Solaris 11, Oracle VM and ZFS Tutorials
        • Free Oracle Database Retired Tutorials
        • Free Groovy and Grails Tutorials
    • Blog
    • About
      • About Us
      • Our Team
      • Events
      • Case Studies
        • Oracle Database Administration
        • Oracle APEX Development
        • Oracle APEX Administration
        • Oracle and AWS Cloud
      • Client Testimonials
      • Contact

    Blog

    • Home
    • Blog
    • Oracle APEX: Changing Heading Colors for Interactive Report

    Oracle APEX: Changing Heading Colors for Interactive Report

    • Posted by Tyson Jouglet
    • Categories Blog
    • Date August 27, 2019

    Humans are visual creatures and it is often helpful to communicate information through color. Use this tutorial to change your APEX interactive report heading colors.

    First lets understand how we can identify the headers of an Interactive Report. APEX needs column heading to be identifiable for accessibility and as such generates unique IDs which look something like this: C187979672321729945. I don’t know about you but I have a hard time understanding what that id relates to… so lets make our report columns a bit more identifiable to us humans and add some color.

    This is what the report and HTML look like by default:

    Default Iteractive Report
    Default Styles for Interactive Report
    Default column heading id
    The default ID for a column heading of an Interactive Report

    Here is what we need to accomplish:

    1. Change the column heading to an ID we can understand
    2. Add CSS to the page which styles the ID as we need

    Change the column heading to an ID we can understand

    In order to assign a more appropriate ID to the ENAME column lets modify the ENAME column Static ID property to irEname

    Add CSS to change the column heading styles

    CSS
    #irEname { background-color: lightgrey; }
    #irEname a {  color: tomato; }
    
    

     

    Adding Inline CSS to a page

    Add custom CSS to a single page by modifying the Inline page property

    The final styled column heading:

    Interactive Report with modified heading styles
    Interactive Report with modified heading styles

    Closing Thoughts

    Always be careful when deciding to alter the default behavior of APEX. Often times when adding styles there are unintended side-effects as well as potential blocking issues when it comes time to upgrade. Just remember the APEX team has spent countless hours making sure their default styles work well in all viewports and you should do the same! That said, changing color is a pretty simple change that wont cause unintended issues…usually. Happy coding!

    See all of Tyson’s APEX Trainings

    Tag:apex, colors, headings, interactive report

    • Share:
    Tyson Jouglet
    https://skillbuilders.com/our_team/tyson-jouglet/

    Previous post

    Privilege Analysis included in Oracle Database 19c Enterprise Edition
    August 27, 2019

    Next post

    Skillbuilders at Kscope 2018
    10 October, 2019

    Copyright © Skillbuilders.com

    Interested in joining our team?

    View details
    Managed APEX Hosting on AWS

    Sorry. This form is no longer accepting new submissions.