Change background of iframe - css

Website goo.gl/4nQia8
How do i remove the black background in the widget called whos online.
I have spent sometime searching for that css but i cant find it or manipulate it.
I have changed everything that is called background in my css without anyhelp.
Also tryied to add style to the iframe didnt help.
allowtransparency="true" style="background: none;"
I want 100% transperent i have tested everything that i can.

This piece of code is affecting your iframe:
<style type="text/css" id="custom-background-css">
body.custom-background { background-color: #161522; }
</style>
To remove the colour from the area you want, you could create a 'wrapper' div for the first two columns, and apply the custom-background-css only to the wrapper div as opposed to the body and then the entire body would not be affected, only the sections you want. Hope this helps.

Solve it!
In the actual .php thats why i could not find it.
<table style="width:361px;background:none;"
<tr style="width:361px;background:none;"

Related

How to override element.style in Wordpress navigation bar (menu)?

First of all, a link to my site: http://jakubplech.pl/.
You can see a grey, centered horizontal menu in there. If you look at it, you'll get:
<nav id="site-navigation" class="main-navigation position-default fixed" role="navigation" style="width: 1349px;">
I want nothing more that to change that width to auto, but it is an element.style of the theme and I have no idea how to refer to it (every change in custom CSS I did so far started with a dot). I read that i could use an !important trick, but since I don't know how to refer to it, it is impossible for me.
I'm dying to know the answer for this - if anyone could help me it would save me hours of frustration. Thanks in advance!
You should be able to use its class like so:
.main-navigation {
width: auto !important;
}

Change css background image depending on site

Is it possible for css to change background image depending on which site we are?
For example, when I am on a index.php, I want to see images/index.png, and when I am on first.php I want to have /images/image.png.
You can change the background by leaving it blank on css.
<style>
body
{
background-image: url(/images/index.png);
}
</style>
And use that on every webpage.

repeatable background image using bootstrap 3

i have little issue with repeating background image using bootstrap framework, but i'm quite beginner. I tried many ways already and nothing works.
Can u help me with that please ? I've tried for example that :
<style>
html, body {
background: url("img/bg-pattern.png") repeat;}
</style>
Your path is probably incorrect. As far as I can see, bootstrap has a different folder structure than what your code suggests. Try this:
body {
margin: 0;
background: url("../img/bg-pattern.png") repeat;
}
I'm unable to reproduce your issue on JSFiddle. For this reason I can only presume your image path is invalid.
In specifying img/bg-pattern.png, you're pointing to the bg-pattern.png file contained within the img folder contained within the same folder as your CSS. This assumes a folder structure of:
img
myHtml.html // Where your style element is included
Make sure your "img/bg-pattern.png" is present in the same folder where your file is present
else give the absolute path of the image.
Try using FireBug, maybe you'll see that the <body> tag is much smaller ( in height ) than you think.
I've moved my background: ... from the <body> tag to the actual <div> that contains the entire content ( which grow dynamically vs the <body> ) and the background is repeatable there ...

change image when hover over, using CSS

<!DOCTYPE html>
<html>
<head>
<style>
.main {
background-image: url('a.jpg');
}
.main:hover {
background-image: url('b.jpg');
}
</style>
</head>
<body>
<div class="main">
</div>
</body>
</html>
When I load the page, my a.jpg didnt appear at all, hence no hover effect
Is it something wrong with my code?
http://jsfiddle.net/ZH9EL/6/
Nothing is wrong with your code. The first image is being redirected to the main website so you don't have an image being loaded. You will have to host it locally. I used a different image and it works.
No there is nothing wrong with your code, it could work, but I believe it is risky to use 2 images, if 1 is not loading it will not work...
You'd like to use two images but if hover image is taking to long to load or just not loading at all it will not work very well..
You might want to try Alois Mahdal's answer: https://stackoverflow.com/a/19967062/3217130 please read their reply..
Your css should be something like:
<style>
#main {
width: **Yoor-width-in-pixels**.px; height: **Yoor-heigth-in-pixels**px;
background: url('a-b.jpg') no-repeat left top;
}
#main:hover { background-position: -Yoor-negative-width-in-pixelspx 0px }
</style>
This will work and will load normal and hover at the same time so you wont face problems with dns or server delay and other problems that could make pages look ugly if images are not loaded...
Please try Alois Mahdal's answer, this will work for you, if you don't understand how to create this for your images (a-b.jpg and new smaller but better code) then I would like to tell you how to do this with your images and classes and the result you need.. I create sprites with Paint .NET or I use spriteme.org to optimize CSS on running websites you can copy new css and images if you're using spriteme.org they will be created on the fly. There are lot's of ways to create or edit images...
I hope my answer was helpful to you,
Happy coding

Why wordpress add inline CSS style to images automatically?

I have placed images on wordpress page templates without any inline style attribute but its seem wordpress automatically add style tag with width and height set to zero.
<img src="wp-content/themes/ecoblog/images/hiw-image-1.png" style="width: 0px; height: 0px;">
Sometimes height is set to its original dimentsions and sometimes after complete refresh its values are zero.
What is causing this?
Please help me out. Thanks in advance.
Maybe it is caused by incorrect CSS. Zero values should not have dimensions, like px or pt. Like this:
<img src="wp-content/themes/ecoblog/images/hiw-image-1.png" style="width:0; height:0;">
this is because of template CSS styles are override your image style properties ..,the easy way is to wrap your image content and give div id and put your style code in template CCS file
inside(style.css)
it works as:
.class{
width:20px !important;
height:20px !important;
}
or if you want to remove Inline CSS completely , This inline css may be in .php files or in.js files.
You can search style in whole project , it is easier to search if you are using netbeans code editor.
Hope it may resolve.

Resources