Add text above Icons

[psmorrow]

Hi there,

I’m interested in adding a text to the “tabs” screen element above the icons.  There’s a built in tab title feature, but it doesn’t work well for me because it is enclosed within the tab icon border, which doesn’t fit with my design.

Is it possible to add this text using css?  Ideally the text would be centered over each Icon.

Many thanks in advance!

[Laura]

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Radu]

Hi,

Can you show em a screenshot about what icons are you referring please ?

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[psmorrow]

Please see attached screen shot. I’m interested in adding icon title as shown using css. Is it possible?

Many thanks!

Pete

[Radu]

Hi,

Can you please provide the entire page shortcode content ? to can see it live on broswer how that it behaves and if it’s a easy way please?

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[psmorrow]

Hi, Thanks for circling back. Here is the page html:

COPY CODE

[vc_row visibility="hidden-xs"][vc_column][vc_tta_tabs style="outline" shape="round" spacing="35" gap="35" autoplay="5" active_section="1" pagination_style="flat-rounded" no_fill_content_area="true" title="Details on the AAM Advantage"][vc_tta_section i_position="right" i_icon_fontawesome="fa fa-random" add_icon="true" tab_id="section_1" el_class="tab_1"][vc_row_inner gap="20"][vc_column_inner width="1/2"][vc_column_text]

Configuration Best Practices
AAM configurations are based on TRM's 20+ years of implementation experience. Foundation data, screens and business process automation are configured using the best methods to align with best practices and minimize complexity.
Starting with a strong foundation accelerates your ability to adopt advanced EAM capabilites, avoid rework down the road, and position for advanced solutions like predictive, congnitive, and IOT technologies.
[/vc_column_text][/vc_column_inner][vc_column_inner width="1/2"][vc_column_text vertical_separator="dark"]

Highlights
Asset and Inventory classifications and templates
Failure codes that support a powerful, yet straightforward failure analysis process
Common Work Status for all aspects of Work Life Cycle: Identification, Planning, Scheduling, Execution, Closeout/Reporting, and History
Work logs to increase visibility and work history
Common security groups to determine role based access to Maximo applications
Prescribed business processes to conform to best practices, enforce data integrity, and improve usability.
[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_tta_section][vc_tta_section i_icon_fontawesome="fa fa-line-chart" add_icon="true" tab_id="section_2" el_class="tab_2"][vc_row_inner equal_height="yes" gap="20"][vc_column_inner width="1/2"][vc_column_text]

Asset Management Insights
AAM provides advanced analytics that help our clients drive better investment decisions, improve asset performance, reduce costs, and provide a safe operating environment for employees and stakeholders. The solution includes preconfigured KPIs, dashboards, custom reports, stored queries, and result sets to reveal business insight that was never before possible.
To help you establish a roadmap for long term success the AAM subscriptoin includes monthly workshops to present advanced process and techniques to maximize data quality.
[/vc_column_text][/vc_column_inner][vc_column_inner width="1/2"][vc_column_text vertical_separator="dark"]

Highlights
Monthly Best Practice Workshops and System Health Checks
Role-based Start Centers and Performance dashboards
Advanced Asset Management KPIs
Saved queries
Custom reports for AAM analytics
Asset Offenders Dashboard
[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_tta_section][vc_tta_section i_icon_fontawesome="fa fa-sitemap" add_icon="true" tab_id="tab_3"][vc_row_inner equal_height="yes" gap="20"][vc_column_inner width="1/2"][vc_column_text]

Process Alignment
AAM includes prescriptive business process logic for the entire work management life cycle.   Processes are configured to align with Maximo configuration best practice.
Changes to suite your unique business process flows can also be easily configured.
[/vc_column_text][/vc_column_inner][vc_column_inner width="1/2"][vc_column_text vertical_separator="dark"]

Highlights
Work notifications posted on user start centers
Business rules ensure key information collected before work can advance through approval process
Validates data entry
Role based work order routing and approval
[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_tta_section][vc_tta_section i_icon_fontawesome="fa fa-smile-o" add_icon="true" tab_id="section_4" el_class="tab_4"][vc_row_inner equal_height="yes" gap="20"][vc_column_inner width="1/2"][vc_column_text]

Enhanced Usability
Usability enhancement improve the user experience while also enforcing business processes and data standards.   Maximo is a powerful platform, but can be overwhelming for end users.   AAM includes clean, intuitive screens out of the box, and tools to give your users the ability to simplify the interface even more.
[/vc_column_text][/vc_column_inner][vc_column_inner width="1/2"][vc_column_text vertical_separator="dark"]

Highlights
Intuitive Screens

On screen training guidance

Pre-populate fields conditionally

Conditionally show, hide fields

Show/hide fields based on user preferences

Point and click business logic and validation

Code library for advanced business rules
[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_tta_section][vc_tta_section i_icon_fontawesome="fa fa-graduation-cap" add_icon="true" tab_id="tab_5"][vc_row_inner equal_height="yes" gap="20"][vc_column_inner width="1/2"][vc_column_text]

