I have this site where some keyboard only people will use. On some certain elements nothing shows when tabbed onto them. the element is as follows
<div id="NBSCustomiseHomepageLink"><div id="NBSCustomiseHomepageButton">Edit your profile</div></div>
I have added an outline to get the correct border I want for when it is tabbed onto it. The problem I face is that I don't know how to make it so it comes on when its tabbed onto any ideas?
css code is
#NBSCustomiseHomepageLink{
outline:black dotted thin;
}
If i am right it :focus and Fiddle is here
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 am using the Material Design Light "Text Heavy" template page as a basis for a page I am creating. I would like to use the tabs up the top to link to places within the page without hiding other content: ie scroll down to a card, without hiding card above and below.
How can this be accomplished?
Using tabs as navigation isn't supported in v1.0.x, sadly. It's been added in master, though, so it'll be coming in v1.1!
For now, your best bet is to override styling for panels. So just code up everything as normal, as if you wanted your panels to be hidden, and then override their styles:
/* Use an extra class to make sure you only target the
ones you want. I used 'my-panel' in this example. */
.my-panel.mdl-layout__tab-panel {
display: block !important;
}
That should override the mdl-layout__tab-panel's default behaviour, which is to hide.
If this doesn't work, just share a codepen and I should be able to help further!
I have a button in my application and currently its very basic:
<button style="height:150px;width:150px;border-radius:10px;">Hello,World</button>
Which means it has the default HTML CSS effects used w/it. I was attempting to change it w/CSS but everytime I make the button bigger, there's always this dark side on the right and bottom side..I'm not sure why. If I change it back to its default, its not there.
Here is the JSFiddle:
http://jsfiddle.net/htzgak6g/1/
I'm referring to the right side and bottom side. They seem darker to me than the other sides. All I want to do is have some type of button with rounded corners and a nice shade of color.
This is because buttons come with some basic default browser styles that are still taking effect because you haven't over-ridden them.
In this case, adding border: none will remove the border and the dark colour. (http://jsfiddle.net/htzgak6g/2/)
Look at a reset css to solve these problems and give a consistent blank slate across browsers.
The problem is that the browser appends default style to the elements which are marked by <system> in Firebug. You can use the Selectors style panel to view all the styles added.
As Toni said, you will need to use reset.css to ignore such styling. But for this specific problem, set the border-color to be transparent.
button {
border-color: transparent;
}
<button style="height:150px;width:150px;border-radius:10px;">Hello,World</button>
Just add border-style:none; like so:
<button style="height:150px;width:150px;border-radius:10px;border-style:none;">Hello,World</button>
Here is your updated JSfiddle
I'm trying to hide a select listbox, which is working fine, but I'd still like the hover effect to work on the visible element but it isn't. Here's a simple fiddle:
http://jsfiddle.net/Kr6E9/
The top box has the hover working properly, but no listbox inside. The bottom box has the hidden (actually, opacity set to 0) listbox but the hover doesn't work except for where the listbox isn't.
Is there anything I can do about this?
Amazon does this same thing on their homepage with their main search box (that defaults to All). I've looked and they have a hidden listbox, and their hover works, but they must be doing something I'm not. It doesn't appear to be a z-index issue and from what I can tell there is no way to programmatically activate the listbox options.
Ideas? Thanks for the help!
(Oh, and my positioning is really terrible for the example, I will do a much better job of placing the listbox, but I think this was the simplest way to show my problem).
To appease the parser, here's some example html of the list node. Note that this can change if necessary:
<span class="wrapper">
<span class="text">Select</span>
<select class="dropdown">
<option>123</option>
<option>234</option>
<option>345</option>
</select>
</span>
Thanks again!
Remove this:
.text:hover {
background-color: lightgray;
}
Add this:
.wrapper:hover > .text{
background-color: lightgray;
}
Whenever the wrapper is hovered on, this style is applied to all the child text elements.
I need your help.
The Title in the green Box "News" appears right under this Link.
http://www.mjart.ch/category/news/
But because of this weird Template I'm using, there are sometimes some imperfections. On this Site here
http://www.mjart.ch/portfolio/
the Green title seems to disappear behind the padding border. I really don't know why.
What I found out is that there are 2 different CSS styles. The first one that works is a .blog-title and the second one is a .single-title. But both are same styled. I would be happy about some help.
Hi if you dont want to change the structure of the template you can add this css rules
.page-id-21 .single-page{
margin:0;
}
.page-id-21 .single-page .single-content{
margin-left: 25px;
}
I added a .page-id-21 class, otherwise in the contact page you will add a margin.
This can be a solution, another is to search the correct template page, if it's a premium plugin it will have it, and you dont need to add the css rules.