I am trying to style the nickname of users in discord for myself (local changes). I added a border to the nickname style ".username-1A8OIy" I tried it and it worked. The problem is when I add simple line of code in my override file the whole CSS in the website stops working like there is no styling sheet at all.Here is the code I am trying to add:
.username-1A8OIy {
border: 2px solid #fff;
}
Whenever I refresh the page, I should see my changes still there. But the only thing I see is just HTML website with no styling sheet at all. And when I remove the code I added, everything comes back to normal.Is there a problem in my code or something? What exactly I am doing wrong?
Related
Today I was adding a Call To Action element in elementor and I set an image as the background and I changed the border radius to 5 (Under advanced> border> radius) and the border appears rounded on the editor and the preview but when I view the page from my device (iPhone) the image in the call to action is not rounded like it appears in the editor or preview. I tried playing around with it and I figured out that the border will apply if you have a color as a background of the call to action but will not apply if you have an image as a background. I've had the same issue before with the Slides Widget however I was able to resolve this by using some CSS
selector .swiper-slide-bg, selector .elementor-background-overlay { border-radius: 20px!important; }
,that I found on this article: https://mcstarters.com/blog/add-border-radius-to-the-elementor-slider-element/ . I then tried to create my own code:
selector .elementor-cta-background-overlay {
border-radius: 20px!important;
}
But this did not solve the issue. This is not a plugin or theme conflict I created brand new websites with nothing but Elemntor and pro installed and still had the same result. If anyone is able to figure this I would GREATLY appreciate it as I've spent HOURS online trying to find some CSS to solve this with no luck. Even reached out to Elemntor support out of desperation but even THEY can't figure it out. Any CSS Code Would be appreciated thanks.
[These Are Some Images To Help]
[What Elemntor Preview Looks Like]: https://i.stack.imgur.com/D7DiF.jpg
[What it looks like on my Device]: https://www.icloud.com/photos/#0e6G2hxKFShWs5dENCe5VGfpg
This worked for me:
.elementor-cta .elementor-cta__bg-wrapper {
border-radius: 12px!important;
}
Hi I am new on here first of all nice to meet you all
I am facing a problem on wordpress
I am using "Quick Download Button" Plugin which the link is https://wordpress.org/plugins/quick-download-button/#description
after I have install it on my site I tried to change the button colour by css but I never ever success to change it. I have checked the button in inspect and I copied it but it didn't work.
what I tried was
.g-btn.f-l
{
color: #3c1c1c;
}
but it never worked.
please anyone help will be awsome thanks and sorry for my bad english
Like #jared said - it shouldn't be too hard to find the right selector and change the color within your browsers dev-tools. If you see the color change, bingo! Then if that doesn't work within your css file itself, you might have an ordering issue with your sites css files (i.e. your css is loading before the plugins). Quick way to test this is add the !important selector to that rule on your file - e.g:
color: #3c1c1c !important;
the css color-parameter is not defining the color of the button, but from the text of the button. if you want to change the color of the button, you need to look after "background" or "background-color".
example:
.g-btn.f-l{
color: #FFFFFF;
Background-color: #3c1c1c;
}
Visible example:
Source of example: Kryptonews Lexikon
I'm creating a website for myself in WordPress using Elementor free plugin and Phlox theme. I've just started and completed a couple of sections. Each section has some text, buttons and some images. The issue I'm facing here right now is that when I open the website and move my mouse pointer inside the Webpage area, the text in all sections gets underlined just like any hyperlink but there is no hyperlink with any text. I've checked settings in customizations and other stuff in theme settings but nothing helped. I'm new on WordPress and don't know how to debug this in any technical depth. Please have a look and tell me how can I fix this issue.
I can't continue with these underlined text appearing all over my page.
Link : myWebPage
Any help is appreciated.
Try this:
.csstransitions .aux-page-show-circle.aux-page-animation-done #inner-body, .csstransitions .aux-page-show-circle.aux-page-animation-done {
height: auto;
overflow: visible;
text-decoration: none;
}
Always attempt to use your browser dev tools to check these things. In your css you have this in your custom.css file. Dont know why its there but thats the cause
body:hover {
text-decoration: underline;
}
I'm having a difficult time removing blue borders on my images. I have created several links on the images that I have made for my employer's website. We inserted some new code that resolved this; however, I still have another user in the company seeing the same thing. They have a different version of IE than me so I can't verify this. I've tried to update my IE, but can't find updates past my current one.
His version of IE is: 11.0.9600.18314. His update version is 11.0.31. We are using Umbraco. We used this code to remove the borders on the previous versions: img { border-style: none; }.
Ideas?
It's simple, remove the border from the link, not the image
a{
border: none;
}
We figured out that it must have been his cache and cookies. Because the next day. It started working for him.
I can not explain this at all, but I've put a theme selector on my site. A javascript dropdown box that changes the CSS the site is using.
Theme 7 is a theme that had an image of lights in the background. I didn't think it worked with the rest of it so I changed it to a different image using cPanel on my hoster, hit save, and it saved and changed like any other file.
I refreshed multiple times to get the changes, and scrolled down to Theme 7 to see how the new image looked.
Same image as before.
I tried a new image. Same thing.
....I deleted the line background-image altogether, and then quit out of the browser and restarted it.
The lights are still there.
What is going on??? I'm using Chrome btw. In Safari the image was just straight black. I think I've stumbled on a cursed picture.
Here's the css
body {
font-family: Calibri, Arial;
text-align:center;
*/background-repeat:repeat-y;
background-size: 100%;*/
}
input {
padding: 3px;
font-size: 22px;
}
select {
padding: 4px;
}
/*-----CLASSES-------*/
More stuff here
Try pressing ctrl+r to clear Chrome's cache.
It probably cached the css you were using before in your browser (and possibly the image too?) That's the only answer that makes much sense. You can force-clear the browser's cache of the css by changing the call to the file my-styles.css?abcdefghijkl in your html (or wherever it is you are loading up the styles from).... but manually clearing your cache will work too.
You may want to incorporate a dynamic Cache Control... every time you change the theme with javascript, have it change or reload the cache so your users won't have to continuously clear their own cached files when they change the theme... Depending on what server you are using, you can do this with php and .htaccess or .NET and web.config, im not sure if there is a way to do it with javascript directly..?