When I do inspect element on my wordpress page on the left of my screen I have this code,
<header class="main-header" role="banner">
on the right of my screen I have this code
background-image: url('http://chuaquanam.ca/wordpress/wp-content/uploads/2013/08/cropped-TopMenu11.jpg');
Can someone help me in what *.css file the background-image code is located? I looked at all css files like style.css but I could not find it.
Inspecting the header element shows that the CSS for header.main-header is inline. This means, it is generated by WP and embedded into the page, not into a CSS file. Once generated, you can see the code by viewing the source of your blog page:
<style type="text/css">
header.main-header
{
background-image: url('http://chuaquanam.ca/wordpress/wp-content/uploads/2013/08/cropped-TopMenu11.jpg');
width: 980px;
height: 200px;
}
.. which is on line 67 onwards.
The way for you to change your background-image is via the WP menu, if you select Appearance > Header, you can upload a new image, which will populate the width and height based on the image you upload.
If you want to edit styling other than these properties (like positioning, floating, etc.,) you can find the other header.main-header styling in style.css, line 253 onwards.
Related
I'm trying to reduce the height of a footer in my WordPress Website.
Apparently (check the picture linked) the style is directly in the div but I failed finding it in my WP files.
Can anyone help me with this?
Capture of the html inspector
When dev tools show styles like this. Its an indicator it's being controlled by JS.
element.styles{
position: relative;
height: 122px
}
As your JS is loading after your css (as it should be), you need to override the property after JS is called. This is one of the few times you should add !important to your css. So to override the JS height you need something like this
.site-footer .widget-area{
height: 400px !important;
}
In Spree 3.1 Standard Themes (out of the box)
I tried to change background image.But not work. Perhaps the path is wrong. Help need.
Here what I did.
Upload image to be /app/assets/images/NewBackGroundImage.png
Add css in vendors/assets/stylesheets/spree/frontend/custom.css
CSS:
.spree-header{
background-image: url("/assets/images/NewBackGroundImage.png");
background-size: cover;
margin-bottom: 10px;
}
Here my inspect of the current page
This part is my attached screen shots for my comment of the answer below.
At the inspect screen it clearly display error 404 (Not Found)
Tried change to use asset-url then
SCSS:
Then Change my custom.css to custom.scss
And this is the inspect shot NOW IT WORK
As I can see, your page doesn't use your styles at all. Are you sure the div tag has the class "spree-header". Because in your browser it only has id "spree-header" and nothing about the respective class. Try to replace it from .spree-header to #spree-header. If there might be confrontation between styles, then you can always try the usage of !important tag: url(...) !important;
If the folder "vendors" is in the "app" folder, then you can use the relative path url("../../../../../assets/images/NewBackGroundImage.png") as well
I've noticed that most of the websites now "somehow" disable viewing some of the images used in their template, so I'd like to obtain this same result:
I thought instead of using the tag <a>with <img>, I put a div and set the "background" property as an image yet it's still viewable in the browser!!
Any ideas?
This is not disabling the images, this is done by using images as backgrounds in CSS and not as a normal img tag like:<img src="your-image.jpg" />. Here's an example how this is done:
HTML
<div class="randomClass"></div>
And the CSS goes like this:
.randomClass {
background-image: url('http://i.ytimg.com/vi/1WmaBpkGjXk/mqdefault.jpg');
background-color: #cccccc;
width:350px;
height: 180px;
}
On the Jsfiddle link I provided above if you right click on the 1st image you have the option to open the image on a new page or the option to download it. On the second one you don't have this options by right clicking on it, but still these images can be downloaded in other ways.
Basically, there should be a checkbox image next to each service, loaded from the child theme's style.css using the "content" property.
This is what the css looks like from the child theme's style.css:
content: url(../clos/images/checkboxes.png) left top no-repeat !important;
Except the image is in that folder and in a child theme images folder too (tried to load it from there as well).
What am I doing wrong here?
URLs are case sensitive, so you should try this:
http://www.closlandscaping.com/wp-content/themes/Clos/images/checkboxes.png
It means you need to fix your css like this:
content: url(../Clos/images/checkboxes.png) left top no-repeat !important;
I am developing a website on wordpress using the theme "Virtue". I have added custom css to change the appearance/behaviour of some elements.
Here is a link to the site: http://deepdive.ma/test5182/
When I open the site, the custom css is not accounted for.
To take a specific example: the menu should be in a light blue color (#e7ecf1), but it is white.
When I use DOM inspector:
The content of my custom css is included in head, including css for the class .headerclass;
But the styling element 'header class="banner headerclass" role="banner"' does not refer to it. It only refers to elements.style, then to external style sheets (default.css; virtue.css; ...).
It's probably something stupid but I really can't find the problem. Anyone can help with this?
You're not properly closing .home .page .wide. You need the closing } in Line 32.
.home .page .wide{
width: 80%;
max-width: 700px;
left:auto;
right:auto;
}
A suggestion: why not customize the theme's CSS instead of dropping the new CSS inline in the HTML document. It'll avoid major headaches.