Hope somebody can help me. I've added custom css to a button but the shadow displayed is wider than the button itself:
This is how it looks:
This is the css:
.dip-button-dark-bg {
border-radius: 5px !important;
box-shadow: 2px 2px 2px #484848 !important;
}
Can someone tell me what I should add? I've been searching for a solution for 2 hours now and have become pretty desperate.
Related
I added a shadow to some of my buttons. With the :not selector i deselected some elements like link button and pickerfield button. My problem now is that there is also a shadow in my logout section. It didnt work with c-logout and c-login-button. Someone here who has an idea?
.v-button:not(.v-button-link):not(.v-button-c-pickerfield-button):not(.v-button-c-logout-button):not(.v-button-c-login-button) {
box-shadow: 1px 1px 4px darkgray;
}
Found the solution, added some missing stylenames in ext-main-screen.xml and this is my scss:
.v-button
:not(.v-button-link)
:not(.v-button-c-pickerfield-button)
:not(.v-button-c-sidemenu-collapse-button)
:not(.v-button-c-settings-button)
:not(.v-button-c-logout-button)
:not(.v-button-c-login-button) {
box-shadow: 1px 1px 4px darkgray;
}
This seems to have the solution I need...
Border radius on Focus input field
Where I want the focus border to match the border radius used for the box itself. As it is right now, the box has curved corners but the focus does not so it looks odd.
I tried...
*:focus {
outline: none;
box-shadow: 0px 0px 2px blue;
}
and...
.field-box:focus {
outline: none;
box-shadow: 0px 0px 2px blue;
}
but neither work so I'm thinking something at a parent level is overriding it. When I check for the css in inspect, I don't see it show up so I can't confirm that is the case. I just know that I can make other changes to the form box but not the focus border itself. Anyone know how to address or if there is a way to identify what might be overriding it?
So, my problem is I am using a template with WordPress that has a blue "headline" box that I need to change the color to #333399. Right clicked on the headline, selected "inspect element", searched through the code and identified the following code as what I thought should be changed:
#headline, #headline2 {
width: 100%;
height:55px;
padding:20px 0 10px;
background: #fafafa;
border-bottom: 1px solid #fff;
border-top: 1px solid #d9d9d9;
box-shadow: 0px 0px 3px rgba(50, 50, 50, 0.08) inset, 0px 2px 5px rgba(50, 50, 50, 0.02);
}
In WordPress I went to "Theme Options"--> "Custom CSS" and added the above code with with the exception of changing the "background: #fafafa;" to "background: #333399;". After this, the box at the very top of my website changed from a black bar to clear with the above CSS coding showing. After seeing this, I add the original coding back into the "Custom CSS" box. It still showed the same problem. I deleted browsing history, but it was still there. How do I:
Change the top to back how it was (a black bar)?
Change the blue title bar on the page to the #333399?
website: http://roseoftexashospice.no-ip.biz/about-us/
The existing background color is hard-coded using inline styling so the answer is not in custom CSS but in changing the HTML
<section id="headline" style="background-color:#128ABC;">
You need <style> tags or you need to link your css externally
http://www.w3schools.com/css/css_howto.asp
First question on Stackoverflow but I've used it constantly while learning how to make websites and a bunch of other stuff. I've been using Bootstrap to create a website with a friend and in the past we've both seen websites with really beautiful navbars.
What we're wondering is if we can utilise Bootstrap's navbars and add some additional code to add a sort of under-glow to the buttons! In an ideal world too, this glow would move from button to button following the cursor and reset to the currently active page button if none are hovered over. I'm hoping you've seen something like this before but it's actually difficult for me to find an example of this now.
I've been looking at using this sort of effect but turned upside down
body { margin: 30px; }
hr {
border: none;
border-top: 1px solid #eee;
height: 5px;
background: -webkit-radial-gradient(50% 0%, 50% 5px, #aaa 0%, white 100%);
}
<hr>
(Source: http://jsfiddle.net/sonic1980/65Hfc/; (provided by another amazing stackoverflow user))
Is this possible? Thanks for any help, let me know if I can provide any further information.
I tried to replicate it with a box shadow, check it out:
.btn{
box-shadow: 0px 5px 5px #888888;
}
http://jsfiddle.net/gumxt15q/
Using inset
http://jsfiddle.net/q0ere00q/
I am designing home page of my domain registration website and I am stuck at one place. Please go through the website at http://a2host.in/
In Firefox and Google Chrome the Search and Go Button are in same alignment with the text and select box but in Opera and IE8, they are falling down a bit.
I have tried out all the things but I am not able to figure out the actual problem.
I see a lot of unneccesary styling. In essence, this is what you want:
Basic form without floats
You can tweak the font-sizes and colors here, until you have what you want. But this is a good starting point, because it is cross browser identical.
Also, think about using the <button> element instead of the <input type="button">. It gives you more freedom in styling.
Form-controls are a pain to get them look good in all browsers, especially buttons and select-boxes.
Please comment out the following CSS3 properties (please see below) in the .regbutton class of your stylesheet and then try
.regbutton, .regbutton:visited {
background: #222 url(/getImage.php?src=myUploadedImages/overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
/*-moz-border-radius: 6px;*/ /*comment out all CSS3 properties*/
/*-webkit-border-radius: 6px;*/
/*-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);*/
/*-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);*/
/*text-shadow: 0 -1px 1px rgba(0,0,0,0.25);*/
/*border-bottom: 1px solid rgba(0,0,0,0.25);*/
position: relative;
cursor: pointer;
}
try to set border:none for your buttons