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

Unable to decrease the width of a div element in Vuetify and Nuxt

As I work on creating a dynamic form with fields that need to occupy only 50% of the size of a regular field, I encounter different components based on data provided by Vuex. The use of v-for in Vue.js helps me loop through form objects and render the app ...

javascripthtmlcssvue.jsvuetify.js

What is the method for triggering two actions within a single linked tag?

I have a link tag structured like this: <a href="<?php echo base_url().'dashboard' ?>" class="check_session">Home</a> Upon clicking the "Home" link, it should navigate to the dashboard. At the dashboard page, I want to check i ...

javascriptjqueryhtmlcsscodeigniter

The Bootstrap tab feature is malfunctioning when a tab is using data-target instead of href

While developing bootstrap tabs for an Angular app, I decided to use the data-target attribute instead of the href attribute to avoid any interference with routes. Here's a snippet of how I structured the tabs: <ul class="nav nav-tabs" id="myTab"& ...

javascripthtmlcsstwitter-bootstrapangularjs

Achieving consistent height for Grid items in Material-UI

I'm looking to achieve equal heights for these grid items without distorting them. Here's the current layout: This is how I would like it to look: My challenge is that adjusting the image width manually makes it non-responsive. Since users may ...

cssreactjsresponsive-designmaterial-ui

In Javascript, the color can be changed by clicking on an object, and the color

Looking for help with my current HTML code: <li><a href="index.php" id="1" onclick="document.getElementById('1').style.background = '#8B4513';">Weblog</a></li> The color changes while clicking, but when the lin ...

javascriptcsscolorsbackground-color

Alignment problem with email signatures on MAC devices

Recently, I designed a straightforward email signature and successfully copied and pasted it into the appropriate section. However, while it works perfectly in Outlook, there is an issue with MAC Mail (Version 7.3) where the image extends beyond the table. ...

htmlcssmacosemailsignature

Utilize flex to position content at the bottom

My layout features a fixed header and footer, positioned at the top and bottom respectively. The content section in between fills the remaining space, with a scrollbar available if the content extends beyond the area. <div id="app"> <d ...

cssflexbox

Display or conceal a div depending on whether the user is on a mobile or desktop browser

In order to optimize the display on different devices, I organized my content into two divisions. The left division contains quantity, price, and item name, while the right division includes product names. For mobile browsers, I would like to hide the pro ...

jqueryhtmlcssmobile

Tips for positioning a div to the left once the minimum width has been reached?

<div id="container"> <div id="subsSection"> <div class="leftSection">ss</div> <div class="rightSection">ss</div> </div> </div> (1) My goal is to have the subsection div centered on the ...

htmlcss

Having trouble getting rid of the border-bottom?

I have been attempting to customize the appearance of the React Material UI tabs in order to achieve a design similar to this: https://i.stack.imgur.com/tBS1K.png My efforts involved setting box-shadow for the selected tab and removing the bottom border. ...

javascripthtmlcssreactjsmaterial-ui

Optimizing Bootstrap popover responsiveness for elements with excessive length to ensure a smooth display experience

I am currently working on creating a popover that remains in position when hovered over, specifically for elements that are too large to fit on the screen. However, I am facing some issues with my current implementation: <template> <div class ...

jqueryhtmlcsstwitter-bootstrap

How can you use CSS animations to animate two images in a way that hides one while showing the other?

click here for the image link visit this webpage for the link I need I am looking to add an animated section to my website. The inspiration comes from the webpage linked above, where images slide down one after another in a seamless manner. I attempted t ...

javascripthtmlcss

Is there a way to apply border-radius to the header of a table in Bootstrap 5?

My use of Bootstrap 5 for styling a table has encountered an issue. Even with the border-radius set on the table-dark class, the thead element's border does not change. I am looking for a way to address this problem. Any suggestions? .table-dark { ...

htmlcss

The issue with Bootstrap Vue scrollspy arises when trying to apply it to dynamic data. Upon closer inspection, it becomes evident that the elements are activating and highlighting one by

In my application built with Vue, content is displayed based on the component type (Header, Text, Image) in a JSON file. I am looking to implement scroll spy functionality specifically for the Header component containing headings. I have attempted to use ...

cssvue.jsvue-componentbootstrap-vuescrollspy

Can a universal selector be used to target a specific nth element and all subsequent occurrences of that element type?

As I navigate through using a data scraper, I find myself in the realm of code where my knowledge is limited. The tool I am using is free but comes with its limitations such as a crawl limit and no option to resume from the endpoint. My goal is to scrape ...

cssweb-scrapingxpathselectorparsehub

Is it possible in HTML to create an "intelligent" overflow effect where text is truncated and replaced with an ellipsis "..." followed by a link to view the full content?

I have a <div> that has a limited size, and I am looking for a way to display multiline text in it. If the text exceeds the available space, I would like to add "..." at the end along with a link to view the full content on another page. Is there a ...

javascripthtmlcss

"Exploring the concept of odd and even numbers within the ng-repeat

Can anyone help me with detecting odd or even numbers in an ng-repeat? I have created a fiddle that displays some dots randomly showing and hiding. Now, I want to change the background color so that odd numbers are green and even numbers are red. function ...

cssangularjs

Disabled text selection in Internet Explorer

I am in need of making one HTML element (Label) unselectable for IE. I have tried using the following methods: Unselectable=on onselectreturn=false; Unfortunately, none of these solutions are working for me. For Firefox and Chrome, I've successful ...

htmlcssselect

Empower the parent container to wrap around its child elements using Flexbox

I am trying to make the flexbox parent item adjust its width based on the children, but currently it is stretching out to full width and leaving empty space on the right side. Here is the CSS code I have tried: .flexParent { display:flex; background:# ...

htmlcssflexbox

What is the process of initializing divs in DataTables?

My application has a DataTable installed, but I encountered an error message stating "DataTables warning: Non-table node initialisation (DIV). For more details about this error, please visit http://datatables.net/tn/2". I'm aware that DataTables is d ...

javascriptjqueryhtmlcssdatatables