|
IDEA
|
Hi @kim77, I wanted to let you know that we've released this feature today. You can now change the semantic heading of the titles in the Gallery Cards. This feature will not result in any visual changes to the cards as it will not change the font size, but now you can have better nested headings for accessibility.
... View more
08-24-2021
12:20 PM
|
0
|
0
|
2226
|
|
POST
|
Hi Kara, My apologies, there was an error in my code. You can see that I put the .copycat-category-card class on the actual link element, but then in the style tags, I told you .copycat-category-card a to target it and there's no way that would work because <a> would have to be a nested element of .copycat-category-card. It should have been a.copycat-category-card which means find the <a> that has the class of .copycat-category-card attached and then apply the hover as a pseudo class. I've updated the code snippets above.
... View more
08-04-2021
06:18 AM
|
0
|
1
|
5012
|
|
POST
|
Hi Kara, The hover state we're using on the category cards is outline: #0079c1 solid 2px and opacity: 0.6; on the image. But what you'll need to do is make sure that your link wraps around both the image and the text in order to get that block outline effect. At the moment, you have two separate links and that's why you aren't getting the unified hover look. The structure that you are looking for with your HTML will be something more like this: <a href="https://noxious-weed-valleycounty.hub.arcgis.com/" class="copycat-category-card">
<img src="https://valleycounty.maps.arcgis.com/sharing/rest/content/items/1ec5c39b460847bfbe16855da64bac3b/data" alt="Noxious Weeds and Pests" style="width: 120px; height: 120px; margin-top: 10px;">
<div>
Noxious Weeds and Pests
</div>
</a> Then in an embed style tag above the HTML, you'll want <style>
a.copycat-category-card {
display: block;
width: 150px;
text-align: center;
}
a.copycat-category-card:hover{
outline: #418499 solid 2px;
text-decoration: none;
}
a.copycat-category-card:hover img {
opacity: 0.6;
}
a.copycat-category-card div {
color: #003580;
margin-top: 20px;
}
</style> You may also wish you use spacer cards on either side of your Text Card rather than try to deal with the Bootstrap 3 grid classes. I've included a grid class on the HTML above (see col-sm-2). But you can either strip that off and use spacers, or add empty divs before and after your card set to col-sm-4. (You want the sum total of the cards in your row to equal 12 and you can do that with the layout editor and let it take care of sizing for you or you can do it with code in a single Text Card that the layout editor will set to 12, but then you are essentially subdividing inside of it.) Edit: Updated code snippets.
... View more
08-03-2021
02:20 PM
|
0
|
3
|
5027
|
|
POST
|
Hi Elaha, While I don't typically recommend this because it's the nuclear option and can cause mayhem if you use too many of them, you might trying appending !important to the end of your CSS for the color attribute. .site-header .navbar-default .navbar-nav > li > a {
background-color: #243e36;
color: #f1f7ed !important;
}
... View more
07-16-2021
06:26 AM
|
0
|
8
|
6325
|
|
POST
|
Hi Elaha, The theme builder is actually intended to style the out-of-the-box header options and will not necessary work with the custom-header option as we can't apply our theme variables to custom code on the fly. It may be that your custom CSS selectors are too general. We use .navbar multiple places in the app and our compiled theme file is very specific, and with CSS, the more specific you get, the more likely that specificity will win against any generalizations. Try using .site-header .custom-header .navbar-default .navbar-nav > li > a instead of .navbar a and see if that helps. As for the issue of the navbar overlaying existing content, if you remove the .navbar-fixed-top class from your header, that will go away. Fixed-headers used fixed positioning so that overlays the content. -Klara
... View more
07-14-2021
02:43 PM
|
0
|
10
|
6356
|
|
POST
|
In checking my own device, I see you are right. If I use FireFox, Chrome, or Brave, the Hub theme is respected and only the browser skin is darkened. But using the Samsung browser changes all the colors. It seems they do not even respect usage of the a media query that lets you specify preferred stylesheet. That is most unfortunate. Bummer.
... View more
06-09-2021
08:51 AM
|
1
|
0
|
2489
|
|
POST
|
Hello, Could you please provide more details about what device you are using, the operating system (android, windows, iOS, etc), and what browser? We currently do not offer a method for you to have more than one theme set at a time, but your situation sounds a bit more like what I have experienced with high contrast mode, which does forcibly change colors in order to improve contrast for some folks who might need it. Generally speaking, dark mode shouldn't be shifting all your colors, but I might be unfamiliar with how certain devices do it.
... View more
06-09-2021
06:24 AM
|
1
|
2
|
2498
|
|
POST
|
Hello, There are several methods to add an external page to your Hub site. You could: 1) Link to the page from your Hub header menu using "Add Link > to existing content" if you don't mind the page opening outside the context of Hub. 2) You could iframe the external webpage into a Hub page using our iframe card. You'd likely want to set "Allow Scrolling" to "Auto" and under Appearance > iframe Height, set it to 100vh. You should also open the Row Settings and switch "Layout" to "Wide. 3) If you want the external page to show in your search catalog, you can also add it as a Document Link by going to your Content Library, selecting the New button and then choosing Content. Under the tab "Use URL" paste in your external page link. If you do this and choose to have the "Embedded Links" option off (found under Site > Settings > Interactions), the page will open as a standalone page when selected from your Hub search results or if featured in a Hub gallery card.
... View more
06-08-2021
08:37 AM
|
1
|
0
|
3486
|
|
POST
|
Hello Dave, You should give the column class a number. If you want three columns of even width, it would be `col-sm-4` as Bootstrap 3 uses a 12-column grid system. So three divs, 4 columns wide. Also, you shouldn't need the container or row classes as our Text Card already sits inside a container and row.
... View more
05-28-2021
11:28 AM
|
1
|
1
|
1914
|
|
POST
|
@Anonymous User I'm sorry that is happening. I believe what you are seeing is that you have `transparent` set as your Body Background Color in the site theme. You'd want to change that to something solid, maybe white `#ffffff` because we use that variable in many places. You can learn more in my post about how theming gets applied.
... View more
05-27-2021
06:06 AM
|
2
|
1
|
2276
|
|
POST
|
Thank you for your feedback. For awareness, the Information Banner setting refers to an organizational banner that can be positioned atop all one's applications. It does not relate to the Actions Menu.
... View more
05-26-2021
03:05 PM
|
0
|
0
|
3962
|
|
POST
|
Hello, This layout is part of our recent redesign of how we display content. The Info panel is open by default on desktop, but can be collapsed by an individual who is interacting with the content. As Hub is intended to be an engagement platform and can include community authored content, the purpose of the Info panel is to provide key metadata (dates, license, author, etc) to those who may want reference your content in other mediums. It is intended to help establish authenticity of the publisher. The Info action is part of the Actions Menu, which was released in 2019; although, we recognize that for certain types of full-screen (edge-to-edge) content there is some unwelcome overlap and we're looking into how to improve our secondary navigation pattern as we move forward. If you wish for your dashboards to open externally to Hub so as not to have to deal with Hub's navigation controls, you may want to toggle the "Embedded Apps" setting off in Site > Settings > Interactions.
... View more
05-26-2021
06:09 AM
|
1
|
4
|
3995
|
|
DOC
|
With the release of our new content views, you may be taking a fresh look at your content and wondering how certain theme elements get applied. In both the Full Details and Explore views of your content, we use Body Background Color, Body Text Color, Body Link Color, Button Background Color, and Button Text Color from your theme for the main portion of your content. Buttons Buttons that are considered primary actions will use your Button Background and Button Text colors from your theme and will display with a solid fill. Buttons that are considered secondary actions will be outlined using your Body Link Color, contain text using Body Link Color, and will use your site Body Background Color as the button background. We use link color and background color for secondary buttons in order to give you a different visual style, while still maintaining legibility and contrast. Tertiary actions are downplayed by using Body Text Color with Body Background Color to offer a more neutral effect. Most do have a border that changes to link color on mouse hover or when displaying keyboard focus. Tabs We have two styles of tabs: vertical, as seen with our In-Page Actions Menu and horizontal, as seen in Filters on the Explore content view. Vertical tabs use Body Link Color for their background fill and Body Background Color for icons or text, and then display the inverse for active selection. Panels opened through In-Page Actions use the same background, text, and link colors as the site, except for Downloads, which uses a different style of card that presently cannot be themed (but we're working on changing that!) Horizontal tabs use Body Link Color for text and a thick bottom border to indicate active selection, and the same set of colors four mouse hover state and keyboard focus state for non-active selections. Where Theme is Not Applied Historically, we've had difficulties trying to apply theme to tables, since there are two colors need for the alternating rows. It's difficult to ensure proper contrast will be met when opacity is involved on non-disabled content. This is the reason tables are grayscale and do not theme. We also do not theme map controls or tooltips, since both overlay content. Basemaps can be customized in site settings and can be very vibrant. Sticking with simple colors on these controls makes them more likely to stand-out and less likely to clash with your theme. Checkboxes and radios use white as the background color for their shape, but use Body Link Color to indicate active selection or keyboard focus. However, if your site uses a dark background, we recognize your link color may be lighter in nature and less legible on white, so we darken it a smidge to improve contrast.
... View more
05-25-2021
09:27 AM
|
4
|
0
|
966
|
|
DOC
|
Today we released a redesign to how ArcGIS Hub displays content for individual items. As part of this redesign, we've implemented full-screen displays that have only a very simple header. This allows visitors interacting with your content the maximum amount of space to explore. Standard/Prominent headers If your site uses one of our dynamic header options, the simple header will use: the logo and/or name you've provided within the Branding section of your site's Header settings theming inherited from the Header Background Color and Header Text Color within your site's Theme a link to the search catalog And if you have Global Nav turned on, we've made sure that Sign In is also available. Custom headers For those using Custom Headers, you will now see a Branding section between your radio selection of Custom HTML/CSS and the code editors within the site's Header section. This can be used to set the logo or name that you wish to see in the simple header on the full-screen layout. You will also likely need to set colors for the Header in your site using the Theme panel, as unfortunately, we cannot auto-detect what colors you are currently using in your custom code for your Custom Header.
... View more
05-25-2021
09:20 AM
|
0
|
0
|
4076
|
|
POST
|
Hello, While organized nested headings are a recommended technique (G141) of the 1.3.1 Info and Relationships guideline, it is not always possible to get it exact with dynamic layout builders like ours. If you want to improve your page, I might recommend switching your Banner heading to an h1. If you are comfortable with HTML, you can append the banner-heading class to the h1 like this: <h1 class="banner-heading">Create Your Own Citizen Science Project</h1> Then if you add a row above your gallery cards, you can add another <h2>Step-by-Step Instructions</h2>, which will improve page structure as your other headings are already h2s. Also, if you switch the sentence beginning with "Dr. Mustafa..." to an h3 rather than an h4, you will improve nesting. I don't know why Wave isn't detecting page regions though. Typically, when I hear page regions, I assume that automated testing tools are looking for landmark roles and as you can see from this screenshot of the VoiceOver landmark roles menu, we have included landmark roles in Hub sites. (There are multiple labeled navigation menus, a main section of content, and a footer.) VoiceOver Menu for landmark roles
... View more
05-17-2021
07:54 AM
|
0
|
0
|
1156
|
| Title | Kudos | Posted |
|---|---|---|
| 3 | 2 weeks ago | |
| 1 | 04-27-2026 08:29 AM | |
| 7 | 04-27-2026 06:30 AM | |
| 1 | 01-23-2026 09:56 AM | |
| 1 | 04-22-2025 07:38 AM |
| Online Status |
Offline
|
| Date Last Visited |
Thursday
|