• State Suggested Answer
  • Replies 2 replies
  • Answers 1 answer
  • Subscribers 10 subscribers
  • Views 1252 views
  • Users 0 members are here
Related Discussions
Home » Discussions » User Interface

Interface Recipe - Collapsible Section - Hovering Color

MaNa

Hello:

I am trying to learn interfaces to create a single-page application.  I am using the Navigation (subsection) as the starting component (first image).  However, I would like to customize the interface so that when the cursor is hovering over an option, the text and background color changes.  As per the current configuration, the option (when a cursor is hovering) has a border but the text color is blue (option: Expenses in image one).  I would like to make it seem like the user-interface used in the Appian documentation page (second image).  Cursor is hovering on MODEL RECORD DATA.  I assume the collapsible feature is implemented using a!section.  Two questions:

1.  Is there an attribute or function that controls the color of the text/background when a cursor hovers? 

2.  Is a!cardLayout (other than header/billboardlayout) the only component that provides ability to control the background - noticed that a!columnsLayout doesn't and neither does a!columnLayout ?

Thank you for your help.

  Discussion posts and replies are publicly visible

  • 0
    Certified Senior Developer

    Hi Mana,

    1. Nope, there is no way you can control background color on mouse hovers, that colored border is also due to the link in the cardLayout.

    2.Yes these are the only ones in which you can change background color (other than these, in boxLayout you can change label style). There is no need for columnLayout and columnsLayout to have the ability to control background color as you can always add a cardLayout inside column content and achieve that.

    edit: You can play by nesting multiple cardLayouts like this, but it simply has no use other than just have some fun :) 

    a!cardLayout(
  contents: a!cardLayout(
    contents: a!cardLayout(
      contents: a!cardLayout(
        contents: a!cardLayout(
          contents: a!cardLayout(
            contents: a!cardLayout(
              contents: a!cardLayout(
                contents: a!cardLayout(
                  contents: a!cardLayout(
                    contents: a!cardLayout(
                      contents: a!cardLayout(
                        contents: a!cardLayout(
                          contents: a!cardLayout(
                            contents: a!cardLayout(
                              contents: a!cardLayout(
                                contents: a!cardLayout(
                                  contents: a!cardLayout(
                                    contents: a!cardLayout(
                                      contents: a!cardLayout(
                                        contents: a!cardLayout(
                                          contents: a!cardLayout(
                                            contents: a!cardLayout(
                                              contents: a!cardLayout(link: a!dynamicLink(), padding: "NONE"),
                                              link: a!dynamicLink(),
                                              padding: "NONE"
                                            ),
                                            link: a!dynamicLink(),
                                            padding: "NONE"
                                          ),
                                          link: a!dynamicLink(),
                                          padding: "NONE"
                                        ),
                                        link: a!dynamicLink(),
                                        padding: "NONE"
                                      ),
                                      link: a!dynamicLink(),
                                      padding: "NONE"
                                    ),
                                    link: a!dynamicLink(),
                                    padding: "NONE"
                                  ),
                                  link: a!dynamicLink(),
                                  padding: "NONE"
                                ),
                                link: a!dynamicLink(),
                                padding: "NONE"
                              ),
                              link: a!dynamicLink(),
                              padding: "NONE"
                            ),
                            link: a!dynamicLink(),
                            padding: "NONE"
                          ),
                          link: a!dynamicLink(),
                          padding: "NONE"
                        ),
                        link: a!dynamicLink(),
                        padding: "NONE"
                      ),
                      link: a!dynamicLink(),
                      padding: "NONE"
                    ),
                    link: a!dynamicLink(),
                    padding: "NONE"
                  ),
                  link: a!dynamicLink(),
                  padding: "NONE"
                ),
                link: a!dynamicLink(),
                padding: "NONE"
              ),
              link: a!dynamicLink(),
              padding: "NONE"
            ),
            link: a!dynamicLink(),
            padding: "NONE"
          ),
          link: a!dynamicLink(),
          padding: "NONE"
        ),
        link: a!dynamicLink(),
        padding: "NONE"
      ),
      link: a!dynamicLink(),
      padding: "NONE"
    ),
    link: a!dynamicLink(),
    padding: "NONE"
  ),
  padding: "NONE"
)

  • 0
    Certified Lead Developer

    Good question!

    So, as Sanchit has said, no we cannot control background color on mouse hover. However, there are some options that can get you close to that, even if not all the way.

    Firstly, you can set up sites that have custom branding. This allows you to set the colors of lots of objects, including the hover over color for some objects (but not all).

    Secondly, you can set branding across the entire environment through the admin console. This would affect every other application in the environment, though, so definitely don't change it if you only want to customize your application.

    Finally, there are actually a few other options for components you can use if you want to control their color, like the box layouts or card layouts. You do this by setting the style parameter to whatever hex color you prefer. Not that this does not control the hover-over color, though.

© 2024 Appian. All rights reserved.