I have looked through the site, and tried multiple things that other people said worked, but my image is still not working, the text color is working fine, so it doesnt seem to be a error when using the external CSS. here is my css. I have used the https://jigsaw.w3.org/css-validator/ to validate the text, and it seems to be correct, but for some reason it is not showing up.
body {
background-image:url('images/sg.jpg');
color:#BFB083;
}
h1{ color:#BFB083;}
a{color: #705438}
#wrapper { width: 1000px;
margin-left: auto;
margin-right: auto;
}
Thanks
Add a slash to the beginning of the background url:
background-image:url('/images/sg.jpg');
Related
I'm trying to use WP Web Scraper plugin with WP in my site www.eastwickpark.co.uk to get online ratings of the practice from another site
https://www.iwantgreatcare.org/gpsurgeries/eastwick-park-medical-practice
I used this code snippet
<img src="http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/iwantgreatcarelogo.png" />
<div>
[wpws url="https://www.iwantgreatcare.org/gpsurgeries/eastwick-park-medical-practice" query=".image-middle" basehref="1" ]
</div>
Then I used custom CSS in the themes stylesheet editor
.btn.blue,
div .btn.blue {
font-size: 16px;
padding: 8px 16px;
}
/*** Stars ***/
.sprite-icons.star-blue-outline {
background-image: url('http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/star-blue-outline.png');
width: 19px;
height: 17px;
}
.sprite-icons.star-blue-fill {
background-image: url('http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/star-blue.png');
width: 19px;
height: 17px;
}
.sprite-icons.star-blue-half {
background-image: url('http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/star-blue-half.png');
width: 19px;
height: 17px;
}
.sprite-icons.caret-white {
background-image: url('http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/caret-white.png');
width: 10px;
height: 14px;
}
I've got a problem with my CSS in that the button "wraps".
Tried to just get the star rating targeting the class "raty-rating-wrapper-readonly" part but then I get a whole load of vertical stars.
i.e. if i use
[wpws url="https://www.iwantgreatcare.org/gpsurgeries/eastwick-park-medical-practice" query=".raty-rating-wrapper-readonly" basehref="1" ]
I get a whole vertical list of 5 * images?
If I use image-middle div like this
[wpws url="https://www.iwantgreatcare.org/gpsurgeries/eastwick-park-medical-practice" query=".image-middle" basehref="1" ]
I get a weird wrap on the button.
Can't figure this out, and have to admit I'm not a CSS guru. Any insight would be gratefully received.
I've got a problem with my CSS in that the button "wraps"
The cause of the wrapping behaviour is due to <br> tag dynamically generated by WordPress. You can either fix it by following the guideline here: Stop WordPress automatically adding <br> tags to post content
The above post is a plus for you because it also removes the <p> tags that are dynamically generated. I just browsed through your code and found a lot of unwanted p tags.
Can't figure this out, and have to admit I'm not a CSS guru. Any
insight would be gratefully received.
Since you hinted for a CSS solution, a simple fix is to hide the br tags using #widgets .textwidget br { display: none; }. Alternatively #widgets .textwidget a { display: inline-flex; align-items: center } fixes the space and aligns the arrow image as the br tag is ignored inside and initial direction of flex is row.
Unwrapped button:
I am designing my theme for my website, and have no other CSS files in my folder besides template.css.
.header-wrap,
.nav-wrap,
.slideshow-wrap,
.body-wrap,
.sub-footer-wrap,
.footer-wrap {float: left; width: 100%; clear: both;}
.header,
.nav,
.slideshow,
.body,
.sub-footer,
.footer { width: 960px; margin: 0 auto;}
.header-wrap { height: 118px; background: url('files/img/background/bg-header.png')
repeat-x; border-bottom: 1px solid #6A6A6C}
.nav-wrap { height: 38px; background: url('files/img/background/bg-nav.png') repeat-x;
border-top: 1px solid #D9D9DB; border-bottom: 1px solid #B8B8BA}
.body-wrap { background: #F4EDDB url('files/img/background/bg-body.png') repeat-x;}
I don't believe that the issue is relating to that but there must be something else doing this to my webpage:
The red lines show the whitespace that is being generated for some unknown reason. I have been looking at this for a while and have not been able to find the source. I was wondering if anyone has had an issue like this before? Or someone that might be able to point me in the right direction to fix the matter. I have also tried multiple browsers and have the same issue. I have also made sure that it wasnt just an administration issue. It keeps happening no matter what. I am using Google Chrome currently.
--EDIT--
Here is my jsfiddle for those of you who asked (it still does it on there too) this has the full html
http://jsfiddle.net/RCMh7/
Add this to your css.
body { margin: 0px; padding:0px}
Or google "reset.css" and add it into your theme, the Eric Meyer one is fairly popular.
http://www.cssreset.com/
you should put margin-top:0 and margin-left:0 on this divs.
can you show on jsfiddle for us? or a link page?
Use the firebug for firefox tool to check that CSS issue . It might be occurring just due to some background image or CSS file. For all CSS linked to that theme check that theme's .info file also.
Although As per my experience you will able to get exact source of CSS by using firebug .
It may be some background kind of image or CSS effect.
Using Firebug, I finally (this has been an ongoing struggle) found the CSS that I need to edit to fix my sidebar spacing program. It's below:
#sidebar .widget {
margin-bottom: 45px;
position: relative;
}
What I want to do is edit the margin-bottom to be 5px instead of 45. However, I cannot seem to find this specific CSS anywhere. When I find it through Firebug, it's in a file called all.css, but I can only edit the style.css file through Wordpress.
I've tried changing it in the custom CSS, but that doesn't fix anything. Can someone please help me? I know nothing about CSS, and I was so excited to finally figure out what I need to change, and now I can't change it!
Check in the <head> section, if the style.css is loaded after the all.css. If not, you must provide a CSS rule that will be more precise than the one from all.css, e.g.
#sidebar div.widget {
margin-bottom: 5px;
position: relative;
}
(if the .widget is a div, of course)
I have this simple fiddle
Here's a screenshot from Chrome Canary:
What am trying to do is adding the following code
.player .controls button.play {
width: 40px !important;
height: 40px !important;
border-radius: 100% !important;
background-color: rgba(23,35,34,.75) !important;
}
but that doesn't work for, any help will be thankful.
Cheers
It has border-radius and background-color. but you can change it. here is the class:
.player .rounded-box {
background: rgba(23,35,34,.75);
border-radius: .5em;
}
note: this is in iframe so, you need to have the style sheet file.
Well after searching I've found the following:
No it can’t.
The iframe in Page A is just a container element which links to the page in iframe B. Thus iframe B will only adhere to the CSS included within its page. There is no way to override this, unless of course they share the same stylesheet.
If we could override the CSS then we’d notice more customized Adsense Ads floating about on the web.
So no luck, thanks for your time.
I have this in my HTML everything works except the background-image: 'images/Header.jpg';
Instead I see the grey color in the header but not the image.. I tried removing the grey color but still dont see the image...
#outerWrapper #header {
border-bottom: solid 1px #628152;
font-size: 18px;
font-weight: bold;
line-height: 15px;
height: 115px;
background-color: Grey;
background-image: url('images/Header.jpg');
How can I make this work.. please help.. thanks
What is the path of your CSS file and the path of the image?
You must take in account that, when using url() in CSS, the path is relative to CSS file, not to the requested page.
Imagine you have the following files:
/website/index.html
/website/templates/main.css
/website/images/header.jpg
than the CSS must be:
.style{background-image:url(../images/header.jpg);} /* Noticed "../"? */
Have a look at your page with Firebug for Firefox. You may not be loading the image properly. You will also be able to play with the css on the fly if that's your issue.
Try changing the url to '/images/Header.jpg'
Sure you need the ' char? And maybe it is case sensitive and you have a mistake in the url..
Maybe background-image:url(images/header.jpg);