|
POST
|
Hi Kevin, Unfortunately, at this time we do not support linking out to external stylesheets, although, I do understand the desire for more robust styling and we do hope to expand upon shared themes in the future. In regards to your font question, if you set a font through Google Fonts (eg. an external URL) to change your fonts within our Theme Builder in the Site Editor, this will carry the font into your theme and it will not matter whether people have a local copy installed. That is the benefit of importing a font through this method. It removes the need for the fallback method that we used to have to do in CSS to handle the situation you have above where (not all Windows machines had Helvetica, so it rolled back to Arial.) If you set a font through Google fonts and for some unknown reason it were to fail, we do have fallback fonts in place in our code, and the first fallback font would be "Avenir Next", which is our brand font and which would be applied regardless of whether it exists on one's computer locally because we have a license to publish it across our apps. Is your issue that you are worried that you will set a font and it will not be available to all computers or is it that Helvetica is your brand font, and you need it set across the board? If so, do you have a URL for your Helvetica license? Otherwise, you may find 5 Google Web Font Alternatives to Helvetica and Arial - UltraLinx useful if you don't need an exact replica.
... View more
01-22-2018
12:59 PM
|
0
|
5
|
1898
|
|
POST
|
Could you perhaps use a photo editor to create a consistent sized canvas - like 400x300 pixels, transparent background - and then resize the logos within the context of that canvas and save them? Then you could make the logos smaller or larger based on your preferences, but the actual images would be saved with the context of consistent empty space. If you don't have Photoshop, you could also do this with Online Photo Editor | Pixlr Editor, which is a free browser based tool that is similar (it requires Flash though.)
... View more
10-27-2017
06:34 AM
|
0
|
0
|
1824
|
|
POST
|
Hello C E Howard, Your code above suggests you are using my .featured-gallery example. For those cards, you can change the width by changing the Bootstrap grid classes. So rather than use <div class="col-xs-12 col-sm-6 featured-gallery"> which basically says, "make this card 100% on phones, and 50% on all screens larger," you could change it to this for example <div class="col-xs-12 col-sm-6 col-md-4 featured-gallery"> This will give you a 100% width card on phones, 50% width card on tablets/small laptops, and 33% width card on large screens. The Bootstrap grid is based on a 12 column row, so each column-size (xs, sm, md, lg) needs to add up to 12 and this dictates width by screen-size, but you can set multiple column classes per card. You can find more information here: https://getbootstrap.com/docs/3.3/css/#grid-example-mixed-complete The image will proportionately resize height based on the width of the Bootstrap column classes; therefore you do not set a height. I would strongly recommend you use a different type of card if you wish to set height, because if you set height on .featured-gallery cards, you will break the responsive layout and it will not look good on mobile devices.
... View more
10-25-2017
09:43 AM
|
0
|
2
|
1824
|
|
POST
|
Hi Liz, Unfortunately, yes, that's about as far left as it can go. Our site template is built using a fixed-width layout of 1170px rather than a fluid-width layout. While we support fluid-width rows, so that folks can have full bleed background images, we generally avoid having content fluid-width as fluid sites can be harder to design and aren't as popular. Thank you, Klara
... View more
10-11-2017
12:54 PM
|
0
|
0
|
1857
|
|
POST
|
#csstips Hello Liz, I would recommend adding a photo credit through a Text card if you are trying to cite a row background image or perhaps a text credit through an image caption. Here is one method for providing a photo credit on the row with a link back to the author. 1. Add image as background image to row. 2. Add Text Card with desired copy or empty Text Card with min-height set to force background to be more visible <div style="min-height: 300px"></div> 3. Add another Text Card below the first. This will containing your citation. The second card may have a little extra padding at the bottom in Preview. (The padding comes from that card having a minimum height in Preview so you can have room to actually type within the card.) 4. For a photo credit, you may want to do something like this: <a href="https://flic.kr/p/9U7GzU"
style="color: white; font-size: 12px;">
Photo Credit: Plums, El.lE Photography
</a>
<a href="https://creativecommons.org/licenses/by-nd/2.0/"
style="color: white; font-size: 12px;">
(CC-BY-ND)
</a> Many creative common images require a link to the license for which the image uses, so I have included that in my snippet above. If you wished for slight opaque text, you could also replace color: white; with color: rgba(255,255,255,0.7); which decreases the opacity of the RGB value for white to ~70%. In your Layout Builder you should now have two text cards stacked horizontally in one row: Once you save your site and view it live, you should see the extra padding around the citation link go away and you will get something like this: Another popular alternative is to include photo credits and links in your footer, but since you asked to be able to do it in the row, that's what I have provided here. I hope you find it helpful. -Klara
... View more
10-04-2017
09:55 AM
|
2
|
2
|
1857
|
|
POST
|
#csstips Hello Liz, Since you are using the btn-primary class on your button, we're going to automatically apply your theme's link to any primary or default button classes. You can use inline CSS to change the styling of the buttons to more closely resemble our homepage if you wish by adding the btn-lg class after the btn class and using an embedded style tag or inline style tag to change the button's styling. With embedded styles you'd do it something like this: <style>
.btn-mine {
background-color: #000;
color: #fff;
}
.btn-mine:hover,
.btn-mine:focus {
background-color: #ccc;
color: #000;
}
</style>
<a href="#" class="btn btn-mine btn-lg">Learn More</a> Or you could style it inline like this: <a href="#" class="btn btn-lg" style="background-color: #000; color: #fff">Learn More</a>
... View more
07-24-2017
09:06 AM
|
2
|
1
|
2279
|
|
POST
|
Yup. I documented a method for you over there: https://community.esri.com/thread/194073-fixed-header-disables-html-edit-ability?q=edit%20custom%20header#comment-702930
... View more
07-24-2017
08:27 AM
|
0
|
0
|
693
|
|
POST
|
Hi Vanessa, Yes. There is a way to undo this without recreating the site by temporarily modifying the HTML code from Chrome's Dev Tools. 1) Open the Layout Editor while in Chrome. 2) Right click the navigation bar. 3) Select Inspect from dropdown menu. 4) In the Chrome Dev Tools panel, look for navbar-fixed-top and double-click on the name. 5) When navbar-fixed-top becomes an input, delete navbar-fixed-top and type navbar-default 6) Press enter. This will make the gear show back up in the Layout Builder preview. 7) Click the navbar gear, change your header code to remove navbar-fixed-top and add navbar-default back. 😎 Save.
... View more
07-24-2017
07:50 AM
|
4
|
3
|
1422
|
|
DOC
|
Update 08/15/2019: Since the original date of this post, we've made improvements to our image card and row card that make achieving a split look even easier and which works better on smaller devices. To achieve this effect, you'll want to select the Wide layout option on your Row Card, and then add an Image Card and a Text Card side-by-side. Under Options on the Image Card, toggle on Scale to Fit, which allows the image to proportionately resize and fill whatever space is available. This may mean that some of the image will be hidden off screen on smaller devices, but you can use the Focal Point control to indicate what part of the image you want to stay predominantly visible during the resizing. On the Text Card side, you may need to hit enter a couple times to vertically align your text, but the Text Card uses a transparent background and will rely on the background-color and text-color that you set in the Row Card. Note: You will see some padding on the cards when you're in edit mode. This is a result of needing room for our hover controls. It will not be visible in live mode and you will have the edge-to-edge effect after you save and view your site. -------- While designing Hub sites, you may find that you'd like to have images that bleed to the edges of your site. Unfortunately, in order to do this you would need to have a fluid-width container as the Bootstrap 3 grid depends on a set of nested elements: row, container, columns. Our app is based on a fixed-width container, which prevents columns and their content from taking up 100% of available screen space, and keeps your content from resizing past a certain maximum width. We've found this works best for the majority of sites. However, the rows which are outside of the container, are set to be fluid. This is what presently allows 100% width image and color backgrounds on rows. We're going to take advantage of that to achieve a split bleed look. Steps In Photoshop or other image editing software, create a canvas 1400 x 450 pixels. (Pixlr Editor is a free browser image editor that has similar functionality to the basics of Photoshop - it does require Flash to run.) Fill canvas with desired background color. Import photo to canvas and resize it to 50% of canvas width. Save canvas as JPEG. (Save to desktop if using Pixlr.) Upload image to web hosting somewhere to get URL. In Site Editor > Layout Builder, add a row card. In row settings, paste image URL in for background image. Set row text color. Drag two text cards into row, side by side. In text card overlaying image, delete contents, add an empty div and set min-height to maintain a specific row height. <div style="min-height: 350px;"></div> If your image is not decorative, you may want to add an aria-label to the div for web accessibility, since background images are not conveyed to assistive technologies like screen readers and do not support the alt text attribute. <div style="min-height: 350px;" aria-label="city sunrise"></div> In text card overlaying solid color, type text. <h1 style="display: inline-block; background-color: #2d2d2d; padding: 10px 20px;">
We are Making a Difference
</h1>
<p style="background-color: #2d2d2d; padding: 10px 20px;">
Welcome to our city.
</p>
While it is not necessary to add the style tags on these text elements, the reason I did so was because at some screen sizes, I observed the text briefly overlaying the image portion and I wanted the text to stay legible even in those cases.
... View more
06-30-2017
07:55 AM
|
4
|
0
|
4765
|
|
POST
|
Hello, Additionally, if you don't mind using a bit of CSS, you can change your category link color via embedded <style></style> tags that you can add to any text card in your homepage layout. This would allow you to specifically target the category link color, while maintaining your theme link color for all other links. The text card containing the CSS does not have to be in the same row as the category icons. You can append the CSS to any text card you might already have added to your homepage. Your CSS would look like this: <style>
.category-panel a,
.category-panel a:hover,
.category-panel a:focus {
color: #003580;
}
</style> If you want the category icon to be a different color than the link, you'd still want to set that per icon using the color picker on the Category Settings, which is what I did in the image below. I set the icon to green, and then used my CSS to change the link to blue. -Klara
... View more
06-30-2017
05:26 AM
|
2
|
2
|
4237
|
|
POST
|
Hi Patrick, We recently re-added the button element to allowed tags within our text card, so you should be able to achieve a dropdown menu using the Bootstrap classes from their documentation: http://getbootstrap.com/components/#btn-dropdowns However, I am not sure this will solve your use-case, since in order to use dropdown menus for selections, I think you'd need to know those values and we are not supporting external or inlined Javascript in 2.0. This was because we were seeing too many conflicts between custom scripts and our own Javascript, and these conflicts frequently broke functionality we had built.
... View more
05-25-2017
11:53 AM
|
0
|
0
|
977
|
|
POST
|
Hello, It should be possible. I just gave it a go, and it worked for me in Chrome, Firefox, and IE11. What browser are you using and is the YouTube video public? Here's what worked for me: 1. Open YouTube 2. Copy the URL for the video from the Embed code snippet they provide. (You only want the URL, any other tags will cause a syntax error.) 3. I pasted that URL in the our iFrame URL input: 4. I changed the height to 600, hit apply, and then saved the site for good measure.
... View more
05-23-2017
07:10 AM
|
0
|
1
|
1601
|
|
DOC
|
Erich's post refers to our 1.9 version sites. If you are trying to change the font on the banner card via embedded styling on a 2.0 site, you might observe some weird behavior on your page, because you are using a generic tag as a selector that we have most likely used elsewhere and your CSS might be overriding our layout CSS. If you are trying to target just the h1 in the banner card, you can use the .jumbotron class in front of your h1: .jumbotron h1 { margin-top: 10px; margin-bottom: 10px; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 40px; line-height: 46px; font-weight: 700; letter-spacing: 1px; } If you have multiple banner cards on your page though, just be warned this will apply to all of them. Note: This will work for web safe fonts. For 2.0 sites, it is presently not possible to add custom fonts (like Google Fonts), although we do intend to add that functionality in the future.
... View more
05-23-2017
06:53 AM
|
0
|
0
|
1916
|
|
POST
|
Hi Matt, I am unable to reproduce your issue using the code you provided above as it appears to work on my end. What browser are you using? Also, do you have a site link you could share so I could take a closer look? Or if not, could you post the HTML from your custom footer block here? Thank you, Klara
... View more
05-08-2017
07:10 AM
|
0
|
0
|
673
|
|
POST
|
Hi Levi, Yes, at the moment, we do not supported the 'navbar-fixed-top' because when it is used in conjunction with a custom header, we've run into issues between knowing the height of the custom header, which is required to set the optional footer, and if set to a height too large, the fixed header will cover the entire 'search bar | My Data' navigation we have on the internal pages of the application. The reason you lose the gear when you set that class is because fixed classes will position themselves on top of everything else. So in reality, the gear is still there, it's just that now you've told the CSS that you want that search bar to always be on top of everything and that's going to be true whether you are in the Layout Editor or the live site. -Klara
... View more
05-05-2017
05:55 AM
|
1
|
5
|
1422
|
| Title | Kudos | Posted |
|---|---|---|
| 1 | 04-22-2025 07:38 AM | |
| 1 | 01-30-2025 07:00 AM | |
| 1 | 09-20-2024 05:29 AM | |
| 1 | 08-21-2024 10:31 AM | |
| 1 | 01-12-2023 06:17 AM |
| Online Status |
Offline
|
| Date Last Visited |
2 weeks ago
|