font color and font bold in detail view

Discussions related to customizing hooks. Hooks are documented at http://bigprof.com/appgini/help/advanced-topics/hooks/
Post Reply
mficarella
Posts: 3
Joined: 2023-03-02 08:24

font color and font bold in detail view

Post by mficarella » 2023-03-02 19:48

Hi all, I would like to change the color of the fonts and make them bold in the detail view.
How can I do?

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: font color and font bold in detail view

Post by jsetzer » 2023-03-02 20:17

change the color of the fonts and make them bold in the detail view
Ugly and useless example showing basic CSS styling. This should give you a starting point.

Code

Code: Select all

<!-- file: hooks/header-extras.php -->
<style>
    .detail_view label {
        color: orange;
        font-weight: bold;
        
        /* more */
        font-style: italic;
        border-bottom: 1px dashed orange;
        font-family:Verdana, Geneva, Tahoma, sans-serif;
        font-size: larger;
    }
</style>
Output

chrome_MguDDVHIqg.png
chrome_MguDDVHIqg.png (12.69 KiB) Viewed 1283 times

CSS Tutorials
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

mficarella
Posts: 3
Joined: 2023-03-02 08:24

Re: font color and font bold in detail view

Post by mficarella » 2023-03-02 21:53

In the example I change the font color of the label, but how do I change the color of a particular field? (example the "text" field)

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: font color and font bold in detail view

Post by jsetzer » 2023-03-02 23:56

Basic knowledge about element selectors in HTML will help you identifying addressable elements in any of your HTML pages.

About selectors
https://www.digitalocean.com/community/ ... ors-in-css


Having identified an element's selector will allow you to use CSS for styling using CSS.

About styling form elements
https://www.digitalocean.com/community/ ... s-with-css


TL;DR
If an element has an id-attribute, use #ELEMENT_ID in your CSS:

Code: Select all

#ID { /* your style definitions */ }
See also
I don't know your idea. If it is about indicating status, instead of coloring a control's font I recommend adding colored labels or alerts and using bootstraps well known variation classes like -success, -warning or -error.

Bootstrap:
https://www.w3schools.com/bootstrap/boo ... tarted.asp

Labels:
https://www.w3schools.com/bootstrap/boo ... labels.asp

Alerts:
https://www.w3schools.com/bootstrap/boo ... alerts.asp

Bootstrap Form Control States:
https://www.w3schools.com/bootstrap/boo ... nputs2.asp

Some more information about your ideas could help us helping you.
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

mficarella
Posts: 3
Joined: 2023-03-02 08:24

Re: font color and font bold in detail view

Post by mficarella » 2023-03-03 07:45

Thank you very much for helping.
Your advice has been invaluable.
I fixed it, see you next time.

Post Reply