Latest Contributions by KlaraSchmitt

I'm afraid I may not have very good advice as I'm a little vague about the end-goal, but if your wish is to have the burger menu appear on the left, you'll want to create a unique class on the navigation root element and that'll help you float the menu to the left. If your goal is to have a single button outside the menu and always on the right, I would use the .pull-right class rather than .navbar-right as there's some extra styling attached to .navbar-right because we need it a little different. You'll want to move your "FR" button to the top of the nav container, so that it has some static content to float around and into the correct position, and to avoid having it part of the collapsable menu. Per your logo, if you use a custom-class you can remove the padding that gets generated by the navbar-brand class. I, unfortunately, was not able to remedy the burger menu being flush left with the edge of the screen since it has something to do with the negative margins in navbar-header, but I couldn't find the appropriate set of selectors that would cause an override. You may need to experiment a bit more. Finally, I added a clearfix class in an empty div at the bottom to make sure none of these floats caused any other mischief.  CSS .left-menu .navbar-toggle {float: left; background-color: #101012;} .left-menu .navbar-brand {height: 70px; padding: 5px 0px;}‍‍ HTML <nav class="left-menu navbar navbar-default">     <ul class="nav nav-navbar pull-right">       <li>         <a href="#" class="btn btn-primary" style="margin-top: 5px; margin-right: 5px;">FR</a>       </li>     </ul>   <div class="container-fluid">     <!-- Brand and toggle get grouped for better mobile display -->     <div class="navbar-header">       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">         <span class="sr-only">Toggle navigation</span>         <span class="icon-bar"></span>         <span class="icon-bar"></span>         <span class="icon-bar"></span>       </button>      <a href="http://opendata.arcgis.com/" class="navbar-brand">        <img src="https://maps.ottawa.ca/od_images/Ottawa.png" alt="City of Ottawa Logo">      </a>     </div><!-- /.navbar-header -->     <!-- Collect the nav links, forms, and other content for toggling -->     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">        <ul class="nav navbar-nav">         <li><a href="#">Home</a></li>         <li><a href="#">Apps</a></li>         <li><a href="#">Data</a></li>      <li><a href="#">Stories</a></li>      <li><a href="#">Feedback</a></li>       </ul>     </div><!-- /.navbar-collapse -->   </div><!-- /.container-fluid --> <div class="clearfix"></div> </nav> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ ... View more

Hi Tom, Presently, we do not support fixed background images. All row background images use the responsive CSS property of `background-size: cover` and the default scroll state for the `background-attachment` property. We do have an issue slated to add a control that would allow you to set `background-position` which allows you to center the focal point around which your image will responsively resize and we may be able work `background-attachment` in during that time. But unfortunately, there isn't a very clean way to do the CSS to override it as-of-today since none of the rows have unique classes on them and you should not use the dynamic ember IDs as those change. ... View more

Hi Julie, This is a very weird situation. From a technical standpoint, nothing inside the iframes should be scrollable because the iframe parameter that sets scrolling is currently set to not allowed in all browsers. I have observed that any content I iframe in that is not a survey, does not scroll. Now we get to the really odd part. Certain surveys seem to support inline scrolling. The survey that I was able to scroll when I tested it out earlier is a 5.2.3 version survey that I created this past November; however, when I created a brand new survey today, I have the exact same issue as you in that the survey does respect the iframe parameter. I'm guessing that your colleague may have created their survey a little while ago too and that's why they were able to scroll. So unfortunately, this leaves us at my first response. It is currently unsupported and your colleague got a lucky window in survey versioning where this somehow got supported and overrode browser defaults (a happy bug.) But we do have an issue on our backlog to allow this parameter to be customizable so that - for example in your case - you could set it to allowed. ... View more

Hi Julie, So I took a look at the site you provided and tested out my own survey, which I added into a site through an iframe and I was actually surprised to discover that all the browsers we support (Firefox, Chrome, Safari, IE11, & Edge) were ignoring the parameter that sets the iframe not to scroll and scrolled the survey content regardless. I believe the survey team may have implemented something on their side, since our card is still blocking the parameter. Have you tried your site recently to see if the survey would scroll? ... View more

Hi Julie, Do you have a public view of the page that your colleague has that on? What browser were they using? It may very well be that certain browsers ignore the parameter and do their own thing, but I would be curious to dig in and see if it was a CSS solution. ... View more

Hi Julie, Presently, there is no way to set scrolling on iframes and you do have to adjust the height manually. Setting the scroll parameter on iframes is deprecated functionality according to web standards. However, modern browsers haven't lived up to the CSS options, so we're hoping to get the functionality added in the next couple months, as like you, others have also made this request. Thanks ... View more

You are correct. We do not support @import for files on your local machine, and at this time, you can only set two default fonts (body text, heading text) and not the iconfont. If the municipality had a license for Arial or Helvetica, it's possible they have a webfont URL, but it's also possible that they are banking on everyone having either Helvetica or Arial on their computers. You could use Roboto though since it's in Google Fonts, since it is part of their fontstack, they may be fine with the site using it by default. ... View more

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

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

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

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

#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

#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

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