Customizable Designs in Oracle Application Express version 4.2

Question

Customizable Designs in Oracle Application Express version 4.2

In my work supporting the organization, I am using APEX 4.2 to create a Training Calendar. While I am not a DBA or programming expert, I have been learning through trial and error.

The calendar is already set up, but I am looking for a way to customize how items are displayed based on a column in my table. Specifically, I have two project types: Project A and Project B. I would like these to be visually differentiated by having different border colors on the calendar display. Currently, I have implemented the following CSS code, but it applies to all events:

<style>
.Day a, .NonDay a, .Today a, .WeekendDay a {
    font: normal 10px/12px Arial,sans-serif !important;
    padding: 2px !important;
    border-radius: 4px;
    -moz-border-radius: 4px;
    background-color: #E5E5E5;
    border: 1px solid #FF1414;
}

.Day a:hover, .NonDay a:hover, .Today a:hover, .WeekendDay a:hover {
    background-color: #A3A3A3;
    border: 1px solid #FF1414;
    text-decoration: none !important;
}
</style>

I am seeking advice on how I can modify this so that when PROJECT = A, a specific style as described above is applied, and when PROJECT = B, a variation of the same styling is applied. Any suggestions or guidance would be greatly appreciated.

Thank you, Christina

css sql oracle-apex

Answer 1

Answer №1

I am not familiar with APEX, but the solution you are looking for involves extending HTML elements (such as <li/>, <td/>, or others) with project-specific CSS classes. Without seeing your HTML code, my assumption is that the calendar is constructed with a table. Here is an example of how it could be implemented:

<table>
    <tr>
        <td class="NonDay"><a href="#">27</a></td>
        <td class="NonDay"><a href="#">28</a></td>
        <td class="NonDay"><a href="#">29</a></td>
        <td class="NonDay"><a href="#">30</a></td>
        <td class="NonDay"><a href="#">31</a></td>
        <td class="Day WeekendDay"><a href="#">1</a></td>
        <td class="Day WeekendDay"><a href="#">2</a></td>
    </tr>
    <tr>
        <td class="Day"><a href="#">3</a></td>
        <td class="Day"><a href="#">4</a></td>
        <td class="Day ProjectA"><a href="#">5</a></td> <!-- see the class -->
        <td class="Day ProjectB"><a href="#">6</a></td> <!-- see the class -->
        <td class="Day"><a href="#">7</a></td>
        <td class="Day WeekendDay Today"><a href="#">8</a></td>
        <td class="Day WeekendDay"><a href="#">9</a></td>
    </tr>
</table>

By doing this, you can apply styling to these classes just like you did for the other classes:

.ProjectA a {
    border-color: blue;
}

.ProjectB a {
    border-color: red;
}

I cannot provide assistance on adding CSS classes in APEX, so I recommend seeking help on Oracle's support forums or perhaps on as this question is not directly related to programming.

Answer 2

I am not familiar with APEX, but the solution you are looking for involves extending HTML elements (such as <li/>, <td/>, or others) with project-specific CSS classes. Without seeing your HTML code, my assumption is that the calendar is constructed with a table. Here is an example of how it could be implemented:

<table>
    <tr>
        <td class="NonDay"><a href="#">27</a></td>
        <td class="NonDay"><a href="#">28</a></td>
        <td class="NonDay"><a href="#">29</a></td>
        <td class="NonDay"><a href="#">30</a></td>
        <td class="NonDay"><a href="#">31</a></td>
        <td class="Day WeekendDay"><a href="#">1</a></td>
        <td class="Day WeekendDay"><a href="#">2</a></td>
    </tr>
    <tr>
        <td class="Day"><a href="#">3</a></td>
        <td class="Day"><a href="#">4</a></td>
        <td class="Day ProjectA"><a href="#">5</a></td> <!-- see the class -->
        <td class="Day ProjectB"><a href="#">6</a></td> <!-- see the class -->
        <td class="Day"><a href="#">7</a></td>
        <td class="Day WeekendDay Today"><a href="#">8</a></td>
        <td class="Day WeekendDay"><a href="#">9</a></td>
    </tr>
</table>

By doing this, you can apply styling to these classes just like you did for the other classes:

.ProjectA a {
    border-color: blue;
}

.ProjectB a {
    border-color: red;
}

I cannot provide assistance on adding CSS classes in APEX, so I recommend seeking help on Oracle's support forums or perhaps on as this question is not directly related to programming.

Answer 3

Answer №2

In my system, there is a color mapping table for projects. When an event is retrieved from the calendar table, it is linked to the project table to fetch the corresponding color.

SELECT e.ID, ''||DESCRIPTION||'' DESCRIPTION, event_date FROM EVENTS e, project p WHERE e.project_id=p.project_id;

Answer 4

In my system, there is a color mapping table for projects. When an event is retrieved from the calendar table, it is linked to the project table to fetch the corresponding color.

SELECT e.ID, ''||DESCRIPTION||'' DESCRIPTION, event_date FROM EVENTS e, project p WHERE e.project_id=p.project_id;

Answer 5

Answer №3

To customize the appearance of each calendar entry, you can assign a class within the SELECT statement as shown below:

select ..., 
       '<div class=task"' || task || '>' || details || '</div>'
             as details
from ...

This will generate HTML code for the entries like:

<div class="taskA">This is task A</div>

Answer 6

To customize the appearance of each calendar entry, you can assign a class within the SELECT statement as shown below:

select ..., 
       '<div class=task"' || task || '>' || details || '</div>'
             as details
from ...

This will generate HTML code for the entries like:

<div class="taskA">This is task A</div>

Answer 7

Answer №4

When writing SQL code, make sure to include a column for PROJECT_TYPE that returns the type of your project. In the calendar settings, switch the "Display Type" to "Custom". For the "Column Format", insert something similar to:

<span class="#PROJECT_TYPE#">#COLUMN_VALUE#</span>

Next, define the style for ProjectA.

Answer 8

When writing SQL code, make sure to include a column for PROJECT_TYPE that returns the type of your project. In the calendar settings, switch the "Display Type" to "Custom". For the "Column Format", insert something similar to:

<span class="#PROJECT_TYPE#">#COLUMN_VALUE#</span>

Next, define the style for ProjectA.

Customizable Designs in Oracle Application Express version 4.2

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What are the steps to implement a horizontal scroll feature on a website when the scroll width is set to 0?

Modifying Margin and Spacing for Selections in Radio Buttons

Building a custom form layout using Bootstrap v4 with three input fields and a button all lined up on one

Responsive cards using Bootstrap styling

problem with the height of the side navigation bar

What is causing the Bootstrap 5 navbar to not collapse?

What are the steps to applying strike-through text in Vue.js?

Looking for assistance with manipulating GravityForms data in order to achieve desired results

Incorporate a smooth infinite scroll feature in a CSS carousel that seamlessly loops without

Height of the image is being boosted while the width remains consistent

CSS: text positioning issue observed in Mozilla browser

Set the container width to a fixed size, then center a div within it with a dynamic width. Ensure that the left and right div

What causes the variation in results when I input CSS directly into the head section versus linking it from a separate .css file?

What is the best way for me to incorporate images retrieved from an API call into my

SQL - When CTEs are chained, zeros are removed

Adjusting image size to accommodate responsive column cell using CSS

Changing the class of an element in Svelte: A step-by-step guide

If the element is checked and equal to a specific value, take action

I'm having trouble keeping my navbar fixed

Interactive menu backdrop determined by div element