I am currently developing a website for a school task. I am quite new to HTML and CSS, so I don't know much about how I would do this.
I would like to change the default colour of the twitter-bootstrap UI on my div class="well" that located on the center of the page to #BA935A.
My website can be found here. So I just need an idea of how I could do it.
I'm not sure which color you're referring to by "default color", but this page shows the less values you can override in your stylesheet with the color you want to use. So if you wanted to change the background color, you could add an entry in your less stylesheet for #bodyBackground that is set to #BA935A.
Open your source code, find following Snippet:
<style type="text/css">
html,
body {
background-color:#20437D;
}
</style>
Change the #20437D to #BA935A.
You would get what you want.
I just went through the answers, since I had an almost similar question. This is how I solved my problem (Based on the answers) to override default bootstrap properties.
<div class="well well-lg text-center" style="background-color:#EC031E; !important">
This well has a Dark Red Background!
</div>
PS: I know its pretty late to answer this question, but I just hope this helps somebody wanting similar customization!
Actually your question are not so clearly, but I'll share how to forcing our class on bootstrap class that I done.
If you want to change color, you can just change on the html directly manually like:
<div class="well" style="background-color:#88B5C2;">abc</div>
But if you want to use your own class. You can add !important. I give you an example how I forcing my style to my bootstrap class:
css part
.mystyle
{
background-color:#88B5C2 !important;
}
html part
<div class="well mystyle">abc</div>
If you're not using !important the style still can be applied, but for more secure please using it, so your style would be prioritize than Boostrap's style.
Related
I am modifying the bootstrap freelancer theme.In the Contact me section when trying to overwrite the "Name" label's color that appears when you try to type in the name input field it appears with #18BC9C but I want it to appear with #3fcbc7. It seems its styling is coming due to a class from a parent div that changes when I click on the input inside.I tried using dev tools "Break on..Attribute modifications" but maybe I'm doing it wrong. I took the classes I saw it had and tried to overwrite it that way as its worked for the other elements but its not working here. My CSS
custom.css
#page-top .floating-label-form-group-with-focus{
color:#3fcbc7!important;
}
#page-top .form-group col-xs-12 floating-label-form-group controls
floating-label-form-group-with-value floating-label-form-group-with-
focus {
color:#3fcbc7!important;
}
Added !important but nothing changed. Added the body id(page-top) for priority but didn't change. I don't want to edit the min css file since I heard that is considered bad practice
Try this by adding this style in your index.html itself
<style>
floating-label-form-group-with-focus label {
color: #3fcbc7;
}
</style>
Or you can add your css which you have provided above ^^
Check in your <head> that you're calling your custom css file AFTER the Bootstrap CSS file. Your custom styles should be called last as the browser reads these CSS rules in order. So if your Bootstrap CSS file comes AFTER your custom one, it's overwriting your custom style sheet.
I installed triggered scrollbox and it's working but text box where you have to write your e-mail has white background and white font(font for whole theme is white). SO i would like to change it to any other color.
Thing is that i can't acces CSS to change it so i have to do it somehow in HTML but i don't know how.
This is the code:
[gravityform id="9" title="true" description="true"]
So question is how can I modify this gravity form code that change color of font?!
Vital information: other solutions can't help(CSS, etc.) bcs wordpress there is bought and it's pretty limited so i'm looking for a solution in HTML that can be implemented particulary in this line code.
You can set styles for input element in your HTML like this:
<input style="color: pink !important; background-color: black !important">
May be you need (may be not) to add !important to your styles to overwrite existing ones.
You can install plugin for custom css and add your custom css there to overide gravity form css.
Here is one simple plugin to do that: Cssor
Write the below css in your style.css
input{
color: #000; // if it is not applying, use ! important
}
It works for all input boxes
Thanks in advance for your time and assistance!
I'm trying to edit the header image on a Wordpress Theme with little luck. It seems to be an "in-line style" which I haven't encountered before. I've searched quite a bit but nothing seems to be working for me, including using important! (though perhaps I'm using it incorrectly).
All I'm trying to do is change the background-size:cover to background-size:120% so the image scales better on smaller screens. Right now it chops my face in half when viewing on mobile which is not ideal.
<div id="custom-header" style="background- image:url(http://brentbareham.com/wp-content/uploads/2016/09/HeaderImage.jpg);background-size:cover;">
<div class="container">
<div class="header-content">
</div><!-- .header-content -->
</div><!-- .container -->
</div>
This is the first theme I've ever edited a theme extensively. I'm using a child theme, not that that should matter, and I've been successful thus far but I can't seem to figure this one out.
So you can see exactly what I'm looking at, the website is http://brentbareham.com
Thanks again!
So long as the inline style does not have !important on it, you can use straight css !important to accomplish what you want:
#custom-header {
background-image: none !important;
}
Here is a jsFiddle that demontrates that it works.
using jquery you can override image
myscript.js you can add theme js folder
jQuery(document).ready(function(){
jQuery("#custom-header").removeAttr("style").attr("style","background-image:url(http://brentbareham.com/wp-content/uploads/2017/Image.jpg)");
})
in theme functions.php
function js_head_scripts() {
wp_enqueue_script( "headerjs", get_template_directory_uri()."/js/myscript.js" );
}
add_action('wp_head', 'js_head_scripts');
You have to use JavaScript to override inline styles. Because of the browser render order, it's the inline styles that get higher a higher importance. So in order to restyle that you have to use JS. This however will cause a reflow i.e. the page will be redrawn which looks like a flicker.
Here some good info to know.
How the Browser Works
Update
Sorry. #Cale_b is correct. the code that you show does not have !important assigned to any of the styles. So there are a couple of things.
1). I am not sure if it is a typeo, but you have a space in the HTML code that you have posted here.
<div id="custom-header" style="background- image:url(....
<!-- should be -->
<div id="custom-header" style="background-image:url(....
2). Changing the background-size to "contain" will probably give you the affect you are looking for. It will constrain the image inside of the div element. No JS needed.
3). You may want to try this.
div#custom-header[style]{
background-size: contain;
}
CSS3 background-size Property
I have the problem which when I create a header in my wordpress plugin metabox, it always apply the default style on my header:
even when I apply, my own style, <h3 style="background-color: black; color:blue">Text Block Settings</h3>, it only changes the text color but not the background color, why??
This seems like a CSS Specificity issue although without access to the source code I can't tell what's going on.
Since it seems like you want a very hack-ey fix, try <h3 style="background:black !important; color:blue">Text Block Settings</h3> and see if that works (normally you should avoid using !important but if this is a one-off override it can be alright).
This question already has an answer here:
article class: does load order matter?
(1 answer)
Closed 8 years ago.
I'm a programmer not a CSS dude and like most programmers haven't spent too much time trying to understand the effects of CSS. There has always been an UX person to handle. But as I get more experienced I am digging CSS and the UX. So my question is this:
What I understand:
<div class="AClassName" >
</div>
I understand how this relates to the .css file and what will happen.
What I don't understand:
<div class="AClassName andAnother1 andAnother2">
</div>
I'm hoping there is a simple explanation.
Just an example:
<div class="positionClass contentClass decorClass">
Lorem textum
</div>
.positionClass: here any position properties could be applyed, 4example absolute/fixed position, display properties, margin/negative margin.
.contentClass : here we can add styles to text: line-height, font-size and so on.
And the last one for some decoration elements.
Hope you get the idea.
CSS works from top to bottom - meaning the styling you add last will override any previous styles.
For instance if I take a button with a class="btn" and style btn to be background-color:black; all my buttons will be black but I want to have a button that's red, then I add class="btn btnCustom" or class="btnCustom btn" and style btnCustom to have a background-color:red it will override that button's style only.
See JS fiddle bellow:
http://jsfiddle.net/udru2/
You can have more than one class for same element in any order. Order is important in .css file itself. Imagine, that all classes are added in one array and all keys (like width, height..) are overridden by any new entry by that key (reading file from top to bottom).
Let me suppose i have two div's like this
<div class='make-red capitalize'>abcd</div>
<div class='make-green make-center'>askhdj</div>
and the css as follows
.make-red{
color:red;
}
.capitalize{
text-transform:uppercase;
}
.make-green{
color:green;
}
.make-center{
text-align:cneter;
}
In a big page where we use loots of divs which are to be styled, this kind of approach helps you. This is just a single use which can be shared.