I've managed to manipulate most of the twitter widget's css but I can't seem to remove the black border around the whole widget and there seems to be a much thicker border on the bottom of the widget which I also want to remove. I'm using Chrome to test this.
Here is the jsfiddle.
The "border" is actually a background color which is shining through because you have a 1px padding on .twtr-bd, so the background color of .twtr-bd is not erasing the black background from the parent element.
Either remove the background color, or remove the padding.
give backgeound-color:white like this:
#twtr-widget-1 .twtr-new-results, #twtr-widget-1 .twtr-results-inner, #twtr-widget-1 .twtr-timeline {
background:#FFFFFF !important;
}
Related
I have been trying to remove this border that is on the default input in html. I have tried removing border, padding, making border transparent, ect but I cannot seem to change it. How can I remove it?
If you mean the border that appears when the input is focused :
input:focus{
outline: none;
}
border:0 should do the trick, but if it isn't working try disabling the outline by using outline:none
Or you can disable the appearance e.g -webkit-appearance:none
Also try applying a transparent color to the border, border-color:transparent.
One of this should do the trick.
I'm trying to remove the white-background of wordpress Article (page), NOT the body background, the element's background. I would that the article text has no white background, but only the body background.
I've tryed so many "external css" but no one worked for me.
article.post-1 { //just an example, I've tryed many other elements
background-color: transparent;
}
https://i.imgur.com/gJtqjpP.jpg You can see the white background behind the TEXT, i would remove that white and see the TEXT directly on the background image. It's in the homepage.
I achieved that by adding a !important after my css code:
element {
background-color: transparent !important;
}
First of all you should inspect the code of the page to find out the class where the background is applied, then you can set background: transparent (and not background-color, because it only works with color values).
Here is a sample code for the html and css:
HTML
<nav>...</nav>
<div class="row"></div>
CSS
.nav{
margin-bottom: 10px;
}
I want a gradual fading effect in the bottom margin of the navbar.
Please help. What css property needs to be set to do this?
If your nav background is a solid color (or the "faded" part is one color), you could add an ::after pseudo-element with a background gradient to simulate the color fading out.
Here is a demo of how to do this.
If you want to add a fading effect on CSS, you can play with opacity property going from 0 to 1. Then, you have to couple this property with another property called transition. To create a transition effect, you must specify two things:
the CSS property you want to add an effect to. In your case, it's opacity.
the duration of the effect
So, you can try a CSS like this to change the opacity for your nav :
.nav
{
opacity : 1;
margin-bottom: 10px;
transition : opacity 2s;
}
If you know about JQuery, there are special functions to do a fading in/out effect.
Hope it will help you.
I have links on my page which are internal, for example:
/page#h1
/page#h2
When you click on one of these links, in Chrome you see a blue border around the link like follows:
The additional space the border surrounds above the text is caused by the rule:
.jumpTarget:before {
content:"";
display:block;
height:90px;
margin:-90px 0 0;
}
Which compensates for a fixed position top horizontal menu.
How do I remove this blue border? I've tried the CSS selector :target to specify a red border but this gives me:
You must use style rule .jumpTarget:active {outline:none;}
I've created this hexagonal navigation to fit within a website.
http://www.flickr.com/photos/14577801#N00/11202239254/
I'm wanting to know what would be the best way to go about creating the structure of the navigation in html and css. Where the links are within the white hexagons, I would like hovering over these links to change the white background to a colour. I've tried to do this with using background images, but haven't quite got there. The surrounding coloured hexagons I've been using as a whole background image for the navigation.
I found this on the web: http://jtauber.github.io/articles/css-hexagon.html , which I think could be great to use, but I thought there must be a way to use background images.
Thanks, Tim.
The color of an element (in this case, a hexagon) can be changed on hover with css. If we add this to the style properties in your css-hexagon tutorial:
.hex:hover {
background-color: blue;
}
.hex:hover:before {
border-bottom: 30px solid blue;
}
.hex:hover:after {
border-top: 30px solid blue;
}
The hexagon will change color when the cursor hovers over it, which you can see in this jsfiddle.
You can find good documentation of the CSS :hover pseudo-class here: https://developer.mozilla.org/en-US/docs/Web/CSS/:hover