Problem: Not able to edit/code an element.style on a page in the following coding language:
HTML/CSS
I use an extension called Stylus (which is an extension that can edit the pages existing content),
I wanted to edit a buttons dropdown bar, which is shown in the picture below surrounded by a red circle.
Drop Down Bar
The problem is that the code I'm using is not in any way affecting the element.style, here is some details in the pictures on how my stuff works.
The Code Editor
My Code I used
Now it does show on the snippet here that the element.style is applied.
Applied
But then when I click the pages edit button it changes. Snippet of Change. It seems to be overridden, I don't know what type of kind of loop I should apply if that's the case.
element.style {
background-color: rgb(255 255 255);
border-color: white
}
To let you know I'm a beginner at coding, my apologies on not knowing what some things may, or may not be called or function.
Related
This is my first question on here. Any feedback is welcome.
I'm creating a dropdown menu for the mobile version of our site and I'm running into an issue that seems quite straight forward.
In this image you see the menu how it should look like when the submenu is extended. When working in the Elementor editor everything looks how it should look. When I go to preview mode or to the live website the following happens when I extend the dropdown menu: lines appear around the extended item what I think are borders or an outline. Also when I close the submenu the menu item gets highlighted: highlighted menu item.
It seems like the menu item is set to active and the default border/overlay is added. I don't see how that is possible since this are my settings: settings. Separation is set to none and the background-color and color are both set to their correct values. Settings for normal and hover are the same as active, since I don't want any changes to happen.
I tried other color values and changed them to transparent. These changes work properly but the black border and overlay remain an issue.
I also tried adding the following CSS to the element but this didn't help:
selector .menu-item {
border: none;
outline: none;
}
I tried rebuilding the menu, some other code snippets, disabling caching plugins, setting separation to solid with 0px and more but nothing fixed it so far. When looking at the elements using inspect I see that when extending the submenu the class changes from elementor-item has-submenu to elementor-item has-submenu highlighted. If I could somehow disable this I think the issue would be solved.
My HTML and CSS knowledge is quite limited so I hope there is an easy fix that I'm not familiar with.
Many thanks in advance!
Edit: Thanks to #Alivia Pramanik for the quick and easy solution!
Welcome to SO. If I am not mistaken, you can change this with Elementor's own design. To do with this custom CSS, add this,
.elementor-nav-menu--dropdown .elementor-item:focus {
background: #0000!important;
outline: 0!important;
}
See the image for your reference
I'm currently working on an online code editor. (like jsfiddle codepen etc...)
I got everything working, but I ran into one problem; If a user does something like this:
button {
background-color: red;
}
It also changes the properties of my "run code" and "reset" button I made.
same thing with other things like a div;
div {
padding: 500em;
}
because this will also change the div's Im using in my own code.
I fixed the issue using !importand tags after every line in my css but I'm wordering if there is any other way to fix this? or is !importand really the only way.
As said in the comment by CBroe. To do this you can use iframe.
A more original solution would be to create a web component with a shadow root (which isolate the style too). The support for this is not too bad even if it's fairly new :
But, I've used it myself and it's a little bit harder to understand at first
I made a transparent menu with white text on it and when we hover it the whole topbar becomes white and the text becomes invisible because of the same color.
I want to change the font colors to black of all the items in the columns when we hover anywhere on the top bar.
I am using elementor.
This is my website:
http://ha123.epizy.com
Please suggest if there is a plugin for this or any code. As a newbie I would be really happy to learn from you guys.
Thanks.
You could solve this using custom CSS code. If you use Elementor Pro, you could put this CSS inside of the plugin somewhere, but if not you can just add it either in the Customizer in Wordpress, or in a custom (child) theme.
Something like this could work in your case:
.elementor-widget-ekit-nav-menu:hover .elementskit-navbar-nav > li > a {
color: black;
}
You might actually also be able to solve this using Elementor itself in the style settings somewhere, but that depends on how everything is set up and which elements you are using.
On the following web page:
http://www.hiv.lanl.gov/content/sequence/GENE_CUTTER/cutter.html
...you'll notice that there are three "input areas" each of which has a grey box behind it. I realize this is a simple question, but how was this effect achieved? I'm writing a similar application and I find the contrasting colors aesthetically appealing.
Thanks.
Caitlin
If you look in the code of the webpage by viewing its source code or rightclicking and choosing "Explore object" or something like that, you will see that they have the inputs in table and table with class="paramtable" which has a background-color: rgb(227, 227, 227); which is some kind of gray as long as the red, green and blue numbers are same.
So don't wait for using nice styles when writing your website :)
What they most likely did what create classes for the items that are within the form element, and then in their .css file, they set the background color to the light gray color. You can see more about all this here: w3schools
The site I'm modifying is: www.fashiontogo.ca
Please view the source code via Google Chrome's ability to view source as I can't provide the HTML or the CSS directly here. It isn't my site, and I didn't develop it from scratch. Look at the profile picture in the top right, or any of the images on the page. You'll see a 1px left border (there is a margin associated with the profile picture, but not the others). That needs to be removed.
The CSS file I've been provided for the site does not contain anything causing this. I've tried removing all instances in the CSS that are either "border" or "border-left" and nothing has changed. The only possible thing that I've been able to do is to remove the surrounding div element for the images (named .img_container). A hack fix (that I'd rather avoid) would be to use jQuery to dynamically remove all the img_container divs at load time, but I'd much rather find some CSS fix to this.
Any suggestions or ideas? Any help would be appreciated.
There is a rule
.img_container::after {
...
background-color: rgba(0, 0, 0, 0.2);
}
You have to remove that BG color