I am trying to remove ads from my profile on a website, so I don't have access to the original css or code, but there is still the ability to change the css code by editing the profile.
For example I have added these lines:
<style type="text/css">
.topad {display:none; visibility:hidden;}
#buyers_ad {display:none; visibility:hidden;}
</style>
which removes an advertisement from the top and right side of the page.
The problem is that there is an iframe that points to an advertisement. Is it possible to change the src that the iframe points to using css, but not html? The iframe does not have a class or id.
It's an iframe inside a div, if that is helpful.
You can make iframe hidden using css
Html:
<div id="somediv">
<iframe .... />
</div>
css:
<style type="text/css">
#somediv > iframe { display : none}
</style>
Or you can also change src of iframe using Jquery / JS
Html:
<div id="somediv">
<iframe .... />
</div>
Jquery:
$('#somediv iframe').attr('src','http://google.com');
Hope It Helps You.. :)
Use jQuery thats the better option to hide
Related
I've got a div block that uses a parallax scroller to display parallax wallpaper:
<div class="parallax-window" data-parallax="scroll" data-image-src="whatever.jpg" id="MyElement">
<!-- lots of nested HTML -->
</div>
I saw a neat trick for using hidden to hide a div when there is no JavaScript, but I don't want to hide all the nested blocks here. Is there a clean way to do this, other than setting the class to a simple wallpaper class then using document.getElementById("MyElement").className = "parallax-window"; to override?
try the <noscript> tag:
<noscript>
<style>
div{
background-image: url("image.png");
}
</style>
</noscript>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript
I have a webpage that is a template from a company that design it for us and we have an admin panel which we can add content to the page.
This normally works fine but there is a specific page that doesn't look great. It has a lot of text on it and we want the background to be a dark brown colour, a gold border around it and the text in bold.
When we are adding content we create a content block and in this, we can add html, I have recently done a very basic course in html. I know normally the page will link to a CSS file which will provide the page style. But I also know you can add the <style> tag in and then add CSS directly into the HTML.
This is maybe a long shot but does anyone with any knowledge of template website know if it would work to add the css in this way just to change the background colour and give it a border? I presume I would need to use something like google dev tools to find out what the section names are to identify them in the CSS? According to dev tools the section I want to modify looks like this.
<div id="content">
<div class="cs-content-row">
Thanks
If you have very limited control, e.g. you can't add a <style> tag to the <head> or use a custom stylesheet, you can also resort to using inline style, and style individual elements using the style attribute.
See example of use;
<div style="background:brown; border:1px solid yellow; color:white; font-weight:bold; padding:30px;">Your text here</div>
The pros are it overrides the default styling easily, but the downside is you have to re-write code for every element you want to custom style, and if you changed your mind about the colour, you'll have to edit every instance it was used..
You mean normal css into html like this?
<html lang="en">
<head>
<style>
body{
background:red;
}
#content{
width:200px;
height:200px;
background:blue;
}
.cs-content-row{
width:100px;
height:100px;
background:green;
}
</style>
</head>
<body>
<div id="content">
<div class="cs-content-row">
</body>
</html>
You can use the style tag but you have to add it between the <head> tags of your page.
If your admin panel allows you to update that part of HTML you can do something like that :
According to your HTML description
<head>
<style>
#content{
/* css targeting the div with id attribute equals to 'content' */
}
.cs-content-row{
/* css targeting the div with class attribute equals to 'cs-content-row' */
}
</style>
</head>
I need to create a little html code that I will use in sharepoint in script editor. The idea is that I have some report from Microsoft BI in iframe (changed the address in code below) and it works fine. But I want to cover the "share buttons" in the bottom right of the site, so it can't be shared. The iframe should fill the whole WebPart in sharepoint, so I tried to allign the image simply to bottom right corner, but it doesn't seem to work. Any ideas?
<html>
<head>
</head>
<body>
<iframe src="https://www.google.pl/?gfe_rd=cr&ei=x5UEWO-yGaOh8welvY2IAQ" width="100%" height="700">
</iframe>
<img src="logo.jpg" align="bottom" align="right">
</body>
</html>
Ok, I've finally got it working. The "TOP" variable is static, it's the height of the displayed website minus the height of the image itself. Here is the code:
<html>
<head>
</head>
<body>
<div style="height:750px; position:relative">
<iframe style="border:none; width:100%; height:700px; z-index:1" src="website.com"></iframe>
<img style="top:663px; right:0px; position:absolute; z-index:9" src="testbar2.jpg">
</div>
</body>
</html>
The align attribute of <img> is not supported in HTML5. Use CSS instead.
img {
float: right;
}
I have two different div's I want to make one of them invisible and after clicking the link or button I want it to be visible and the other invisible. I don't know javascript so I know only HTML and CSS. Can I do that with only using HTML&CSS and How can I do that? Thanks.
You need to use jQuery for this.
Just add this line to your head tag:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
If your HTML is like this:
<div id="div1">This is div1</div>
<div id="div2">This is div2</div>
<button id="button1">Toggle divs</button>
CSS:
#div2 {
display:none;
}
At the bottom of your page, just before the closing tag </body> add the following JavaScript:
<script>
$("#button1").on("click", function () {
$("#div1, #div2").toggle();
}
</script>
Here's a link for a similar example:
http://api.jquery.com/toggle/#entry-examples
I am working with a django setup HTML and I want the first part of my html page to be determine by the first CSS stylesheet. The rest I want to be controlled by a different one. Is this possible. I put an HTML CSS link (below) above the code I want it to control. It doesn't seem to work and it looks like it gets applied to all the HTML. Is there a way to specify the CSS link to just the code I want.
<link href="folder/to/css/style.css" rel="stylesheet" type="text/css" />
Why don't you use different classes for the elements below? Also make sure you understand CSS specifity
No, you can't do that. You could use an iframe that has its own CSS.
You could use a specific section class, and link to both css stylesheets, for example:
<!-- Represents a first CSS file. -->
<style>
.section1.customclass
{
background-color: red;
}
</style>
<!-- Represents a second CSS file. -->
<style>
.section2.customclass
{
background-color: blue;
}
</style>
<div class="section1">
<input type="text" class="customclass" />
</div>
<div class="section2">
<input type="text" class="customclass" />
</div>