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
Related
I'm building from the One Page Wonder Bootstrap template: https://startbootstrap.com/themes/one-page-wonder/
I can't figure out how to insert a background image in the masthead. Has anyone had experience with this?
Thank you!
You can replace a good bit of the masthead content with this rule.
header.masthead .masthead-content {
background-image: url('http//example.com/image.png');
}
Replacing the entire masthead is more complex, though. You would probably want to start with editing the HTML to remove the bg-circle elements to give you a cleaner DOM to work with.
I have made a complete Bootstrap grid system. I am now uploading my code to a CMS system, and can see there is some CSS from the backend, there is messing up my grid.
If I untick the following code in the inspector window, everything is looking perfect. When the following code is ticked in the inspector window everything is messed up. Is it possible to overwrite this code somehow, so the class is not used?
.cms-area img {
width: 100%;
}
You can use !important in such cases but use it sparingly. Best is to remove the unwanted code and not use !important. !important might cause issues later that are difficult to debug. If possible include your css after other css is included in the code. In CSS, rules that appear later take precedence over earlier rules
Edit:
Set width to auto instead of 100% to fix your alignment issue
Below given is the ideal way to manage css since it allows you to attribute your style content and lets you override the style already applied elsewhere.
.cms-area .your-class img {
width: <your choice>;
}
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.
So I have a simple page:
www.kensandbox.info/centerthis
This is a simple html/css page and I'm trying to add a paypal button.
The problem is that I can't figure out how to center the button? I've tried adding the following:
<div align="center"> form code here </div>
No dice. I've even tried adding the center tag before the form.
The site code (simple html and css file) can be downloaded here:
www.kensandbox.info/centerthis/centerthis.zip
My guess is that one of the other CSS elements is overriding my change.
What am I missing?
Thanks
there is a float:left in form input, form .btn inside mycss.css
Add float:none to that input if you want to override.
Without looking at your code I would say the best way to center a div is usually make sure it's displayed as a block element (should be by default) and that its width is specified; then finally apply margin: auto.
e.g.
<div class="container">
...
<div class="centered-element"> form code here </div>
...
</div>
where
container {
width: 200px;
}
centered-element {
width: 150px;
margin: auto;
display: block; /* to make sure it isn't being mucked up by your other css */
float: none; /* to make sure it isn't being mucked up by your other css */
}
Edit:
I say to do it this way because, like I now see someone has commented, <div align="center"> is deprecated and so is the <center> tag. To expand, this is because your HTML should only be used to create the structure and semantics of your web page, and CSS should be used for the presentational aspects of it. Keeping the two separate as best as you can will save you a lot of time in the long run.
Also it's best to design your CSS in a way where you shouldn't have to set display: block; on a div (because a div is already a block element) and your shouldn't have to unset a float by using float: none;. For more on a good way to do that, improve your workflow, save yourself some time, and generally be awesome, check into object-oriented CSS a.k.a. ooCSS
I found the answer and I want to thank the two individuals who took the time to answer.
The thing I didn't understand is how to look at a web page and see what CSS code was driving the formatting.
Some research lead me to a Chrome plug in named CSSViewer. Using this plugin and the information from the answer I was able to identify a float left css element that I simply had to change to a float center.
Thanks again for the help.
This is hard to sum up in a title, so forgive me.
Basically, here is what I have:
a img {
/ * style * /
}
However, I want to affect the a tag in this instance. Is there any way to do so in CSS without resorting to JavaScript wizardry?
Unfortunately the cascading in CSS only goes one way. From your example, I'm guessing you are trying to do something like this:
<a><img src="icon.gif">Hello</a> <!-- This A has a taller line height for the icon -->
<a>Hello</a> <!-- This A is normal -->
Most developers would accomplish it by simply adding a class.
<a class="icon"><img src="icon.gif">Hello</a> <!-- This A has a taller line height for the icon -->
Even better, use that class to make the icon a background image and add padding.
<style type="text/css">
a.icon { background:18px left center no-repeat; line-height:18px; }
</style>
<a class="icon" style="background-image:url('icon.gif');">Hello with icon</a>
Put all your icon images into classes too and you have some pretty clean HTML!
You want to apply styles to the tag only if it has an image correct? In short, using straight CSS there is no way to do that.
EDIT
BUT, if you wanted to do this w/ jquery you could do it like so:
$('a').has('img').addClass('hasImg');
then use .hasImg as your hook
a.hasImg{background:lime;display:block;height:200px;width:200px;}
Here's a demo on JSBin I put together (view source): http://jsbin.com/owafi4
CSS selectors can not ascend. It is a limitation of the language.