Latest Contributions by KlaraSchmitt

‎06-22-2023

Hello @Ed_, You are likely running into issues because you have 7 images and Hub uses a 12-column grid system to define our rows. At the moment you have 5 image cards that are each 2-columns wide (utilizing 10 columns) and that leaves you with only 2 spare columns of space, so each one of your remaining image cards can only be 1-column wide. You may want to consider stacking your images in two rows and adding spacers on either side.

‎05-26-2023

If you want to learn more about the grid system Hub currently uses, you can review the Bootstrap documentation here: https://bootstrapdocs.com/v3.0.3/docs/css/#grid The bootstrap grid is dependent on a 12 column grid structure, so you'll find it easier to have four 3-column cards. If you go for five cards, you'll have to have five 2-column cards offset by 1-column. You may find my explanation over on this thread helpful: https://community.esri.com/t5/arcgis-hub-questions/how-to-get-all-cards-in-a-text-box-to-dynamically/m-p/1169903/highlight/true#M5223. The columns are containers for the cards. I am not sure why your cards are shifting vertically. If I had to guess, it's because you're using HTML that may have some CSS supplied by Hub (accidentally) due to similar classes between the old calcite-web and the newer calcite design system. It is normal that the card height might be varied if you have different length titles (1 line vs 2) or descriptions, but spacing displaying above the card isn't reflective of that problem. You may also wish to reference this post if you need even height cards. However, this one starts to get into slightly more complicated CSS layouts that require a little familiarity with flexbox: https://community.esri.com/t5/arcgis-hub-questions/dynamically-positioning-a-card-button-based-on-the/m-p/1268793#M5612

‎05-25-2023

Hi Mark, Are you using this version of Calcite: https://developers.arcgis.com/calcite-design-system/components/card/ for your cards? Because I see some classes in your code (column-22 pre-1) that make me think you might be looking at the older calcite web framework. Hub is not built using that framework, we're still using Bootstrap 3 for our grid system (which is what generates that first div with the col-* classes you list), but we're beginning to incorporate the calcite components from the calcite design system linked above and you can use those same components in the Text Card in the HTML editor. However, you may see some differences as the components rely on slots to manage their configurations. Edit: I'd add that the other classes you mention: three-card contrast-safe-text are formatting that Hub uses to style the calcite card component if you are using the plus icon in the Text Card to inject these. The CSS related to these classes is primarily used for formatting the thumbnail, but there is a little bit related to font-sizes. In regards to you question about a halo effect, unfortunately, it is not possible at this time to add a drop-shadow to the calcite card itself because these components are web components. You might be able to wrap the card in a div and apply a box shadow to the div by a unique CSS class. You can use a box-shadow generator: https://www.cssmatic.com/box-shadow to generate your glow styles. You want horizontal and vertical length to be near 0 and blur to be 10-20.

‎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.

Online Status	Offline
Date Last Visited	a week ago

My Ideas

Latest Contributions by KlaraSchmitt

Re: Resize image card in a row

Re: Using Calcite to Emulate our Drupel Web Site

Re: Using Calcite to Emulate our Drupel Web Site

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: Can I use inline styles since external style s...

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

Re: Gallery Card Border Red in ArcGIS Hub Initiati...

Re: Gallery Card Border Red in ArcGIS Hub Initiati...

Re: The hub ignores changes in preview