Embedded Training
AAM includes detailed, interactive, on-screen step-by-step instructions for end users.   With AAM, users are never unsure which fields to how to enter data into Maximo which improves data quality and reduces your initial and ongoing training needs.
AAM includes step-by-step guidance many Maximo functions, and they can be easily modified to align with your processes.
[/vc_column_text][/vc_column_inner][vc_column_inner width="1/2"][vc_column_text vertical_separator="dark"]

Highlights
Step-by-step on screen to do lists

Low cost but Effective training solution

Tool tips for additional user guidance

Easily configurable to align with custom process

No Maximo customization required

Low cost productivity improvements
[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_tta_section][vc_tta_section i_icon_fontawesome="fa fa-tablet" add_icon="true" tab_id="tab_6"][vc_row_inner equal_height="yes" gap="20"][vc_column_inner width="1/2"][vc_column_text]

Mobility
AAM is compatible with IBM’s Mobility solutions for Maximo –  Maximo Anywhere and Everyplace.   For customers that use Maximo Anywhere AAM also provides a configuration platform for developing custom mobile functionality.  AAM is also compatible with 3rd party mobile solutions.
[/vc_column_text][/vc_column_inner][vc_column_inner width="1/2"][vc_column_text vertical_separator="dark"]

Highlights
Compatible with numerous mobile solutions

IBM mobile soluitons - Everyplace and Anywhere

Develop custom mobile Apps or features
Compatible with 3rd party mobile products
[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_tta_section][vc_tta_section i_icon_fontawesome="fa fa-cubes" add_icon="true" tab_id="tab_7"][vc_row_inner equal_height="yes" gap="20"][vc_column_inner width="1/2"][vc_column_text]

Advanced Solutions
AAM is compatible with all Maximo industry solutions and add-ons as well as third- party solutions.   The integration possiblities are limitless – and examples include advanced planning and scheduling, safety tagging, integration to vendor catalogs, and Watson/IOT and IBM’s continuous engineering suite of products.
[/vc_column_text][/vc_column_inner][vc_column_inner width="1/2"][vc_column_text vertical_separator="dark"]

Highlights
Develop custom functionality
Develop Custom Applications

Worry free upgrades

Examples include: Lockout Tagout, Punchout,  Risk-based Work prioritization, Data scrubbing utilities, Data entry wizards
[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_tta_section][vc_tta_section i_icon_fontawesome="fa fa-cogs" add_icon="true" tab_id="tab_8"][vc_row_inner equal_height="yes" gap="20"][vc_column_inner width="1/2"][vc_column_text]

Administrative Tools
All aspects of the Maximo administration is simplified using AAM’s Maximo Administration console.    Administrative tools include – code free business rule development, test automation, and Develop Centrally manage configurations, monitor performance,
[/vc_column_text][/vc_column_inner][vc_column_inner width="1/2"][vc_column_text vertical_separator="dark"]

Highlights
Performance Monitoring

Automated configuration documentation

Testing Automation

Performance / Load Testing

Real time debugging of business automation

Easily enable/disable custom configurations

Eliminate all customization

Easily promote configuration changes between DEV, TEST, and PROD environments

Point and click business rule configuration
[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_tta_section][vc_tta_section i_icon_fontawesome="fa fa-book" add_icon="true" tab_id="tab_9"][vc_row_inner equal_height="yes" gap="20"][vc_column_inner width="1/2"][vc_column_text]

Documentation
AAM includes full documentation of all configurations, process flows, data definitions.  Training manuals for all Maximo functionality and AAM enhancements are also provided that will be used for initial training during implementation and can be reused by your team to train end users.
[/vc_column_text][/vc_column_inner][vc_column_inner width="1/2"][vc_column_text vertical_separator="dark"]

Highlights
Design Documentation

Functional Requirements

Business Process Diagrams

Standard Operating Procedures (SOPs)

Role based training guides

Test Scripts
[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_tta_section][/vc_tta_tabs][/vc_column][/vc_row]

[Radu]

Hi,
That isn’t possible since the html structure not permit to add a title for every icon outside the border using this shortcode at at all.

An alternative to can name the icons it’s to add a tile for each icon, in the title section.

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[psmorrow]

Thanks for the suggestion. The difficulty I’m having with this approach is that the background area increases due to the additional text. Is it possible to set the background color of the tab area to transparent?

If so, using css, is it possible to add an underline below the icon for the active tab?

Thanks again!

[Radu]

Hi,

You can style active tab and active content tab using the next css

COPY CODE

/* Set background for addiional content of the tab */
.vc_active .vc_tta-panel-body {
    background: red !important;
    color:#fff;
}

/*Highlite the active tab button*/
.vc_tta-tab.vc_active>a {
    border: 1px solid #5472d2 !important;
    color:red !important;
}

The CSS will be added to wp-admin -> theme options -> general settings -> quick CSS

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Author]

Posts