Latest Contributions by KlaraSchmitt

‎07-24-2017

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.

‎06-30-2017

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.

‎06-30-2017

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

‎05-25-2017

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.

‎05-23-2017

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.

‎05-23-2017

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.

‎05-08-2017

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

‎05-05-2017

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

‎04-17-2017

Hi Jaclyn, I'm sorry, my GeoNet notification settings got mixed up and I'm just now seeing this. Could you describe what you were expecting or send a screenshot? I may be able to put in a request to fix our search bar within the banner component, but I don't know that it'd work for any of the search bar customization code snippets in my document as those were provided by others. Thanks, Klara

‎03-30-2017

Hi Ken, While that is very astute of you to figure out how do global styling in that manner, as you might've determined from my earlier response, it was our intention that homepage aside, styling of the internal pages would be strictly through the theme editor at the moment, and later through a set of sass variables to minimize layout-breaking feature changes. It is a bug that the HTML header block allows the embedded style tags. I would strongly recommend you not use it as it will be fixed in the future and thus will undo any custom CSS on those internal pages. Thank you.

‎03-27-2017

Thank you! I will add your solution to my tips post.

‎03-27-2017

Hi Ken, Special characters (eg. ' " < >) do get stripped out of the text card when doing embedded styling there. I've also run into a similar situation when I've tried to do background-image: url(''); within embedded style tags. In my case, I was told to do it inline via style="...". Unfortunately, pseudo-selectors cannot be applied inline and at this time, are not supported in the <style></style> section. I can follow up with my team and see why we strip out some of the aforementioned special characters. However, you said you were trying to do this in the HTML block, correct? We do have a CSS editor for the header block specifically in the sidebar under Header Settings and it does support special characters. It is neither a global CSS editor nor a page CSS editor, but if you were trying to get these styles applied in your header - it should work for that case. I tried the code you provided above and I was able to implement the :after classes within my header. The reason the header CSS is limited to that component and does not cascade is because the header can appear on multiple pages within the app, and we were having issues with some folks doing absolute positioning on a global level, which would break the layout when new features were released.

‎03-24-2017

Hi Kevin, I'm sorry you ran into that issue. I will have to add that caveat to my document you referenced. Unfortunately, because styling the search bar involves some CSS hacking that is not officially supported, we might not have a solution for that beyond using the default. We do hope to allow toggle options for increasing the size via the settings in the future. As I mentioned in my post, all those search bar examples were implemented by other customers, so I did not verify that they worked cross-browser. I checked just now and I see what you're saying about IE11. For what it's worth, it does work in Edge. Perhaps, others will have an idea how to solve for the older Internet Explorers.

‎03-09-2017

Whether you want to add a table or a schedule, you can easily do so by utilizing classes already built into Bootstrap. Our layout editor is built on Bootstrap, so we support nearly all of the components and helper classes. You can also use the WYSIWYG (What You See Is What You Get) table button in the text card to build a table. Responsive Table This is built entirely with Bootstrap table classes. The classes "table-striped," "table-hover," and "table-bordered" are optional. 1. Add a row card. Set row background color and row text color. 2. Add a text card to that row. 3. Switch to the code view of the text card. 4. Paste in the following snippet, toggle out of code view, and save the page. <h3>Community Projects</h3> <div class="table-responsive"> <table class="table table-striped table-hover table-bordered"> <thead> <tr> <th>Name</th> <th>Category</th> <th>Author</th> </tr> </thead> <tbody> <tr> <td><a href="#" target="_blank">Best Bike Commute Paths</a></td> <td>Transportation</td> <td>Mike Greeves</td> </tr> <tr> <td><a href="#" target="_blank">Tracking the Emerald Ash Borer</a></td> <td>Environment</td> <td>Asnee Li</td> </tr> <tr> <td><a href="#" target="_blank">Lyme Disease Prevention</a></td> <td>Health</td> <td>Julia Tenlee</td> </tr> </tbody> </table> </div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ More Complex Responsive Table This next table was inspired by this Bootsnipp agenda. However, as this one uses <style></style> tags, I'll include my usual warning: Any embedded styles can affect your entire homepage if you do not target specific selectors correctly. Never use an ember-# ID selector as these are dynamic and will change with each page refresh. 1. Add a row card. Set row background color and row text color. 2. Add a text card to that row. 3. Switch to the code view of the text card. 4. Paste in the following snippet, toggle out of code view, and save the page. <style> .schedule-date .day { max-width: 40px; font-size: 36px; line-height: 36px; float: left; text-align: right; margin-right: 10px; } .schedule-date .text-muted { font-size: 12px; margin-top: 0px; } </style> <div class="table-responsive"> <table class="table table-condensed table-bordered"> <thead> <tr> <th>Date</th> <th>Time</th> <th>Event</th> </tr> </thead> <tbody> <tr> <td class="schedule-date" rowspan="1"> <div class="day">26</div> <div class="text-muted">Monday <br /> July, 2017</div> </td> <td> 6:30PM </td> <td> Council Meeting </td> </tr> <tr> <td class="schedule-date" rowspan="3"> <div class="day">12</div> <div class="text-muted">Thursday <br /> Aug, 2017</div> </td> <td> 10:00AM - 5:00PM </td> <td> Development Training </td> </tr> <tr> <td> 6:30PM - 8:00PM </td> <td> Civil Hackathon </td> </tr> </tbody> </table> </div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

‎03-03-2017

Update 08/15/2019: If you have a site that is still using cards like the one pictured on the right (a card showing image and description with an overlay button that appears on hover), we strongly recommend using one of the card patterns found on this page: http://esri.github.io/calcite-bootstrap/patterns.html. The hover style of cards that we used to include on older site templates was not found to be mobile-friendly or accessible to keyboard users. New site and page templates all now use Calcite Bootstrap cards. Alternatively, if you are using cards to highlight content (apps, data, web maps to name a few) from inside your organization, we've put a lot of effort into making our Gallery Card easier to use. If you use the dynamic option, we'll automatically add anything that meets the filter criteria to your Gallery, or if you prefer to control the order, you can use our manual option to pick featured content. Under the Style options, you can then set border radius, drop shadow, image or icon, and button text/color. All examples featured in this post can still be used as they rely on custom CSS and not the outdated code. -------------- Here are some other types of HTML cards you can build using the text card and embedded or inline CSS. Before we begin, there are a few important things to note: Some of these patterns use embedded <style></style> tags in a text card. Any embedded styles can affect your entire homepage if you do not target specific selectors correctly. Never use an ember-# ID selector as these are dynamic and will change with each page refresh. Clickable Image Card 1. Add a row card. Set the row background color. 2. Add a text card, switch to code view. (We will be using Bootstrap's grid to create columns rather than using multiple text cards.) 3. In the text card, paste the following snippet, then toggle out of code view: <style> .featured-gallery .caption { width:100%; bottom: 0px; position: absolute; background-color: rgba(52,82,80,0.7); } .featured-gallery .thumbnail { border: 0 none; box-shadow: none; margin:0 0 30px 0; padding:0; } .featured-gallery .caption strong { color: #fff; -webkit-font-smoothing: antialiased; } </style> <div class="col-xs-12 col-sm-6 featured-gallery"> <div class="col-sm-12 thumbnail text-center"> <img alt="regional park A" class="img-responsive" src="https://cloud.githubusercontent.com/assets/7389593/23568903/d8df22e4-002a-11e7-9645-da4471a5991d.jpeg"> <div class="caption"> <strong>Check out our hiking trails</strong> </div> </div> </div> <div class="col-xs-12 col-sm-6 featured-gallery"> <div class="col-sm-12 thumbnail text-center"> <img alt="regional park B" class="img-responsive" src="https://cloud.githubusercontent.com/assets/7389593/23568903/d8df22e4-002a-11e7-9645-da4471a5991d.jpeg"> <div class="caption"> <strong>Check out our hiking trails</strong> </div> </div> </div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ (If you keep the current grid structure from this snippet, your replacement images need to be at least 540px wide.) Heading + Highlight Card 1. Add a row card. Set row background color and row text color. 2. Add two text cards to that same row. 3. In the text card to be the heading, paste the following snippet: <h2 style="padding-bottom: 15px; border-bottom: 4px solid #fff; display: inline-block; margin-top: 30px;"> What Can I Do With It? </h2>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ 4. In the text card to be the showcase, paste the following snippet: <div style="margin-top: 30px; margin-bottom: 30px;"> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="thumbnail"> <img src="https://d1yzezhhfj4ndu.cloudfront.net/default-project-thumbnail-250c773441bf9b5b2b363f3f403d4fa4.png" alt="Card Thumbnail" style="padding: 0px; margin-top: 5px;"> <div class="caption"> <h4>Card Title</h4> <p style="font-size: 14px">Write a short description. Avoid policy terms or jargon.</p> <a href="#" class="btn btn-primary center-block" role="button">Open App</a> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="thumbnail"> <img src="https://d1yzezhhfj4ndu.cloudfront.net/default-project-thumbnail-250c773441bf9b5b2b363f3f403d4fa4.png" alt="Card Thumbnail" style="padding: 0px; margin-top: 5px;"> <div class="caption"> <h4>Card Title</h4> <p style="font-size: 14px">Write a short description. Avoid policy terms or jargon.</p> <a href="#" class="btn btn-primary center-block" role="button">Open App</a> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="thumbnail"> <img src="https://d1yzezhhfj4ndu.cloudfront.net/default-project-thumbnail-250c773441bf9b5b2b363f3f403d4fa4.png" alt="Card Thumbnail" style="padding: 0px; margin-top: 5px;"> <div class="caption"> <h4>Card Title</h4> <p style="font-size: 14px">Write a short description. Avoid policy terms or jargon.</p> <a href="#" class="btn btn-primary center-block" role="button">Open App</a> </div> </div> </div> </div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ 5. Narrow the heading card by two columns in order to achieve the layout shown in the example above. (If you keep the current grid structure from this snippet, your replacement images ought to be 200x133px.) KPI Card Style #1 (Non-Dynamic) 1. Add a row card. Set the row background color. 2. Add a text card to that row, open code view. (We will be using Bootstrap's grid to create columns rather than using multiple text cards.) 3. In the text card, paste the following snippet, then toggle out of code view: <style> h2.headings {margin-bottom: 20px;} .stat-card h3{font-size: 16px; margin-top: 5px; line-height: 20px; padding-right: 45px; color: #333; text-align; left;} .stat-card {position: relative; display: inline-block; background-color: #fff; width: 320px; min-height: 170px; text-align: left; padding: 15px; border-width: 1px;border-style: solid; border-color: rgb(204, 204, 204); border-image: initial; overflow: hidden;} .stat-icon {position: absolute;top: 0px;right: 0px;width: 60px;height: 60px;line-height: 60px;text-align: center;} .stat-icon.right {right: 0px;} .stat-icon span {position: absolute;z-index: 8;top: -40px; left: 5px; width: 100px;height: 100px; line-height: 120px;border-radius: 50%;} .stat-icon i {padding-left: 15px; color: rgb(255, 255, 255); z-index: 9; font-size: 24px;} .bg-target {background-color: #E07000;} .txt-target {color: #E07000;} .bg-ontrack {background-color: #007613;} .txt-ontrack {color: #007613;} .bg-failing {background-color: #D43E3A;} .txt-failing {color: #D43E3A;} .bg-measure {background-color: #186EA5;} .txt-measure {color: #186EA5;} .stat-card h4.stat-num {font-size: 45px; text-align: left;} .stat-card .subtext {font-size: 15px;} .stat-card .source {font-size: 12px; margin-top: 15px;} .stat-card .open-btn {margin-top: 15px;} </style> <h2 class="headings text-center">Community Planning & Economic Development</h2> <ul class="cards-list"> <li class="col-xs-12 col-sm-6 col-md-4"> <div class="stat-card"> <div class="stat-icon right"><span class="bg-ontrack"></span><i class="glyphicon glyphicon-home"></i></div> <h3>Public Housing Occupancy Rate</h3> <h4 class="stat-num"><span class="txt-ontrack">88.8</span></h4> <div class="subtext"><i class="glyphicon glyphicon-triangle-top txt-ontrack"></i> percent occupied of <strong>goal: 100%</strong></div> <div class="source">Source: <a href="#">Graydale Housing Authority</a></div> </div> </li> <li class="col-xs-12 col-sm-6 col-md-4"> <div class="stat-card"> <div class="stat-icon right"><span class="bg-measure"></span><i class="glyphicon glyphicon-home"></i></div> <h3>Residents Assisted by Federal Programs</h3> <h4 class="stat-num"><span class="txt-measure">1,011</span></h4> <div class="subtext"><i class="glyphicon glyphicon glyphicon-stats txt-measure"></i> residents assisted</div> <div class="source">Source: <a href="#">Graydale Housing Authority</a></div> </div> </li> <li class="col-xs-12 col-sm-6 col-md-4"> <div class="stat-card"> <div class="stat-icon right"><span class="bg-failing"></span><i class="glyphicon glyphicon-file"></i></div> <h3>Rental Inspections Completed<br /> </h3> <h4 class="stat-num"><span class="txt-failing">29</span></h4> <div class="subtext"><i class="glyphicon glyphicon-triangle-bottom txt-failing"></i> last month of <strong>goal: 40</strong></div> <div class="source">Source: <a href="#">Graydale Housing Authority</a></div> </div> </li> </ul>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Online Status	Offline
Date Last Visited	Monday

My Ideas

Latest Contributions by KlaraSchmitt

Re: Fixed Header Disables HTML Edit Ability

Tips: Creating Illusion of Split Row Background

Re: Is it possible to change the link text color of a category outside of changing the theme link color?

Re: Is there a way to create a drop down menu in Open Data 2.0?

Re: Is it possible to link to youtube videos in the iframe in the new Open Data Portal?

Re: #ProTip: Using Custom Fonts on your Open Data Site

Re: Custom Footer CSS

Re: Fixed Header Disables HTML Edit Ability

Re: How can you customize Search Bar for mobile?

Re: How to avoid text changes in Open Data Deep customization

Re: Long Search Bar doesn't work with IE

Re: How to avoid text changes in Open Data Deep customization

Re: Long Search Bar doesn't work with IE

Tips: Adding a table

Tips: Create Custom Cards with HTML

New accessibility documentation

Re: Dashboard selector color tied to element focus...

Automated accessibility scanning and the Shadow DO...

Re: WCAG AA accessible polygon colors

Re: Menu Button Text Disappeared