I need to change a button on my website's homepage from a curved edge to sharp.
It is a WordPress website and I am trying to add this code via Additional CSS window.
I tried to perform the below code, but it did not work.
wobble-horizontal.shop-button.arrow-right.style2.black.bg-white
{
border:3px solid #bada55;
}
Any suggestion on how to make the button sharp-edged?
Edit: I have just realised I haven't mentioned "a" class at the beginning. It should be a.wobble. Sorry for the confusion.
Assuming that's just a div, it's as simple as setting the border-radius to 0px
Also, the library you're using could be high up in specificity, so you can also try border-radius: 0px !important; to try and force it.
Based on your border: 3px solid #bada55 line, I think you may have the wrong selector as that should be setting the border of that button a lime green and not gray.
#sharp {
border-radius: 0px;
}
#not-sharp {
border-radius: 10px;
}
div { background: red; margin: 10px; }
<div id="sharp">My Sharp Button</div>
<div id="not-sharp">My Not Sharp Button</div>
There seems to be another CSS script that is manipulating the border-radius property.
To have sharp borders, use:
border-radius: 0;
The code you were using just sets the border's thickness (3px), style (solid fill), and color(#bada55), not the radius.
If this does not do it, try tracing down what other CSS script is manipulating the border radius, or just use the !important directive to override:
border-radius: 0 !important;
border-radius: 0;
or border-radius: 0 !important; if your CSS is being overridden.
Setting border-radius to 0px should give you straight edges on the button
Related
I know how to customise some properties of a slider's thumb with CSS and Webkit.
E.g.:
#slider::-webkit-slider-thumb{
box-shadow: 0px 0px 0px #000000;
border-radius: 50%;
border: 3px solid #0ac2ac;
background: #0ac2ac;
cursor: pointer;
-webkit-appearance: none;
cursor: grabbing;
height: 15px;
width: 15px;
}
Instead, I do not know and failed to find on the Web how to customise a slider thumb's shape by using CSS and Webkit.
I wish to use a polygonal shape instead of the slider thumb's default round shape.
Is there a way to do that by using CSS and Webkit? If not, what is the most efficient alternative solution for achieving my purpose?
Thanks!
I solved it by adding clip-path: polygon(<path>) and changing background: <colour> to background: url("<entire svg code>") to the style shown in my question.
I run into same task recently, I am using somewhat similar css as the question posted,and also stuck on the same issue.
In my case, it seems that I have to add margin-top to let it work.
I added:
margin-top:-8px
If I don't add it, it will always be the blue circle.
I am stuck with removing the curved corner from the image on blog posts on Wordpress.
https://www.marriedin.co.uk/guides/
I have managed to remove the bottom corner with the following
.content-box {
border-radius: 0px;
}
Just can't workout how to remove the curve on the top corner of the image. You can see that the container itself has no curved corner but the image still has one.
thanks
.type-post .entry-cover.has-image {
border-radius: 0; }
The container for your image has top-left and top-right border radius set. It's in style.min.css:
.type-post .entry-cover.has-image, .type-post .has-image.entry-cover--home, .type-post .has-image.listing-cover {
border-top-left-radius: 4px; /* change to 0px */
border-top-right-radius: 4px;
}
If you find this bit of markup, and change the 4px to 0px you will lose the rounded edges
It looks like you still have border-top-left-radius and border-top-right-radius set to 4px.
Try this in your custom css:
.content-box {
border-top-left-radius: 0px !important;
border-top-right-radius: 0px !important;
}
The !importantoption will override any other stylesheet applying style to that class.
Also, make sure to refresh your browser properly to reflect the changes in your browser, that may have cached data. If you use Chrome, use ctrl+F5 or open an incognito window.
Inspecting the element shows that classes .type-post, .entry-cover and .has-image define the corner radius specifically. Try to define:
border-top-left-radius: 0px;
border-top-right-radius: 0px;
To anyone who is not aware, it's possible to test CSS changes directly on the browser inspector. Doing so can save a lot of time figuring out from what element a problem comes from and helps testing out possible changes.
.type-post .entry-cover.has-image, .type-post .has-image.entry-cover--home, .type-post .has-image.listing-cover {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
The child element of the <article> tag is what's imposing those rounded corners on the image.
Try adding the following:
.type-post .entry-cover.has-image, .type-post .has-image.entry-cover--home, .type-post .has-image.listing-cover{
border-radius:0;
}
This should fix it
.type-post .entry-cover.has-image {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
I am working on a website where a user can select an icon and send it as a request to one of my bots.
I've already got it sorted out. I'm mainly just working on improving the aesthetics.
What I want to happen is, when hovering over an icon (or even selecting it), it shows a light blue background colour to indicate that it's been selected, because right now there is nothing to indicate a chosen icon except for the div at the very top (which isn't always in sight when you scroll further down).
The code I have atm is:
.flair:hover, .selected{
background-color: #3498db;
border-radius: 2px;
}
I've tried adding some padding but since each image is in a spritesheet, it will overlap with other images.
I've also tried using a border instead to emulate the same effect, but hovering over an image would slightly move the other images due to the border being applied and it gets annoying.
Is there some way I can get my background-color to 'overflow' behind the images?
How about you add a transparent border add the begining as a placeholder and change your margins since borders gonna add some space
.flair {
border: 2px solid transparent;
background-clip : padding-box;
margin-right:6px;
margin-top:6px;
}
and then you color it with some additional glow when hovering
.flair:hover {
box-shadow: 0 0 10px #3498db;
border: 2px solid #3498db;
}
Please try this :
.flair:hover, .selected {
border: 1px solid #3498db;
border-radius: 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
I know select boxes are a bit of a pain to style with css, but without resorting to advanced techniques is there anyway I can add some padding to push down the text a bit without it also adding padding to the arrow on the right hand side?
add this to your CSS class. Maybe this helps?
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
Since select boxes appear differently on different browsers and especially operating systems, you cannot guarantee a consistency.
For example, the minimal amount of formatting I can do on a mac is this:
select { height:40px; background:transparent; }
And it looks like this:
#Demilio's answer is great for hiding the default selectbox. With custom styling you can then change the appearance of the selectbox as you wish.
The only remaining problem is the arrows/caret which are also gone, as mentioned by #romainnm.
Unfortunately pseudo elements (e.g. :after) don't work on a select element, so the only way around it is to create an actual element after the select, something like <div class="Caret"></div>.
Add some stylying:
.Caret {
display: block;
position: absolute;
cursor: pointer;
right: 1rem;
top: 50%;
margin-top: -1px;
width: 0;
height: 0;
border-top: 5px solid #000;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
And this should result in a custom styled select box with arrows:
Unfortunately the only downside is clicking on the arrow won't open the selectbox, and that also doesn't appear to be possible to tackle with JavaScript.
Interesting test here
http://cssdeck.com/labs/styling-select-box-with-css3
The author covered the arrow on the right hand side and created its own, using vendor prefixed css to target different browsers. after doing that, your padding is all free.
You can use border to add padding to your select element and outline for adding the border itself
.select {
border: 12px solid #FFF;
outline: 1px solid #000;
}
taking that you have a white background, this will work as 12px padding but it also adds padding to the arrow
select {
background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
-webkit-appearance: none;
background-position-x: 97%;
}
I know you can draw with a canvas element, I just wanted to know if it was possible to draw a triangle next to a link without using a canvas element? I just want a small < 16px down arrow.
Here is my take on drawing a triangle in css. You can view it on JSFiddle. Have not done any browser testing (works in Chrome!)
The CSS is pretty simple:
.triangle{
display: block;
border-bottom: 16px solid transparent;
border-left: 16px solid red;
overflow: hidden;
position: absolute;
}
If you want it pointing in a different direction, just alter the borders. For example, the following will point the triangle downward:
.triangle{
display: block;
border: 16px solid transparent;
border-top: 16px solid red;
overflow: hidden;
position: absolute;
}
Edit: Works in latest IE, FF and Chrome.
Nope.
The closest you could get is by using an ASCII key, ↓ to be precise.
It produces an arrow like this ↓
Of course a background-image will do the trick, but that's quite obvious, innit? :)
U+25BC: Black Down-Pointing Triangle exists in Unicode. Here it is: ▼
You could use this CSS to apply it:
a:before {
content: "▼";
}
It's probably better to use a background-image though. That way, you would not depend on the existence of such special characters in the font the web browser uses, and it would show up in IE 6/7. For example:
a {
background-image: url("arrow.gif");
padding-left: 16px;
}
No. Just use a special ASCII character, &#darr;, no CSS required:
<span id = "down-arrow">&#darr;</span>
Here's my simple drawing for the triangle using CSS:
<div style="border: 11px solid transparent; border-right-color: rgba(0, 0, 0, 0.25);"></div>
If you need to change the direction, just replace border-right-color with border-direction-color.
And maybe you use position: absolute; and margin-top and margin-left properties to set the position.