- Important Note -This functionality requires a subscription to Localist's Developer Theming package.If you do not see the option to Edit HTML or Custom CSS containers, please reach out to support@concept3d.com or your dedicated Client Success Manager to learn more! |
While working with HTML and CSS is incredibly powerful, you might occasionally encounter challenges or roadblocks. In this guide, we address several common situations that you may come across on our platform and provide solutions to streamline your experience.
Part 1: Removing Unnecessary Background Images
There might be times when you want to remove certain images that were automatically added to your event page. Here's how you can achieve this:
1.1 Confetti Image Removal from Header
To remove the confetti from the header, paste this code into the CSS box:
.em-header_page.channel-cover-photo {
background-image: none;
}
1.2 Plan an Event Confetti Image Removal
To remove the “white and black” Plan an Event confetti, paste this code into the CSS box:
.em-event_banner-overlay {
background-image: none;
}
.em-event_banner .em-event_banner-overlay {
background-image: none;
}
1.3 Removing the Dotted Image in Footer
To remove the dotted background image in the footer, copy and paste this code into the CSS box:
.em-footer_container { background image: none; }
.em-footer .em-footer_container { background-image: none; }
Part 2: Changing the Event Cards Font Size and Color
You can modify the font size and color on your event cards with the following CSS:
/* Changing Color and Hover Color Of Place Name on Event Card */
.em-text_icon a { color: #000; }
.em-text_icon a:hover { color: #000; }
/* Event Card Titles*/
.em-header-type .em-header-card .em-header-card_text .em-header-card_title {
color: #HEXCODE;
font-weight: 600;
}Part 3: Scenarios and Solutions
During your website design process, you may encounter some scenarios. We've included solutions for each to help you overcome these roadblocks.
3.1 Scenario: Event Cards Get Aligned in the Middle
- Solution: Change the font size and adjust the grid template columns in the CSS box as detailed below. Remember to save changes and refresh your webpage.
html {font-size: 100%; }
.em-card-group {grid-template-columns: repeat(auto-fill, minmax(290px, 290px))}
3.2 Scenario: Header does not copy over
- Solution: Ensure all javascript is copied over, and make sure any URLs in the HTML are complete.
Complete/Full URL: https://www.example.com/help/article/how-to-reset-password
Relative URL: /help/article/how-to-reset-password
3.3 Scenario: The Widget Builder looks messy and boxes are not correctly placed
- Solution: Make sure the label width is 100%. Paste
label {width: 100%; }into the CSS box and refresh your website.
3.4 Scenario: “Upcoming and Trending" is on the left or right side of the page
- Solution: Ensure each selector says
float: none. Here is an example of what the selectors should look like:
@media (min-width: 48em)
.tabs_component .tabs_container .tabs {
justify-content: center;
float: none ;
}
.tabs:before, .tabs:after {
content: " ";
display: table;
float: none ;
}
.tabs {
float: none ;
font-size: 13px;
}
3.5 Scenario: Text in the Submit an Event form is off-centered
- Solution: Inspect the boxes and ensure the height is 54px. Then, paste the following CSS rules:
.em-input-floating {height: 54px; }
.em-input-floating--placeholder input.em-input-floating--input,
.em-input-floating--placeholder textarea.em-input-floating--input {height: 54px;