Latest Contributions by KlaraSchmitt

‎12-12-2022

Hi Chris, Yes SVGs are currently still relevant. 🙂 However, in order to get a shadow, you're probably going to want to use box-shadow on the SVG object styling. text-shadow would be used specifically on a <text> element within your SVG object and your example only contains a <path> element.

‎08-01-2022

Hello @JDScharf, In the Layout Editor, under the Header settings, there is an option for adding a custom header under Appearance. So you could replace the dynamic option you are currently using as a header with a multi-level version you custom build. This will automatically be injected beneath the Global Navbar, which is what contains sign in and search. Once you switch to the custom header option, you should see text boxes for HTML & CSS.

‎07-05-2022

I am sorry, I do not. I did log it as a bug, but I do not control prioritization. You may wish to reach out to Support so that you can have a trackable issue.

‎06-30-2022

Hello @KansasDASC , Hmm. I'm not sure then. It seems like it could be a bug; unfortunately, I am not super knowledgable when it comes to issues in the search catalog. Have you tried reaching out to Support to see if they can assist?

‎06-29-2022

@KansasDASC , In your site editor, go to Settings > Interactions and enable the Embedded Apps toggle. This will keep applications opening under your site header and the links in search results should not display the "opens external link / new tab" symbol.

‎06-28-2022

@Lindsay Customization of the header and footer occurs at the site level. It then carries across all pages associated with the site.

‎06-24-2022

@Lindsay , Ah. In the screenshot you've shared, that actually pertains to whether or not you want a custom footer on your site. Unfortunately, you cannot remove the product footer as it is required by data privacy laws. https://doc.arcgis.com/en/hub/sites/configure-consent-notice-and-product-footer.htm#ESRI_SECTION1_361BFEFACC334AD2B619C89C50D0E8F9

‎06-23-2022

Hi @Lindsay, You can turn that off by going to your site's Layout Editor. Then select Settings > Interactions and disable the Product Branding toggle.

‎05-25-2022

NFlourish is correct. Hub does not allow custom javascript or javascript packages due to security concerns.

‎05-16-2022

Hello @JustinGleeson1, Hub uses the Bootstrap 3 framework, which relies on a 12 column grid. Assuming you are using a single Text Card and each card is wrapped in the Bootstrap grid classes you have above, you may want to look at adding a col-md-offset-1 https://getbootstrap.com/docs/3.4/css/#grid-offsetting on your first card since you essentially have two extra columns leftover in your set of five cards.

‎05-02-2022

Hello @CIDAdmin, Regarding question #1, given you are already using our card code snippet, I will assume that you are at least moderately comfortable in the HTML editor of the Text Card. It is possible to move all three cards into the same Text Card to avoid the scenario you are describing, but you will need to add some of the grid classes to handle reflow in the layout. You will need to add a wrapper div around each .calcite-web card that represents the sizes you want the card to take based on device size. <div class="col-xs-12 col-sm-6 col-md-4"> <div class="calcite-web"> ... </div> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="calcite-web"> ... </div> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="calcite-web"> ... </div> </div> Hub is based on a 12-column grid in Bootstrap 3, so the number of columns in a row need to equal 12, but a row's width changes (this is called a breakpoint) based on the device that is rendering your site. My example above roughly translates to "On mobile devices, this card should be 12 columns wide (100% of the available width). On tablets in portrait orientation, this card should be 6 columns wide (50% of the width). On tablets in landscape orientation AND anything larger, this card should be 4 columns wide (~30% of the width)." You may find the examples on the Bootstrap documentation helpful: https://getbootstrap.com/docs/3.4/css/#grid-example-mixed In regards to Question #2, this is actually much more challenging to do with the Bootstrap grid if you want it handled dynamically. It is possible using CSS flexbox, but you would need to setup your own grid structure (and ignore everything I just wrote about Bootstrap's columns.) The reason we don't set height in that code snippet is because as soon as the card starts to resize to handle different devices, it often increases in height and a fixed height would cut off part of the card's contents. You could use custom css to set a min-height on the .calcite-web class, but I would definitely recommend adding a unique class to the row first, just so you don't impact anything else. .custom-row-class .calcite-web { min-height: 468px; /*or the height of your tallest card in the row */ }

‎04-08-2022

Hello @DavidMaggio, I'm sorry you're experiencing this. It is definitely a bug and not something you would not be able to fix yourself. This bug has already been reported, so I'll make a note of your issue on it. Thank you, Klara

‎04-01-2022

Hello @PLadd, Yes, it does also apply to Enterprise Sites and sure, I'll try to provide a simple example of how this could work. Here is a row in my site. It has an Image Card and a Text Card. I've given it a unique row class of forest. Now that I have a unique row class, I can open up a Text Card anywhere on the page and add CSS that utilizes that class to target the elements within the row. To write out what I have in the code screenshot above, I have embedded styles that specify my row and then the elements within my row that I want to spruce up with additional CSS. <style> .forest h2 {font-size: 30px; font-weight: bold; margin-bottom: 30px;} .forest p {font-size: 18px; margin-bottom: 20px;} .forest .image-card {border: 3px solid white; margin-left: 10px;} </style> If you were to inspect the code of the Image Card, you would see it has a class .image-card. That is an example of one of our component classes and one you don't want to straight up target without a unique row wrapping class.

