Latest Contributions by KlaraSchmitt

‎05-24-2023

Hello Kreed, You can set a unique row class by clicking the edit pencil icon on the row card and then at the bottom of the Appearance accordion, find the Row CSS Class and give it a unique name that won't interfere with the app stylesheets. Row CSS Class field highlighted Then in your text card you can add embedded style tags that allow you to apply CSS to your cards using the row class as your first selector. <style> .my-custom-row-class .calcite-web { ... } </style> However, as I noted above, using a min-height doesn't really account for responsive resizing if your cards differ in amount of content, so you may need additional CSS such as media queries or flex-box (and if you're using flex-box, you want to take the Bootstrap col-* classes out of your code.)

‎03-16-2023

Hello @ShaunLakeAWE, I can help you a little bit with keeping the buttons at the bottom of the cards; however, you may still observe some height unbalance at the tablet viewport. Unfortunately, our grid system still relies on floats, so it's difficult to make cards maintain the same height when they are reflowing. Within the <style> tags, you want to add this: .card-content { justify-content: space-between; } This will evenly distribute available space between the <h4>, the <p>, and the <a> (button). If you prefer your headings and paragraph text to remain more top aligned, you can choose to wrap the <h4> and <p> tags in a <div> which will change the space distribution to being distributed between two elements: the div container and the button. Hopefully this gets you a little further in your goals.

‎03-02-2023

Hello @RandyMcGregor3, I understand the confusion and I apologize. Because the Gallery Cards always have a white background and we are trying to automatically handle accessibility contrast requirements for light link colors, we are running a function that darkens the color threshold based on its luminance. It is not perfect, but we are trying to account for a majority of use cases. It presently does result in gray for medium-level link colors that would fail contrast on a while background. Currently, the outline button on Gallery Cards uses a transparent background, but perhaps we can look at other options once the calcite upgrade has been integrated with our app. In the meantime, using the solid button would give you color and also ensure that the button passes color contrast requirements.

‎03-02-2023

Hello @BradCarone, I am sorry for the delay. I have not forgotten about you, but I wanted to make sure I gave you accurate guidance. If you're using Calcite buttons <calcite-button> with an href, you can use appearance="solid" to get a solid button using link-color or appearance="transparent" to get a transparent button using link-color. I might ask you to hold off on using appearance="outline". We are currently in the process of implementing an upgrade that will change how that particular style behaves and it should be finalized by the end of March. An example of this would be: <calcite-button href="#" appearance="solid">Button Text</calcite-button> If you need an outline button, I would suggest using Bootstrap for now (please see my update above for expected changes.) When using Bootstrap 3 classes on a link or a dropdown, you can use .btn-primary to get a solid button, .btn-default to get an outline button, or .btn-link to get a transparent button. An example of this would be: <a href="#" class="btn btn-primary">Button Text</a>

‎03-02-2023

Update We appreciated the community feedback on this change related to how theme is applied to buttons. Based on that feedback, we plan to replace the transparent background on the Bootstrap outline buttons using the .btn-default class with the site-background color (as they were before). This new change was carefully considered and will streamline conversion to calcite outline-fill buttons in the future. We expect it to be included in our next release.

‎02-27-2023

@ArmstKP Embedded styles within the Text Card are not contained to the Text Card; they will apply to the entire page if your selectors are generic. Our application uses a lot of the common HTML elements, so that is likely what is happening if you've attached styles to the button element. You can prevent this from happening by adding a unique class name to the row containing your Text Card and then referencing that row in your CSS to limit how the styles are applied. Example of generic selector usage button {background-color: blue; color: gray} Example of targeted selector using row class .uniqueRowClassName button {background-color: blue; color: gray}

‎02-27-2023

Do you have any custom CSS on your page in Text Cards or in your header that affects buttons or perhaps uses a !important? That looks like the result of custom CSS being applied to generic selectors without enough specificity.

‎02-13-2023

Layout enhancements We have received many enhancement requests for our layout editor. This includes requests for column layouts, text formatting, undo/redo, and the ability to embed cards in other sites. To lay the foundation for building these features, we are slowly transitioning parts of our application to a different framework (Calcite). While our goal is that this will have limited impact on your existing sites, we will need to tweak a few patterns. Update to theme One of these patterns that we will be changing is how theme is applied to buttons. Calcite uses fewer colors than Hub when it comes to calculating button styles. Our initial observations are that this can cause some accessibility contrast violations in transparent and hollow / outline buttons on themes that were previously accessible. To avoid this scenario without requiring customers to review each of their individual site themes, we are going to use the link color and the site (body) background color to generate all styles of buttons. We assume that those who are most concerned about accessible color palates will already have picked a contrast safe option for the link text used with their site background. Hub theme builder displaying body background, text, and link color pickers Moving forward, solid / filled buttons will be using link color for button background and site (body) background for button text. Hollow / outline buttons will be using link color for button border and button text and they will have a transparent background that permits the site (body) background color to come through. Filled button displaying link-color as background and two hollow buttons using link-color as border and text The proposed release date for these changes is 02-22-2023 and at that point we would also be removing the theme pickers for button background color and button text color. Outline buttons on rows Please see update posted on 03/02/2023. As a result of the new framework, outline / hollow buttons will be using a transparent background. This results in the link color / site background combo in most parts of the app. If you've set a unique row color on a Hub site or page, any outline or hollow buttons used within that row will display the row color as the button background. Consider reviewing these patterns for legibility and switching to a solid / filled button if preferred. Survey card set to color palette of theme and button style of hollow Gallery cards There is one additional pattern where changes may be noticeable. The site Gallery Card has a white background and in themes where the site background is dark, link color is likely to be a light color. A light link colored outline button on a white background becomes illegible. To account for this, we will automatically try to darken the link color for outline buttons when they are present on white backgrounds. The solid button will not be affected by this issue. Gallery card displaying darkened pink color for outline button We’re excited to bring you improvements to the layout editor in the coming months, enabled by our transition to a Calcite framework.

‎02-01-2023

As I mentioned to the original poster, you cannot edit the individual Gallery Cards items from within the Hub site. Gallery Cards are dynamically populated. If you wish to change the individual descriptions of the items being displayed in the Gallery Cards, you will need to modify the summary for the item. You can do this from several places. If your item is in your Hub Content Library, you can find the item, open the Content Details and under Basic Info, update Summary. If your item is in ArcGIS Online, you can find the item, open the Item Details Page and edit the text to the right of the thumbnail. If your item is a hub page, you can navigate to the pages tree by selecting the pages icon in the site customize panel, select the page you wish to update, select Page Info, and then fill out the summary. Page info panel displaying page info and summary You may find this blog post helpful: https://www.esri.com/arcgis-blog/products/arcgis-hub/design-planning/make-your-content-shine-with-arcgis-hub/

‎01-31-2023

@RaymondGoodeJr Do you have other custom CSS on that site? My next guess would be that you have some inline CSS that is unintentionally having an affect on your footer due to non-specific enough target selectors. You might want to look through any custom styles for classes that have padding or affect sections.

‎01-30-2023

Hi @RaymondGoodeJr, Try putting a different wrapper in your custom footer HTML box and attaching your image that way. I was able to add a background-image using your code to my site with this as the sample HTML and it didn't add any padding. I hooked your CSS to footer-background. I could not verify with your image as trying to load your image gives me a "site cannot be reached error." <div class="footer-background">  </div>

‎01-30-2023

@elpinguino If those are hub pages, you can modify the text that shows up in the Gallery Card by going to the page itself in Hub, selecting the Page Info swipe accordion from the side panel, adding a Page Summary and saving it. If they are templates, you can open the template editor and fill out Summary.

‎01-26-2023

It's likely you're not attaching your background image to an HTML element high enough in the code structure. Is your background image on .custom-footer?

‎01-13-2023

You are correct. Hub does not provide access to its HTML and CSS in the same way that a self-hosted CMS might. You are able to use the HTML mode of the Text Card to do embedded stylesheets on our sites/pages that can be used to target unique row classes containing cards, but you will not be able to modify the HTML of the cards themselves, only the CSS. You should be able to apply the background image to the row in the same way we applied the gradient if you are looking for more flexibility in CSS attributes.

‎01-12-2023

Hi @Alex_B, Please do not use emberview as your class. We strongly advise against using any of the auto-generated classes in our framework as these control our CSS for the application and could cause problems with your styling in the future. The intention of the Row CSS Class is so that you can give the row a unique class name and then target that class name in <style></style> tags within your Text Card CSS. You will not be able to paste your gradient into the row class field as it's only for a class name. So say you name your row black-white-gradient, this will be applied to the row HTML and then in your Text Card, you want to switch to HTML mode and add your embedded styles: <style> .black-white-gradient { background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(4,12,18,1) 100%); } </style> You may also find that you need to change the row background color to transparent, you'd do that by typing transparent into the row background color field in Row Settings.

Online Status	Online
Date Last Visited	8 hours ago

My Ideas

Latest Contributions by KlaraSchmitt

Re: How to get all cards in a text box to dynamically display on 3 by row

Re: Dynamically positioning a card button based on the card height

Re: Update to Hub button theme colors

Re: Update to Hub button theme colors

Re: Update to Hub button theme colors

Re: Minor Issue: Explore Feeds and Manage Privacy at bottom of page

Re: Minor Issue: Explore Feeds and Manage Privacy at bottom of page

Update to Hub button theme colors

Re: Gallery card text

Re: How to have a background image in the footer

Re: How to have a background image in the footer

Re: Gallery card text

Re: How to have a background image in the footer

Re: Required syntax for the Row CSS Class ArcGIS Hub

Re: Required syntax for the Row CSS Class ArcGIS Hub

Re: Menu Button Text Disappeared

Re: Custom HTML/CSS header - Hide a menu link whic...

Re: Question about Sharing

Re: Can I use inline styles since external style s...

Re: Required syntax for the Row CSS Class ArcGIS H...