I'm having a problem adding styles to a clicked link - it's an image and I want it to have a shadow once it's clicked but I can't get that to happen, neither shadow nor box-shadow seem to do anything.
I managed to get it working on jsFiddle:
http://jsfiddle.net/4GgBe/
But it won't work on my page:
http://jovansfreelance.com/booklist/list/man/Best-Stand-Alone-Fantasy-Books
You can see the link when you lick the green '1 reranks' button (it's the one with the little colored bars on it). I even tried copying the entire CSS from the page to jsFiddle, and it still worked on jsFiddle but not on the page. Can someone spot the problem?
The class on your link does not match your CSS. The class assigned to the link is "showeranks" but the CSS rule is assigned to "shower".
You just need to edit your live CSS to look like this:
a.showeranks:active{
box-shadow: 2px 2px 2px 2px blue;
}
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 working on page in Word press. The theme buttons aren't what i was looking for so i decided to make a custom ones. I thought it would be simple:
<button type="button" class="btn menu-button">BUY</button>
and css:
.btn{
font-size: large;
background: transparent;
border: solid;
}
So here is where my problem occur.
Some of the css code is working just fine (font-size for example) but the borders won't show up no matter what. I thought that the problem lies in the button tag itself but after futher investigations i noticed that it happens for every html element on my page, no matter div, p, H - the border stylization is not working neither color choice nor size, style etc.
So please help me, how can i make not only some but every css line work.
Im using WP 5.5.3 with customify theme. I've put The css from above into the custom css tab.
Borders usually require the border-style in order to have any of the other border styling properties to work. Try replacing with:
border-style:solid;
Alternatively, you can add them all to one line allowing you to omit the border-style by adding something along the lines of:
border: 1px solid black;
Hello to the StackOverflow community!
Last month I was working on this HTML/CSS Project for a Codecademy Intensive course. Here is a link to the page on GitHub.
Look down on the page and you will see the visible borders (in a faint, razor-thin grey color) around the items that read "Orientation date", "Our campus", and "Our guest lecture". How can I get rid of them and make the items blend in nicely with the light blue background behind it?
BTW, you can find my project files here.
Thanks for your help.
A.L.
Try removing border-top: 1px solid lightgrey; from your css styling for .column-right .item {.
Perhaps, you meant to void the entire border
with :
.column-right .item {border: 0}
Looks good either way though
As you can see from these screenshots: http://imgur.com/JUh6VVG and http://imgur.com/Sg7av0n I'm using layerslider wp and I'd like to make the background around the text transparent. You can see in the second screenshot that there's a place for custom css. What css should I put in there to make that happen? As always I appreciate the help.
Cheers!
You'll have to find the class or id of that div. Once you know that, you can use the following css:
.your-text-div {
background-color: transparent;
}
I have a page I'm working on where I an API sending information back to the page and updating the information on the page. But I wan't the information to be displayed in a certain way, i.e I want a boarder around the container. I've tried altering the .css and the .js files associated as well as other attributes like the background color and for the life of me, I can't make a border appear.
Here is a link to the part of my code I can't get o work.
http://www.bootply.com/VejUDSbYRa
.resultWrapper{
background-color: #061A1B;
border: 1px #8EA7AE solid;
}
If you don't specify style of the border, how will it know what to make?