‎04-01-2022

@PLadd, You will not be able to edit the full CSS of Hub Sites or Pages directly as we do not support a global stylesheet (so if you were looking for it, that's why you can't find it.) This is intentional. In the past, we have allowed modification at the site level and unfortunately, what happened was people would do things like use absolute positioning or !important to modify our app's layout. Then when we released new features, we'd break their layouts and they'd be unhappy about that. Since we cannot predict what people will do with CSS and Javascript, we no longer allow that level of control. CSS is scoped to embedded styles within a site, page, or site header. You can modify your site and page layouts individually. You simply have to do that within embedded <style></style> tags that you can set in a Text Card. You can open the Text Card's HTML editor by clicking the </> Edit in HTML button at the bottom of the card. We also are working on embeddable cards, which will allow you to repeat certain cards across multiple pages. Additionally, when you are doing CSS and HTML in the Text Card, I do not recommend targeting our card class names as you may run into the same issue mentioned above where we update a card and unintentionally affect any additional styling hooked to the same class. Your best solution to avoid that scenario and avoid use of !important is to make a unique classes on the rows containing the cards you want to modify, so that you get a narrower set of selectors, such as .special-row-class .existing-card-class. You can find this field under Row Settings > Appearance > Row CSS Class. With a unique row class, you could also change the row height in your Text Card. And the non-CSS solution would be to use our Spacer Card to add a specific height amount of white space to your row card. The Spacer Card also allows you to hide that extra white space in mobile, when the layout switches to a single column. Hope that helps!

‎03-30-2022

In the ArcGIS Enterprise Sites 11.0 release, we will be including a change that increases the base font text on all sites and pages from 14px (10pt) to 16px (12pt) and changes the root html font size from 10px (8pt) to 16px. Frequently Asked Questions Why is font size changing? ArcGIS Enterprise Sites recognizes the importance of making web content accessible to people with diverse abilities. While there isn’t an official WCAG standard for font size, 16px (12pt) font size is commonly used by most web browsers to improve the readability of web content. Why is Enterprise Sites changing font measurements? rem stands for “root em” and is considered a relative size text format; it is calculated based on a value set on the root html element. The benefit of using relative text size measurements is that it improves the ability to scale a site or page layout proportionately based on the root value, which in this case will be 16px. Where is base font text used? Your base font is any text that has been added to a site or page layout using the preformatted paragraph font size included in the text card or through HTML/CSS in the text card editor. Headings and other preformatted font styles included in the text card will not be impacted. How can you tell if a site uses rem values? You can check your site’s HTML before upgrading by opening the any of the HTML/CSS editors (text card, header, footer) and looking for the presence of rem measurements. Note: Site templates that include a timeline component have already been updated to account for the change. You do not need to take any action on the timeline component. How do you update a site? The upgrade will automatically update the base font size and root html font size to 16px. If you are already using rem and a root html value other than 16px, you may see some visual differences. How can you update your site’s rem values before the upgrade? The only way to prevent any visual changes ahead of the upgrade is to switch your rem units to pixels. You do not have to switch to pixels if your site already benefits from relative font sizing, but if you wait, you may need to modify your rem values after upgrading. How can you update your site’s rem values after the upgrade? The easiest way to update your rem values to be calculated based on the new root html value is to establish the equivalent pixel size of your existing rem values and then use a pixel-to-rem converter after the upgrade. Take the pixel value, open the converter, make sure base is set to 16, and generate your new rem value. Update your custom code with your new rem values. Will content shared on a layout or through a site’s search results be impacted? This update primarily affects the base font text of sites and pages and not items embedded on a site or page layout. You may also notice the font size increase slightly in the search results, content views, and site editor. Can I continue to use pixels in custom HTML/CSS? Absolutely! If you are currently using pixels, the rem update will not replace your code and you do not need to make any changes. You can safely continue to use pixel-based font sizes in your work.

Online Status	Offline
Date Last Visited	yesterday

My Ideas

Latest Contributions by KlaraSchmitt

Re: What Glyphicons are included?

Re: Dropdown Header in ArcGIS Hub

Re: Gallery Card Links Erroring

Re: Hub Application Item Open in New Tab

Re: Hub Application Item Open in New Tab

Re: How to remove footer

Re: How to remove footer

Re: How to remove footer

Re: HTML issue in Hub

Re: Centering 5 Cards in a single Row in Hub

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

Re: HUB dataset filter text doesn't match theme color (cannot read text)

Re: Custom Header for Enterprise Site: Calcite Bootstrap

Re: Custom Header for Enterprise Site: Calcite Bootstrap

FAQ: Upcoming changes to base font size and rem units in ArcGIS Enterprise Sites

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