I'm using a the Hugo Bigspring theme with Bootstrap 4 on a website. My primary call to action buttons are orange vs. the secondary green. However, my orange buttons turn green on hover and I cannot figure out why.
Code for the button:
Contact Us
CSS:
.btn-primary:hover,
.btn-primary:focus {
background-color: #F37021!important;
border-color: #F37021!important;
box-shadow: none;
outline: none;
}
.btn-primary {
color: #fff;
background-color: #F37021!important;
border-color: #F37021!important;
You can view the site live here: https://www.bridge12.com.
The orange buttons are on the top right and the bottom of the page.
Really appreciate your help - I've been banging my head against the wall for hours on this one.
This code block in your CSS is changing the color:
.btn-primary:active,
.btn-primary:hover,
.btn-primary.focus,
.btn-primary.active {
background-color: #46812b !important;
border-color: #46812b !important;
}
By checking your website and inspecting the element this is what is shows
So it looks like either bootstrap or another custom CSS is overwriting your code.
Make sure that bootstrap css is always loading before your custom code.
Your background-color for btn-primary is set to #46812b!important; which i am sure it is not bootstrap css, that only means that you have that declared somewhere in your css. double check and you will find it.
Thank you all - this was very helpful. I was loading the style sheets in this order:
<!-- Custom Stylesheet -->
<link rel="stylesheet" href="http://localhost:1313/css/custom.css">
<link href="http://localhost:1313/scss/style.min.css" rel="stylesheet" media="screen"/>
Changing it to this fixed it immediately:
<link href="http://localhost:1313/scss/style.min.css" rel="stylesheet" media="screen"/>
<!-- Custom Stylesheet -->
<link rel="stylesheet" href="http://localhost:1313/css/custom.css">
Huge Thanks!
Related
I am trying to add a nice background color to a website page. This should be straightforward using background-color in my CSS file, but it won't show. So far, I have played around with my HTML code and found out that when I remove a link to a bootstrap 4 CSS file in my header, it displays perfectly. However, I need to keep bootstrap 4, so I tried other fixes:
body {
height:100%;
padding:0%;
margin-top: 50px;
background-image: none;
background-color:#B59DA4;}
The background-image: none, height:100%, or the padding:0% weren't effective compared to removing the bootstrap 4 link:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
Any guidance at all would be greatly appreciated solving this issue without removing bootstrap 4.
By default, Bootstrap uses a white background. You will need to use the !important flag to override it.
body {
height:100%;
padding:0%;
margin-top: 50px;
background-image: none;
background-color:#B59DA4 !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<body>hi</body>
I'm trying to edit a template I've downloaded on the internet, by changing some colors.
However, when I change the color in the css file, it doesn't change it on the website:
HTML:
.user-panel {
float: right;
font-weight: 500;
background: #ffb320;
padding: 8px 28px;
border-radius: 30px;
}
<div class="user-panel">
Link
</div>
This is how I import the .css file:
<link rel="stylesheet" href="{% static 'css/style.css' %}"/>
So what I did was changing #ffb320 to #cc0000 to have red instead of yellow, saved the file, and reloaded the page, but the color didn't change. Same goes for font size, etc...
The only thing that did work was using style='font-size:20px' for the font size.
What am I doing wrong here?
This happens because of the cache so, you can do like:
<link rel="stylesheet" href="{% static 'css/style.css' %}?version=55"/>
Also, do run the command:
python manage.py collectstatic
You should check out the original CSS from the template. Maybe there is a selector with more strength that just .class, I don't know the strength scale from memory, but I believe that doing something like div.class has more priority than .class.
You can always try adding !important. For instance:
.user-panel {
background: #ffb320!important;
}
It's a button with a link, so you need to target the 'a'. Because there's a child inside the parent, when you target the parent it won't automatically target the child. I've learned this through trial and error.
Try it like this:
.user-panel a {
background-color: #cc0000;
}
That will work.
Try to use property
background-color
Hope It will help
I am having some issues with using Bootstrap for the first time. For some reason no matter what changes I make to my custom css it does not affect the bootstrap css or the regular html of the layout. I am currently trying to build my first website in visual studio and have been advised to work with bootstrap however I cannot seem to get it to work the way I want it to. I have successfully created web elements that I want without the use of bootstrap however when I try to use bootstrap it just does not want to display any of my custom css no matter what I do.
As I stated above, the first thing I tried was editing the bootstrap css directly, which had absolutely no effect on the layout of my webpages. After this, I discovered it was a good idea to create a seperate main.css file and then link it in to bootstrap file, with any changes being made to the main.css file should change the bootstrap css without having to mess up the bootstrap file. However, using this method none of the changes alter the way the webpages are displayed in any way. After this, I decided to follow this tutorial https://websitesetup.org/bootstrap-tutorial-for-beginners/ step by step, even though it is a notepad++ tutorial and not a visual studio tutorial. Even following this tutorial step by step none of the changes made to the css are displayed on the webpage.
When I simply add the html I want to the layout page without linking the bootstrap or main.css to the layout page the features work as intended, but I cannot customize some things with html so I need to get it working with css.
I have done a few google searches for solutions to this issue and tried several, such as moving code from the body of the layout page to the footer, ensuring the file directory for the .css files is correct, including capital letters, but I cannot seem to find where the issue is.
This is how I linked my layout page to the main.css file which contains the css for altering the nav bar of my webpages:
<head>
<link rel="stylesheet" type="text/css" href="Main.css">
this is the link to the Main.css file with my custom .css that I used in the layout view in visual studio
<link rel="stylesheet" href="BSProject/css/bootstrap.min.css">
This is the link to the bootstrap file I used when following the above tutorial and added this to the head of the index.html file
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
This is the stuff I put in my main.css file, while also finding the .nav classes in the bootstrap.css and trying to put this information in the bootstrap file also.
/* The navigation bar */
.navbar {
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
}
/* Links inside the navbar */
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change background on mouse-over */
.navbar a:hover {
background: #ddd;
color: black;
}
/* Main content */
.main {
margin-top: 30px; /* Add a top margin to avoid content overlay */
}
I am trying to change the colour of the nav bar, the colour of the text, the colour of the text on scroll over, the colour of the text on the nav bar of the page that is currently being viewed, the text type/size/position and I want the nav bar to be fixed at the top of the page so that as you scroll down the page you can still see the nav bar at the top of the window. And I want the nav bar to scale with the size of the window for mobile users, a feature that is included in bootstrap. I understand everything I mentioned is not present in the above css, this is because I wanted to test it was functional before I began typing out all the css I need.
I can already do all of this without using bootstrap but for this project I am required to use it and I just can't seem to display anything other than the default bootstrap nav bar no matter what I change in the css.
First of all move your style Link after Viewport and also move your custom css file Main.css after Bootstrap.min.css. Try this I hope it'll resolve your issue. Thanks
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- StyleSheet -->
<link rel="stylesheet" href="BSProject/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="Main.css">
</head>
I am trying to remove the small blue border around my submit button which appears when it's pressed. I tried to fix it with border: none; but that didnt fix it.
Currently my code looks like this:
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
<link rel="stylesheet" type="text/css" href="hover.css" />
</head>
<body>
<form id="button1" action="#" method="post">
<input type="submit" value="ORANGE"
class="btn btn-warning"/>
</form>
</body>
</html>
Jsfiddle
I'm using XAMPP to run it on localhost and Google Chrome 42.0.2311.90
UPDATE
.btn:focus {
outline: none;
}
This fixed it for me! I do not not plan on making my site accessible via keyboard so I do not need the blue outline. It's just for looks.
I think you are looking for something like this:
<style>
.btn:focus {
outline: none;
}
</style>
Add the above styles inside head tag.
By default, bootstrap have outline color blue for focused buttons.
You can remove/update it using class "btn" like mentioned above.
UPDATE
As #MatthewRapati suggested: This outline let's people know that the
button has focus and should not be removed. It is an accessibility
concern. It is better to restyle it if the default is not wanted
Remove the "outline" from the button on click (a:focus)
.btn:focus {
outline: none;
}
Demo :http://jsfiddle.net/baqunkn1/
.btn-warning {
color: #ffffff;
background-color: #ff851b;
border-color: #ff7701;
border: none;
outline:none;
}
Outline are primarily used for accessibility settings, and should be retained for default behavior unless you are providing some mechanism or highlight for focus/accessibility. If you simply remove without providing the same and user uses Keyboard to navigate, he will not be able to know what link/button he is currently on and may ruin the overall experience with your page.
Remove the outline from button
.btn-warning:focus{
outline:0px;
}
You can also remove outline from all the buttons using
input[type=button]:focus,input[type=submit]:focus{
outline:0px;
}
Default button focus has outline of 1px blue on Chrome. There are many more items which have outline, you can disable all of them using:
*{
outline:0px;
}
I used this guide to customize buttons in a web page I've made with bootstrap:
Change hover color on a button with Bootstrap customization
The problem is that I can't manage to keep the same font-color in hover and I can't explain why it always changes to dark grey.
Here's the code: http://codepen.io/anon/pen/ByKZZK
HTML:
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<button href="mailto:abc#def.ghi" class="btn btn-custom btn-lg btn-block">info#mail.org <span class="glyphicon glyphicon-envelope"></span></button>
CSS:
.btn-custom {
color: #FFD180;;
background-color: #483737;
border-color: #357ebd; /*set the color you want here*/
}
.btn-custom:hover, .btn-custom:focus, .btn-custom:active, .btn-custom.active, .open>.dropdown-toggle.btn-custom {
color: #FFD180;
background-color: #837171;
border-color: #837171; /*set the color you want here*/
}
Any ideas?
Just add !important; to the color: #FFD180 in the hover part of your CSS.
.btn-custom:hover, .btn-custom:focus, .btn-custom:active, .btn-custom.active, .open>.dropdown-toggle.btn-custom {
color: #FFD180 !important;
background-color: #837171;
border-color: #837171; /*set the color you want here*/
}
Edit: The color (#333) probably comes from this line in the bootstrap.min.css
.dropdown-toggle.btn-default{color:#333;background-color:#e6e6e6;border-color:#adadad}
Seems like some way the .btn class of bootstrap is getting more weight on your codepen, you can try to avoid the !important making more specific your selector like:
.btn.btn-custom
Check the Codepen