i am currently putting together my Uni website and i am adding the Twitter Timeline widget. I have managed to remove that back ground but having trouble trying to remove the 1px border around the widget. Any help??
<div style="height: 350px; background-color: white; position: relative; padding: 0px;"><a class="twitter-timeline" href="//twitter.com/handle/my-list" data-dnt="true" data-widget-id="340404022915784704" data-chrome="noheader nofooter">Tweets from #edgehillsu</a> <script type="text/javascript">// <![CDATA[ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); // ]]></script> </div>
This is the code, thanks in advance.
http://esu.unioncloud.org/
No css hacking is required to remove the border, you can use Twitters 'Client Side Options'
You just need to add the following attribute to the <a> tag in the widget code: data-chrome="noborders"
For example:
<a class="twitter-timeline" href="https://twitter.com/userName" data-widget-id="0000000000000" data-chrome="noborders">
Source: https://dev.twitter.com/docs/embedded-timelines
The border you see is inside iframe, so you have to remove border inside iframe.
.customisable-border {
border: medium none;
}
This removes border.
Mauro
Add this in you css file:
#twitter-widget-0 {
border: 0;
}
Or in your html page:
<style type="text/css">
#twitter-widget-0 {
border: 0;
}
</style>
Or inside your script:
$("#twitter-widget-0").css("border", "0px");
Related
I want to add a footer in all the pdf pages generated from HTML when printed, but only for the first page, I want to add a section below the common footer. I have to do it using only HTML and CSS.
<head>
<style>
.footerLeft {
position: running(footerLeft);
}
#page {
margin-bottom: 40%;
margin-top: 5%;
#bottom-left {
content: element(footerLeft);
}
}
</style>
</head>
<body>
<div class="footerLeft">
...content
</div>
</body>
I want to add another div below the "footerLeft" div class only for the first page. I am using this thymeleaf for the final compilation, would want to know if there is any property that can help me achieve this apart from plain HTML & CSS. Can somebody please help me with this problem?
Here I'm trying to change the CSS variable's value (visibility) when the button is clicked on (using :focus) to show/hide the images, without using Javascript.
CSS
img {
width: 200px; height: 200px; margin-left: 40px; margin-top: 30px;
}
:root {
--c1-vsb: none; --c2-vsb: none;
}
a.c1-imgs {
visibility: var(--c1-vsb);
}
a.c2-imgs {
visibility: var(--c2-vsb);
}
#C1:focus {
background-color: red;
--c1-vsb: hidden;
}
#C2:focus {
background-color: red;
--c2-vsb: hidden;
}
HTML
<html>
</head>
<body>
<div id="left-panel">
<button class="lp-btn" id="C1">SEAL 1</button><br>
<button class="lp-btn" id="C2">SEAL 2</button><br>
</div>
<div id="right-panel">
<a class="c1-imgs"><img src="https://files.worldwildlife.org/wwfcmsprod/images/HERO_harbor_seal_on_ice/hero_full/87it51b9jx_Harbor_Seal_on_Ice_close_0357_6_11_07.jpg"></a>
<a class="c2-imgs"><img src="https://www-waddensea-worldheritage-org.cdn.gofasterstripes.download/sites/default/files/styles/inline_image_full_width/public/20-11-09_habour%20seals%20report_TTF_5200.JPG?itok=YZs9c_dH"></a>
</div>
</body>
</html>
But for some reasons, when I clicked on the button to set visibility to hidden, the images do not get hidden away.
Previously, I tried hiding the images with css pseudo classes and display:none, z-order... but got stuck. In the end, I thought this should have been the simple way out.
Could you suggest a solution to this problem I'm having? I'm not too sure if this is the correct approach.
Thank you!
When you declare #C1:focus { --c1-vsb: hidden; }, the new value of --c1-vsb only applies to #C1, not the entire HTML document.
As MDN states: "[...] the selector given to the ruleset defines the scope that the custom property can be used in".
With css, you can only Show/hide with mouse handle. You don't change 2 state (Show/Hide) when click into button.
When I use an img tag inside of an a tag, these little lines at the bottom show up. I've tried several css properties to remove them and couldn't find one that did the trick.
Relevant html:
<a href='https://github.com/'>
<img class='ContactLink' src='Images/Icons/GitHub.png' alt='GitHub'>
</a>
<a href='https://twitter.com/'>
<img class='ContactLink' src='Images/Icons/Twitter.png' alt='Twitter'>
</a>
<img class='ContactLink' src='Images/Icons/Gmail.png' alt='Email'>
CSS:
.ContactLink{
height: 50px;
width: 50px;
border: 0;
}
///Add this code in CSS file
a {
text-decoration:none;
}
use normalize css or try this
a,a:focus,a:hover,a:active{
text-decoration:none;
outline-width: 0;
}
img {
display:inline-block;
}
I will suggest to check the image files using any tool like photoshop and see if there is any transparent pixel there for that icon. Also try to keep the dimensions of all the three icon exactly same. If required edit the image accordingly.
I want the navbar to be at the top of the page. (Blogger, Simple Template).
As you can see, I switched the Blogger navbar to "Off".
Add this css code to blogger, either from Layout > template designer > Advanced > Add CSS
or
add directly to Template > edit HTML > b:skin just before ]]>
.navbar {
height: 0;
border: 0;
}
body .navbar{
height: 0;
}
Fix by html (add style="height:0")
<div class="navbar section" id="navbar" **style="height:0"**>
Fix by css:
body .navbar {
height: 0;
padding: 0;
margin: 0;
}
CSS-only fix
You have a div with an ID of navbar (<div class="navbar section" id="navbar">) that is empty and is taking up that space.
If you remove the div or set display: none; on the #navbar div, that space will be removed. Example:
#navbar {
display: none;
}
You will also need to change the margin of .content-outer, as that will create space too (the !important will enable this style to override any others applied to the element). Example:
.content-outer {
margin-top: 0 !important;
}
HTML-only fix (for .navbar)
(Now that the template screenshot has been posted), you can just remove the following code from the template as shown in the screenshot:
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>...</b:widget>
</b:section>
I'm working on adding some icons to my company's website, but I'm having trouble getting them to link to a page.
I'm using an image sprite and CSS to change the image on hover. If you click here and look under Services We Offer you can see the image hover.
I'm using a div to do this, with this code:
<div class="video-box"></div>
And in my CSS:
.video-box {
width: 184px;
height: 222px;
background: url("http://bluestarmultimedia.tv/wp-content/uploads/2015/01/rollover-video-2.png") no-repeat scroll left top transparent;
display: block;
}
.video-box:hover {background-position: -184px 0px;}
When I add a link like this, it doesn't work.
<div class="video-box"></div>
How can I get the images to link and keep the roll over?
These are some of the scripts that the website use. I think you will need to import the required JQuery scripts that are used in this website.
<script type='text/javascript' src='http://bluestarmultimedia.tv/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://bluestarmultimedia.tv/wp-content/plugins/revslider/rs-plugin/js/jquery.themepunch.tools.min.js?ver=4.6.5'></script>
<script type='text/javascript' src='http://bluestarmultimedia.tv/wp-content/plugins/revslider/rs-plugin/js/jquery.themepunch.revolution.min.js?ver=4.6.5'></script>
<script type='text/javascript' src='http://bluestarmultimedia.tv/wp-content/themes/x/framework/js/dist/site/x-head.min.js'></script>
<script type='text/javascript' src='http://bluestarmultimedia.tv/wp-content/plugins/x-shortcodes/js/dist/site/x-shortcodes-head.min.js'></script>
Just test your code in Fiddle and it worked fine, maybe you need to specify more about what you really face with.
Or you could make div with link function by using span and z-index.
HTML
<div class="video-box">
<span></span>
</div>
more CSS
.video-box span {
position:absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
I think there is no problem with your code.It is working as you want.With This
<div class="video-box"></div>
And this
<div class="video-box"></div>
Here is JSFIDDLE