Stylish CSS popup backdrop

I have very limited CSS knowledge and struggle with the syntax, but I am trying to customize my Wikipedia experience using Chrome and the Stylish addon. I found some code online and modified it to create a dark theme, but now I'm stuck because I need to add additional elements like an opaque box with a #555 color without ruining the rest of the design. This is the issue I am facing:

Could someone provide guidance on how to achieve this while maintaining the overall look? Here is the code I am currently working with: pastebin.com

htmlcssstylish

Answer №1

UPDATE: Keep in mind that altering the opacity property will impact the transparency of all elements within the applied element. In certain cases, utilizing rgba may be more suitable.

There are a couple of ways to achieve this effect:

#mybox
{
    background-color:#555;
    opacity:0.5;
}

Alternatively,

#mybox
{
    background-color:rgba(85, 85, 85, 0.5);
}

The opacity property adjusts the visibility of an element (0.0 represents 0%, while 1.0 signifies 100%).

A similar outcome can be achieved using rgba (red, green, blue, alpha). The alpha value functions similarly to opacity.

In response to Dwza's suggestion in the comments, it would benefit you to explore some CSS tutorials. A simple Google search will yield numerous resources. For instance, this tutorial seems promising:

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

The conundrum with JQuery: My script refuses to run when a variable is defined

<script> $(document).foundation( let total = 1 $("button.test").click(function(){ if ($("p.change-me").text() === "OFF") { $("p.change-me").text("ON") total = total + 1 } ...

javascriptjqueryhtmlfrontend

I am facing issues with my submit buttons as they are not functioning

Once I hit the submit buttons, there seems to be an issue with redirecting to another page. Could anyone assist in identifying the error within this code and why my buttons "typ1" and "cod" are not redirecting to the specified location? <?php inc ...

javascriptphphtml

Tips for Customizing the Width of Your Material UI Alert Bar

At the moment, I have refrained from using any additional styling or .css files on my webpage. The width of the Alert element currently spans across the entire page. Despite my attempts to specify the width in the code snippet below, no noticeable change ...

javascriptcssreactjstypescriptmaterial-ui

What is the best method for creating a vertical line separator with a hover effect in CSS?

Facing an issue with creating a vertical line separator in the navigation menu. While trying to add a vertical line separator to my navigation, I noticed that it does not get covered by the hover effect when hovering over the menu items. Please refer to t ...

csslineseparator

What can be done to ensure that the a href tag is functioning as clickable?

Having an issue with my HTML and CSS code for a notification dropdown box. I am unable to click the tag, even after attempting to use JavaScript. Can't seem to figure out what's causing this problem. Any advice on how to make the tag clickable? ...

javascriptphpjqueryhtmlcss

Unable to conceal a DIV using React

I'm attempting to hide a div programmatically upon clicking a button. I've written the following code, but it doesn't seem to be working (the Div remains visible): import React, {useState} from 'react'; import './Button.css&ap ...

cssreactjs

The appearance of HTML in JSP and CSS output in a Spring application is different from the local environment

For my web application's landing page, I created the design using HTML and CSS. Typically, I first design it on scratchpad.io before implementing it into my STS IDE. However, when I run the application, the output of the page appears different from th ...

htmlcssjspformatting

Is getElementById() returning null?

I'm currently working on a JavaScript program that takes an image URL and displays it on the page by creating an <img> tag. This way, I can easily add multiple images to the page. Here is my code: <!DOCTYPE html> <html lang="en&quo ...

javascripthtmlimagesrccreateelement

How to Ensure Center Column Maintains Visibility on Mobile Devices with Bootstrap 4

Is there a way to ensure that page content stays centered without looking too narrow when viewed on mobile devices? Specifically, in the context of a single column layout that is centered. Although the current design appears well-balanced and spaced out o ...

htmltwitter-bootstrapbootstrap-4

"Exploring the Power of Perl in Harnessing Html5 Server-S

I have been working on implementing server sent events to replace ajax long polling within my application. However, I have encountered an issue with my perl script where the sleep function is causing the sending stream to be blocked. #!/opt/lampp/bin/perl ...

htmlperlsleepserver-sent-events

Ways to secure a floating item onto a backdrop picture

Currently I am working on editing this page. When you hover over the cat, its eyes blink or two black dots randomly appear. My goal is to prevent the random blinking dots from appearing. I want to keep the hover object attached to the cat/background image ...

csshoverpositionbackground-imagemousehover

Troubleshooting issue with Onchange in select HTML element within Django

I'm working with a Problems model in my project. In my Models file models.py class Problems(models.Model): Easy = 'Easy' Medium = 'Medium' Hard = 'Hard' NA = 'NA' DIFFICULTY = [ (NA ...

javascripthtmldjangoselectdjango-filter

Is there a way to set the content to be hidden by default in Jquery?

Can anyone advise on how to modify the provided code snippet, sourced from (http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show), so that the element remains hidden by default? <!DOCTYPE html> <html> <head> <scrip ...

javascriptjqueryhtmlcssajax

The Google map is not showing up on the screen despite having entered the API Key

Trying to showcase a Google map on my website. Check out the code below:- <script> function initializeMap() { var coords = {lat: -25.363, lng: 131.044}; var mapObj = new google.maps.Map(document.getElementById('mapz') ...

javascripthtmlgoogle-maps

Replacing inline CSS with styled components in Next.js Sass modules

In order to display emoji icons in my Next.js App, I utilize the Twemoji library. These emojis are rendered as <span><img></span> elements in the final HTML output. To customize their default width and height, I use the !important rule in ...

htmlcssnext.jscss-modules

Which option offers superior performance: using attributes through HTML or jQuery?

At times, I find myself needing to include special classes, divs, and attributes in my HTML code for jQuery scripts to function properly (the site's "no-JavaScript" version doesn't require these elements). You probably understand what I mean. I& ...

javascriptjqueryhtmlperformance

Excessive HTML and CSS overflow stretching beyond the boundaries of the page on the right

It seems like the issue lies with div.ü and div.yayın, as they are causing overflow on the right side of the page. When these elements are removed, the overflow issue goes away. Are there different positioning codes that can be used to prevent this? d ...

htmlcss

Using Javascript to Change Background Color on Button Click

The button press does not result in a change of the background color. What could be causing this issue? var body = document.getElementsByTagName("body"); var bgbutton = doucument.getElementById("bgchange"); bgbutton.onclick = function() { body.style.b ...

javascripthtmlcss

What is the best way to display long text in a browser alert without it being cut off?

Seeking to display a large amount of data in an alert box, but only a portion is currently visible. The following text is all that can be seen: ["19467,1496257152583","19227,1496256651094","19469,1496257033968","17285, ...

javascriptjqueryhtmlbrowseralert

Utilizing Bootstrap divs for multiline display in Yii2 platform

Currently, I am utilizing a list in Bootstrap CSS which is responsive and beneficial. However, I am faced with the challenge of creating a notification list with lengthy text akin to that on Facebook. My query pertains to the technique required to make th ...

jqueryhtmlcsstwitter-bootstrap