Eliminate the dimming background on a discussion thread in Discourse

Working on customizing a theme for my blog using the Discourse engine has been quite interesting. I have noticed that every post, or "topic," loads with a blue background that quickly transitions to the main background color. You can take a look at an example here.

I was informed that this issue is caused by this CSS. In an attempt to fix it, I added the following code to my custom CSS field:

.topic-body .cooked.highlighted {
    animation: none;
}

However, it seems like my solution did not work. Can anyone point out what mistakes I may have made?

csssassdiscourse

Answer №1

  1. Start by logging in as the administrator and navigating to the settings page
  2. Next, select customize and then choose your desired theme
  3. Locate the option labeled Edit CSS/HTML and click on it
  4. Within the CSS section, insert the following code snippet
.highlighted{
     animation:none!important;
}

Answer №2

Consider removing this section

 &.highlighted {
    animation: fade-in-background 2.5s ease-out;
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Link the Sass variable to Vue props

When working on creating reusable components in Vue.js, I often utilize Sass variables for maintaining consistency in colors, sizes, and other styles. However, I recently encountered an issue with passing Sass variables using props in Vue.js. If I directly ...

javascriptcssvue.jssass

Sidenav Content with all elements having opacity applied

How can I ensure that all page elements have a black background color when the mobile navigation is opened on the left screen, while ensuring that my sidebar and content image do not get overlaid by the black background? Here is my code: function openNav( ...

javascripthtmlcsswordpress

Transitioning between sections by clicking on a navigation menu item

I'm looking to create a cool animation effect on my website. When a user clicks on a specific menu link, such as "about-section," I want the page to smoothly scroll down to that section in a parallax style. If anyone knows of a jQuery plugin that cou ...

jqueryhtmlcssjquery-pluginsparallax

What is the best way to toggle the visibility of a div using a button? And how can you incorporate a visual effect on the button when

I'm trying to implement a button that can hide and show a div, but for some reason, it only shows the div and doesn't hide it when clicked. Check out my fiddle: http://jsfiddle.net/4vaxE/24/ This is my code: <div class="buttons" style="bac ...

jqueryhtmlcssshow-hideeffect

Implementing CSS styles with the className attribute in a Material UI component within a ReactJS application sourced from a dynamic JSON object

I have a dynamic JSON object that includes a button element. I am using createElement and Material UI to display the data from this object. I wanted to add custom CSS styling to the button component using className, but I've been struggling to achiev ...

javascriptcssreactjsmaterial-uijsx

Which event listener in the DOM API should I use to trigger an action when a form field is focused, whether through a mouse click or by tabbing?

My aim is to increase the size of form fields when the cursor focuses on them, either through a mouse click or by tabbing using the keyboard. By utilizing document.activeElement focus, I can identify when the user clicks inside a text input or selects an ...

javascripthtmljquerycss

Tips for eliminating the border on a Twitter widget

Looking to integrate a Twitter widget into my website. The site is built using Smarty and I want to customize the widget. Currently, there is a scroll bar on the right section that I would like to remove by adding a style overflow:hidden to the class strea ...

csstwitterwidgetsmartycustomization

The div is not positioned on the left side

I'm struggling with aligning three divs next to each other in HTML and CSS. I've set them to float: left, but they are not obeying this style rule. .threethings { width: 20%; } .threethings div { text-align: center; position: relative; ...

htmlcssweb

The border bottom effect in Hover.css is malfunctioning when used in the Opera browser

I've implemented a hover effect using hover.css that works perfectly in all browsers except Opera. Surprisingly, the effect only seems to work in Opera when I remove the following properties: -webkit-transform: perspective(1px) translateZ(0); transf ...

csssasshoverborder

Issue with Datepicker functionality within the <th> element is causing it to malfunction

Currently, I am attempting to utilize the Bootstrap datepicker, but I am facing an issue when trying to implement it within a table, specifically inside a th element. Below is the structure of my table: <table id="table" class="table table-bord ...

htmlcsstwitter-bootstrap

Guide to Embedding an Image in a List in HTML

How do I resize an image according to the size specified in CSS, and ensure that it fits within a list of items where each item consists of both an image and a name? Currently, my code only displays the image in its original size. for(var i =0; i< o ...

javascripthtmlcss

Ways to transfer Material-UI FlatButton CSS to a different Button element

I've recently incorporated a loading button object into my website from (https://github.com/mathieudutour/react-progress-button), and now I want to customize it using the Material-UI FlatButton CSS. However, I'm not quite sure how to achieve this ...

javascriptcssreactjsmaterial-ui

What is the best way to adjust the width of a textarea based on its content

How can I dynamically set the width of a React Semantic UI textarea based on its content? Setting min-width doesn't seem to be working. Any suggestions? <Textarea key={idx} defaultValue={formattedText} className="customInpu ...

javascriptcssreactjstextareasemantic-ui

Is it possible to achieve the lower link set in a pure CSS horizontal menu where the horizontal link set is positioned below horizontal text tabs?

I am attempting to design a pure CSS on-hover horizontal menu. I have made some progress on my design, as shown in http://jsfiddle.net/dq8z192L/11/ The goal is to have a menu that expands horizontally when hovered over. Each tab reveals a set of links be ...

cssmenumenuitem

Please refrain from altering the color of my flag on hover

I am working with a table that has rows marked with flags. Below is the CSS I have used: <table class="hovered no-border" data-url="@Url.Action("General", "Transport")"> <tbody> <tr> <td><input type="che ...

htmlcss

Other elements are unable to conceal Material UI InputBase

Displayed below is a navigation bar that sticks to the top, followed by rows of InputBase components from material-ui. Despite setting the background color of the nav bar to white, the input always appears above the nav. This strange behavior stopped when ...

javascripthtmlcssreactjsmaterial-ui

Eliminate spaces between divs without any margins or padding

In my HTML code, I have two divs with different classes - mini-date-holder and mini-event-holder. Even though both of these divs are set to have no margin or padding, they are still displaying with a gap between them. I'm struggling to understand why ...

htmlcss

Having trouble loading background color or image in three.js

I've been struggling to load a background image or color on my webpage. Despite trying various methods, including commenting out javascript files and checking the stylesheet link, nothing seems to work. Even when I load the three.js scene with javascr ...

javascriptcssthree.js

What is the best method to eliminate whitespace in mobile view when utilizing the <Image /> tag in Next.js?

I am currently developing a website using Next.js. I have used the <Image /> tag to display images on the site. On mobile view, I noticed some white space around the image components, while on desktop everything looks fine. Upon checking the network ...

cssimagesvgnext.jsnext-images

What is the best way to loop through an array and apply classes to each element separately?

I'm currently working on a unique jQuery plugin that is designed to create dynamic lists based on any data provided. The first 6 items in the list will always remain constant, regardless of the input data. When I say constant, I mean that although th ...

jquerycss