# Live App: View Link Styles **URL:** \ **Category:** Announcements\ **Tags:** uiux-live-app\ **Created:** [September 22, 2021, 2:11pm UTC](https://forums.knack.com/t/live-app-view-link-styles/11186 "2021-09-22T14:11:22Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![Jessie](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/jessie/32/5_2.png) [@Jessie](https://forums.knack.com/u/Jessie)\ **Post date:** [September 22, 2021, 2:11pm UTC](https://forums.knack.com/t/live-app-view-link-styles/11186/1 "2021-09-22T14:11:22Z")
As [we recently announced](https://forums.knack.com/t/its-time-for-an-improved-live-app/10975), we want to start sharing our plans for improving the design of the live app so we can keep you informed and incorporate your feedback. Next up is a feature we’re calling **View Link Styles**. This feature will allow builders to globally customize the style of links used throughout your live app views. We’re still in active development, so while the preview below shows a functioning Builder UI, nothing is set in stone! That’s why we’re sharing these plans well ahead of it is release. Here you can see a demo of how the links to view details from a table view will look and feel more like a button that can be customized. Here’s what the _fill_ options look like: ![fill-sm](https://us1.discourse-cdn.com/flex020/uploads/knack/original/1X/12f798773ddd4e20228396234571f7cd5d80b5de.gif) And here’s what the _outline_ options look like: ![outline-sm](https://us1.discourse-cdn.com/flex020/uploads/knack/original/1X/81013de0831c6006a0382098ed97e40cfe3f3829.gif) ### How will it work? The following outlines our current plans for this feature and some of our ideas for expanding it in the future. This will _ **not** _ be a breaking change. The current theme renders these as simple text links, which will be the default for all existing apps. If you choose a ‘fill’ or ‘outline’ format then it is possible that the HTML will change. We’ll try to limit all changes to new classes to add to the HTML, like knViewLink-outlined. We will likely choose a different button style to be the default for **new** apps, especially if a particular style is overwhelmingly popular. You can add separate styles for three different link types: 1. **Page links** : any links going to child pages to view more details or edit a record 2. **Action links** : any links that trigger actions 3. **Delete links** : any links that delete a record It’s possible that these styles could apply to _every_ view, regardless of what type it is. But we’re currently leaning towards breaking them up into _ **table** _ type views and _ **detail** _ type views. So any links that display in detail type views (like a calendar if you click on an event) would use those detail styles. We considered allowing a separate configuration for each individual view type, but that seemed like overkill. Currently, the styling options are: - Format: text, outline, or fill - Color: using the default or custom - Size - Uppercase text - Rounded: available if the format is ‘outline’ or ‘fill’ - Border thickness: available if the format is ‘outline’ - Raised: available if the format is ‘fill’ (this adds a subtle drop-shadow) - Default icon As always we’re trying to strike the balance between features and simplicity, so we likely won’t be adding too many additional options beyond these, but we’re open to hearing other suggestions. In the future, we want to add options to **override** these on the view or link level. So if you want a particular link to be bigger or a different color, you can change that individual link’s style while everything else uses the defaults. The plan is also to use similar options for customizing **menu views** , along with the **page links** in the header. ### Feedback requests Please let us know if you think these options will be valuable, along with anything else you’d like to see for customizing view links like this. In particular, we’re interested in hearing feedback about: - The best way to manage global settings with individual overrides - Any additional formats or style options we should consider - Any concerns with class changes or breaking changes Thank you for helping us with this feature! In addition to hearing from you, we’ll continue using this topic to provide updates from our end about the feature’s development and upcoming release. ---
**Author:** ![JulianKirkness](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/juliankirkness/32/770_2.png) [@JulianKirkness](https://forums.knack.com/u/JulianKirkness)\ **Post date:** [September 22, 2021, 3:04pm UTC](https://forums.knack.com/t/live-app-view-link-styles/11186/2 "2021-09-22T15:04:15Z")
This is great news - I change all the links in my apps to buttons by using the following in the link text: Edit and then the defining CSS: .blueButton { background: #2d6bb3; border: 0px solid #2d6bb3; border-radius: 4px; padding: 10px 30px; color: #ffffff; display: inline-block; font: normal 600 14px/1 “Calibri”, sans-serif; text-align: center; text-shadow: none; } .blueButton:hover { background: #4689c0; } I generally set up blue, orange, green, yellow, and red buttons as a minimum in an app. I also always style the Delete link (and capitalise the first letter). So this would be quite a time saver. However, I may often have several links in a single table or details view - these may be action links etc. I would need to be able to specify the colour of each separately so they stand out - ideally from a predefined set of colour options so I don’t have to remember colour codes. As a starting point for a new app I would probably also set the following: .kn-scene { background: #eaeaea !important; border: 10px solid #eaeaea !important; border-radius: 7px !important; } .kn-detail-label { background: #d5d5d5!important; border: 1px solid #d5d5d5 !important; border-radius: 1px !important; } .kn-list-item-container { border: 1px solid #2D6BB3; background: #ffffff; text-align: center; } My hope is that soon NONE of this will be necessary! ---
**Author:** ![CarlHolmes](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/carlholmes/32/2814_2.png) [@CarlHolmes](https://forums.knack.com/u/CarlHolmes)\ **Post date:** [September 22, 2021, 4:16pm UTC](https://forums.knack.com/t/live-app-view-link-styles/11186/3 "2021-09-22T16:16:53Z")
What @JulianKirkness said 😆 - He kindly shared all the button tips and tricks with me a couple of years ago, and showed me how to do them. It’s great that this will be for action links too. The below is a typical table, would look even better with the archive as a button 🚀 As mentioned, I would like to see the ability to set “favorite” color options as having to copy and paste the Hex code each time would require more work. It’s important to me that the link colors are consistent across the app. Would it be possible to either save the color as a favorite in the color picker panel or even better, add it to the app settings when we setup the “Live App Design”. 🤷‍♂️ This news is AWESOME!! so excited…😁 ![image](https://us1.discourse-cdn.com/flex020/uploads/knack/original/1X/40527ec42d00c31c327a55b4947b846a039b582e.png) ---
**Author:** ![JulianKirkness](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/juliankirkness/32/770_2.png) [@JulianKirkness](https://forums.knack.com/u/JulianKirkness)\ **Post date:** [September 22, 2021, 4:36pm UTC](https://forums.knack.com/t/live-app-view-link-styles/11186/4 "2021-09-22T16:36:33Z")
Hi @CarlHolmes - you can already use this for Action Links: ![Screenshot 2021-09-22 at 17.33.54](https://us1.discourse-cdn.com/flex020/uploads/knack/original/1X/8c797dd07902e522fd29d6014cb79c1664aed802.png) Live: ![Screenshot 2021-09-22 at 17.34.44](https://us1.discourse-cdn.com/flex020/uploads/knack/original/1X/0875df888418b01f0695e51fa681cab57da514e1.png) ---
**Author:** ![CarlHolmes](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/carlholmes/32/2814_2.png) [@CarlHolmes](https://forums.knack.com/u/CarlHolmes)\ **Post date:** [September 22, 2021, 6:25pm UTC](https://forums.knack.com/t/live-app-view-link-styles/11186/5 "2021-09-22T18:25:41Z")
Whoop whoop 🙌 Every days a school day, thanks @JulianKirkness Not sure why I hadn’t worked that one out, it’s exactly the same process…doh! 🤪 ---
**Author:** ![MichaelG](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/michaelg/32/758_2.png) [@MichaelG](https://forums.knack.com/u/MichaelG)\ **Post date:** [September 24, 2021, 7:45pm UTC](https://forums.knack.com/t/live-app-view-link-styles/11186/6 "2021-09-24T19:45:46Z")
WONDERFUL!!! 😃 I will see it in details later but great. This functionality could be applied to Title. Maybe adding distance options between the text and the border. ---
**Author:** ![MichaelG](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/michaelg/32/758_2.png) [@MichaelG](https://forums.knack.com/u/MichaelG)\ **Post date:** [September 26, 2021, 7:11pm UTC](https://forums.knack.com/t/live-app-view-link-styles/11186/7 "2021-09-26T19:11:46Z")
> [@Les](#): > > As always we’re trying to strike the balance between features and simplicity yes, very important. Keep it simple. ---
**Author:** ![Jessie](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/jessie/32/5_2.png) [@Jessie](https://forums.knack.com/u/Jessie)\ **Post date:** [September 27, 2021, 1:45pm UTC](https://forums.knack.com/t/live-app-view-link-styles/11186/8 "2021-09-27T13:45:16Z")
Thank you for the responses here so far! We’re reviewing and continuing to build this out, will post here again when there’s another update from us. * * * Just wanted to add something I did not include on the original post: These options (along with all other new design settings) will _not_ be available on legacy themes. Legacy themes are only available for old apps that had that setting before the new Builder, if you have an app on a legacy theme, you would find that here: ![image](https://us1.discourse-cdn.com/flex020/uploads/knack/original/1X/1141552047d28cb19e2a258879cb04bd95957eb2.png) Thanks again for following along and helping us out with your great feedback! ---
**Author:** ![Jessie](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/jessie/32/5_2.png) [@Jessie](https://forums.knack.com/u/Jessie)\ **Post date:** [September 27, 2021, 2:14pm UTC](https://forums.knack.com/t/live-app-view-link-styles/11186/9 "2021-09-27T14:14:45Z")
---
**Author:** ![MichaelG](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/michaelg/32/758_2.png) [@MichaelG](https://forums.knack.com/u/MichaelG)\ **Post date:** [September 28, 2021, 8:29am UTC](https://forums.knack.com/t/live-app-view-link-styles/11186/10 "2021-09-28T08:29:21Z")
It would be useful an option to style a Text Formula. Since one of the objectives is to combine various factors in one field, maybe there is a way to style them diferently for better UX. ex: Alex, **Team A** ---
**Author:** ![JulianKirkness](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/juliankirkness/32/770_2.png) [@JulianKirkness](https://forums.knack.com/u/JulianKirkness)\ **Post date:** [September 29, 2021, 8:45am UTC](https://forums.knack.com/t/live-app-view-link-styles/11186/11 "2021-09-29T08:45:36Z")
Hi @MichaelG You can already add styling to a text formula - for example: `Flight Travel Info
Arriving or Departing: {Arriving or Departing Ireland}
From / To: {Patient Test Origin (Country).country} ==> {Patient Test Destination (Country).country}
Flight Info: {Flight Number 1} - {Flight Date 1}
Passport No: {Passport Number}
Name on Passport: {Name on Passport}` Which will look like: **Flight Travel Info** Arriving or Departing: {Arriving or Departing Ireland} From / To: {Patient Test Origin (Country).country} ==\> {Patient Test Destination (Country).country} Flight Info: {Flight Number 1} - {Flight Date 1} Passport No: {Passport Number} Name on Passport: {Name on Passport} You can also use styling in Conditional Rules. ---
**Author:** ![MichaelG](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/michaelg/32/758_2.png) [@MichaelG](https://forums.knack.com/u/MichaelG)\ **Post date:** [September 29, 2021, 10:32am UTC](https://forums.knack.com/t/live-app-view-link-styles/11186/12 "2021-09-29T10:32:28Z")
Great @JulianKirkness that it can be done!! I assume you paste it in the Equation Editor? It doesn’t work…? ![image](https://us1.discourse-cdn.com/flex020/uploads/knack/original/1X/8438fae4813aebbf06b0f8a46226943085bc6692.png) ![image](https://us1.discourse-cdn.com/flex020/uploads/knack/original/1X/cfd7566be615bc04006c73e4e7d4fbfa450504da.png) ---
**Author:** ![MichaelG](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/michaelg/32/758_2.png) [@MichaelG](https://forums.knack.com/u/MichaelG)\ **Post date:** [September 29, 2021, 10:39am UTC](https://forums.knack.com/t/live-app-view-link-styles/11186/13 "2021-09-29T10:39:15Z")
Ok, now it does. Fantastic!! 👏👏👏🤗 thanks @JulianKirkness ! ![image](https://us1.discourse-cdn.com/flex020/uploads/knack/original/1X/b86f750628d69963072862ae74ba4653cc53416f.png) @JulianKirkness gave me more help on styling Text Formula with this example for color and text size: `{DOB}` and the italic is with `text` Very useful in my use-cases!! ![image](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/c/c617cf545d2af0c2e114ce26cd6714bf0cc284b8.png) ---
**Author:** ![Jessie](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/jessie/32/5_2.png) [@Jessie](https://forums.knack.com/u/Jessie)\ **Post date:** [November 30, 2021, 4:20pm UTC](https://forums.knack.com/t/live-app-view-link-styles/11186/14 "2021-11-30T16:20:52Z")
## View Link Styles coming soon! Hey everyone 👋, we’ve wrapped up development on view links! Here to share some details about what to expect with this feature. ### Release date We’re hoping to release this in mid to late December. Development is complete and we’re now testing and finalizing release materials. We’ll update this topic again when we have an exact date. _Edit 1/21/22: There have been some unforeseen delays with the release of this feature. We are still planning on releasing view link styles and the other live app design updates in the near future. Thank you for your continued interest and patience!_ ### Custom code impact This feature will not include any breaking changes. We’re including a “text” style that is the equivalent of the current text link. The markup will remain the same, including the existing classes like `.kn-text-link`. We are adding some new classes for these new links, like `.knViewLink`. **New apps** will look different, with the following defaults for these settings: - Style: fill - Size: medium - Fill color: #e7e7e7 We may eventually add an account level option that lets you set the defaults for new apps. ### Final settings From the Live App Design area of your App Settings, you’ll now see a new section called “View Links” where you can globally set the style of links throughout your app. There are three styles [Fill, Outline, Text] each with a subset of options, and and you can separately control three different link types: page links, delete links and action links. ![view_links_preview](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/2/2a985741b302429afb35710801e0401c4775b0c5.gif) ### What’s next Right now these settings control the links for _every_ view. Because table views look so different than list/detail views, we’re planning to add separate options for both. We also plan to add options to **override** link settings on the view or link level. So if you want a particular link to be bigger or a different color, you can change that individual link’s style while everything else uses the defaults. For now, you can change the icon and text color with display rules, but further control at a view input level will still require customization. ### Your feedback Thank you for those of you who provided feedback on this feature! While the options here may not cover every customization you’ve shared, we believe that these design options represent the best start for everyone to create modern looking sites with less effort. With that said, the process isn’t over! Once this is released we’ll continue to ask for your feedback to inform future iterations. ---
**Author:** ![CarlHolmes](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/carlholmes/32/2814_2.png) [@CarlHolmes](https://forums.knack.com/u/CarlHolmes)\ **Post date:** [November 30, 2021, 10:21pm UTC](https://forums.knack.com/t/live-app-view-link-styles/11186/15 "2021-11-30T22:21:22Z")
Hey @Les - I was thinking about this today and wondered how things were coming along 😀 The ability to set at the app level and then tweak per view is very welcome and will save quite a few clicks 👍 Very much looking forward to this feature being launched. 🚀 ---
**Author:** ![JulianKirkness](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/juliankirkness/32/770_2.png) [@JulianKirkness](https://forums.knack.com/u/JulianKirkness)\ **Post date:** [December 13, 2021, 9:58am UTC](https://forums.knack.com/t/live-app-view-link-styles/11186/16 "2021-12-13T09:58:57Z")
I have similar comments about this as I do for menu styles - I think there is a definite need to be able to have several colours for buttons - and I don’t just mean by type. For example, there may be a few different pop up edit forms accessed from a table an I would need these to be differentiated by colour - same with Action Links, etc. In my view it would probably be better to implement the full features for these rather than introducing a partial solution which would then mean that we users would have to re-visit apps and change them when the full feature set is available. ---
**Author:** ![Jessie](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/jessie/32/5_2.png) [@Jessie](https://forums.knack.com/u/Jessie)\ **Post date:** [December 13, 2021, 3:21pm UTC](https://forums.knack.com/t/live-app-view-link-styles/11186/17 "2021-12-13T15:21:58Z")
Hi @JulianKirkness - thanks for following up here with those thoughts as well. View and input level overrides are being worked out, as we totally understand that the global settings will not meet all of the needs outlined here by all of you! This was part of our development plan to release the feature in stages, and that may mean that the value is not yet unlocked for you. If that’s the case, please stay tuned for a new topic where we’ll discuss those overrides, where we’ll especially appreciate your feedback. 🙂 ---
**Author:** ![Nat](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/nat/32/4524_2.png) [@Nat](https://forums.knack.com/u/Nat)\ **Post date:** [January 7, 2022, 2:53pm UTC](https://forums.knack.com/t/live-app-view-link-styles/11186/18 "2022-01-07T14:53:20Z")
amazing, i never though of this! ---
**Author:** ![Jessie](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/jessie/32/5_2.png) [@Jessie](https://forums.knack.com/u/Jessie)\ **Post date:** [February 7, 2022, 7:21pm UTC](https://forums.knack.com/t/live-app-view-link-styles/11186/19 "2022-02-07T19:21:17Z")
Hi everyone - we are excited to let you know that **View Link Styles** has been released! We hope this can make your life easier with a little less custom code to work through. You can now update the style of page links, action links and delete links by customizing the formatting, color, border, size, text and icons. For further documentation, refer to our [knowledge base](https://learn.knack.com/article/5lbfjnp6p2-live-app-design#view_links) and our [dev docs](https://docs.knack.com/changelog/view-link-styles). And be sure to continue following the parent topic, [📣 It's time for an improved live app!](https://forums.knack.com/t/its-time-for-an-improved-live-app/10975), for more design setting updates including upcoming conversations around view level overrides and menu design settings. Thank you for your patience as we worked through some delays and the final details to get this functionality into your hands. It paves the way for more design setting updates to come that we’re excited to share with all of you. ---
**Author:** ![MichaelG](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/michaelg/32/758_2.png) [@MichaelG](https://forums.knack.com/u/MichaelG)\ **Post date:** [February 7, 2022, 8:31pm UTC](https://forums.knack.com/t/live-app-view-link-styles/11186/20 "2022-02-07T20:31:52Z")
Excellent!! …and soon “view level overrides and menu design settings” fantastic! Go Knack Team!! [Next page](https://forums.knack.com/t/live-app-view-link-styles/11186.md?page=2)