FriendFeed offers a widget with some CSS customization possible. But it seems you can't remove the border (the blue big one around all cotent)? The widget has a URL like
http://friendfeed.com/embed/widget/FOOBAR?v=2&num=30&hide_logo=1&hide_comments_likes=0&hide_subscribe=1
where FOOBAR is a user name.
In the CSS try for v3:
#friendfeed.widget { border: 0 !important;}
or this for v2:
.friendfeed.widget { border: 0 !important;}
If you also want to remove the logo at the top, add:
#friendfeed .logo img { display: none; }
Related
I created an application using Vue.JS and Vuetify. The layout is based on the Google Contacts layout. I am using both a toolbar and a navigation drawer.
I would like to be able to print the content from the browser without printing the toolbar and nav drawer. I created the following CSS class:
#media print {
.no-print {
display: none;
}
}
I applied this class to the toolbar and nav drawer. When I try to print the page, these elements don't show up in the print preview, which is good, but the content does not stretch to the entire page. Looks like the toolbar and nav drawer space is still reserved for these elements.
How can I remove this space reservation?
Space is reserved with padding on v-content, so you'll have to add
.v-content {
padding: 0 !important;
}
to your media query.
Elaborating on Kael's answer, I added this to my my main App.vue compononent:
<style scoped>
#media print{
.v-content {
padding: 0 !important;
}
}
</style>
The following did the trick for me on the layout page.
#media print {
.v-main {
padding: 0 !important;
}
}
Hopelessly novice, but dedicated.
Using Wordpress.
I'd like to be able to do this:
http://www.ericryananderson.com/
On hover, the images turn greyscale and captions appear.
All is smooth.
My initial hopes of finding a easy plugin that switches images upon hover has been crushed.
All help is greatly appreciated.
Arvid
If you can simply add plain CSS and HTML code to your site, then this is the structure:
HTML:
<div class="cool-card">
<img src="whatever.png">
<h2>Whatever text you want to show</h2>
</div>
And then, in CSS:
.cool-card {
/* Add here any custom style (width, height, etc.) to the card */
}
.cool-card > img {
width: 100%;
height: 100%;
}
.cool-card:hover > img {
filter: saturate(0); /* Makes the image black and white, by setting saturation to 0 */
}
.cool-card > h2 {
/* If you want to change the look of the text, do it here */
display: none;
}
.cool-card:hover > h2 {
display: block;
}
If you can't, I'm sorry, but I've tried :)
I would like to replace horizontal line rendered by default by the <hr> tag with three asterisks (horizontally centered). If possible, I want to achieve this with pure CSS, specifically:
I don't want to touch my markup, there should be just plain <hr>, no helper divs or anything like this (because I'm styling Markdown files);
no background images;
no Javascript.
First I tried:
hr {
width: 0;
}
hr:before {
content: "***";
}
and it almost does the trick, but I want it centered, and have no idea how to center it.
Browsers display <hr>s using borders, so:
hr {
border: none;
}
hr::before {
content: '***';
display: block;
text-align: center;
}
Slap a text-align:center on your psuedo-element.
I'm experiencing some difficulties understanding what is happening here:
The green color and hover effect is being applied to the add to cart button on the products list page
http://www.jkadengeart.com/gallery/
but is not being applied to the add to cart button on the single product pages
http://www.jkadengeart.com/gallery/p...n-prints-only/
Also, when I do float:left, the button still remains flush right.
Your help is very much appreciated.
Issue 01
In gallery page you are giving green color exlusively for #mp_product_list input.mp_button_addcart
But there is no div with the same ID in single page.
So, Add or remove the ID
like
input.mp_button_addcart {
...
}
or
#mp_product_list input.mp_button_addcart,
#single_container input.mp_button_addcart {
...
}
Issue 02
Float left is not working because you have given float:right to form
form.mp_buy_form {
float: right;
}
Change it to left
form.mp_buy_form {
float: left;
}
Like this please add below selector position:absolute;
css
#mp_product_list input.mp_button_addcart {
margin: 0 0 50px;
position: absolute;
}
.mp_grid .mp_product_detail {
margin-top: 63px;
vertical-align: top;
}
Hi I'm using wordpress and i am using the gallery shortcode, but the problem is that my images have borders around them.
I set the padding to 0 and i set the border to 0 in css but my thumbnails still have borders around them.
Here is the css ---> https://gist.github.com/mihadaiko/5011743#file-style-css
and here is what it looks like:
you need to use css
img { border: none; }
Try this
a img { border: 0 none; }
Also added your code in jsfiddle here: http://jsfiddle.net/HkTDK/2/ and there are no borders on images, so it might be inherited from somewhere else.
Another solution would be to add:
#gallery-1 a, #gallery-1 img { border:0 none !important; }
If this doesn't work, it means that border is a background image, so just add background: none !important too to the above line
Thanks a lot!
works perfectly for Wordpress if you are using Elementor.
If you are using several galleries (1,2,...,n) u need to add to your Custom CSS:
#gallery-1 a, #gallery-1 img { border:0 none !important; }
#gallery-2 a, #gallery-2 img { border:0 none !important; }
...
#gallery-n a, #gallery-n img { border:0 none !important; }
and so on.