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 :)
Related
I want to change the logo and main menu in the header on this page only:
https://www.maisondefemmes.com/galentines-day/
I've tried updating the css and only managed to edit the search and cart colours.
I've tried using both content and background-image, as well as using logoimg bg--dark rather than #logo but to no avail.
.page-id-3055 #logo {
content: url(https://www.maisondefemmes.com/wp-content/uploads/2019/01/mdf-retina-logo-red.png) !important;
}
I want the logo and main menu to be #b50c3f but they don't budge. I've managed to change Search and Cart.
The Logo is a html img tag and you can't change it that way. The content attribute only works for pseudo elements. One solution would be the following:
.page-id-3055 .logolink > img {
display: none;
}
.page-id-3055 .logolink:before {
display: inline-bloc;
content: url(https://www.maisondefemmes.com/wp-content/uploads/2019/01/mdf-retina-logo-red.png) !important;
width: 100%;
height: 50px;
}
You can detect url with jquery and then change logo and menu by jquery css
if (window.location.href.indexOf("galentines-day") > -1) {
// do something
}
I am using a bootstrap carousel and want it to look like this
The Problem is, since I am not getting the navigation menu to look like this. Only when I delete the class 'carousel-indicators' it looks pretty much, as I want to, but then if it auto-slides the active-class of the navigation does not work. Do you have any Solution for that?
Here is my code without the class .carousel-indicators: https://jsfiddle.net/7Lta9vra/1/
I've tried like this without success:
.carousel-indicators {
all: initial;
* {
all: unset;
}
}
.carousel-indicators.carousel-indicators li {
text-indent: 0;
border:none;
background-color: transparent;
}
I am building a website with WordPress. On my homepage I want a picture grid (10 x 3) of different products, and when you hover over each picture, a caption with the product name will pop up.
I have managed to do 3/4 of it but there's this massive white space below each row. :(
I am using the SiteOrigin editor widget to insert the image, and using HTML and CSS to code the hover effects. See below for the current coding.
HTML:
<div id="pic">
<img class="hover" src="http://peacefruit.net/wp-content/uploads/2016/11/Hassaku.png" />
<p class="text">Summer Mikan</p>
</div>
CSS:
.text {
color: #000000;
font-size: 16px;
font-weight: bold;
text-align: center;
background: rgba(255, 255, 255, 0.5);
}
#pic .text {
position:relative;
bottom:80px;
left:0px;
visibility:hidden;
}
#pic:hover .text {
visibility:visible;
}
Here's the website so you can see what I've done: http://peacefruit.net
The top row has the captions, but also, the pesky gap. The bottom three rows are examples of how I want it to look (no borders or gaps between pics). All rows and individual widgets have no padding, margins or gutters and I've already adjusted the theme padding to 0 with CSS.
I'm sure it's a simple line of code I'm missing, but it's driving me crazy!
Please send help.
Try adding to your inline css for siteorigin-panels-stretch
overflow:hidden;
height:164.89px;
Hope this works.
Thanks!
In your case
the id should be unique.
So, it is better to change #pic to a class
Also, the <p> tag in your style contain padding-bottom and it will case the white space problem.
Change each pic to the following
HTML:
<div class="pic">
<img class="hover" src="http://peacefruit.net/wp- content/uploads/2016/11/Hassaku.png">
<div class="text">Summer Mikan</div>
</div>
CSS:
.pic{
position: relative;
}
.pic .text{
position: absolute;
top: 80px;
width: 100%;
visibility: hidden;
}
then it should be work.
Stylesheets for WordPress themes can have a lot of CSS bloat, so you're on the right track creating a custom stylesheet, to tackle the styling nuances you desire.
Since this is a responsive theme, it's best to begin solving this from a mobile-first perspective.
The first thing to prune is the bottom-margin: 30px; for .panel-grid-cell, like this:
.home #main .panel-grid-cell {
margin-bottom: 0;
}
The next thing is to correct your HTML mark-up. The value of pic is given to multiple id attributes. An id attribute is used to denote a unique element. The class attribute denotes a non-unique element. pic should be assigned to class attributes instead, since many elements in your layout utilize this hook value. Like this:
<div class="pic">
I'm noticing that img.hover and p.text are getting wrapped in an unnecessary <p> tag. Make sure that this does not happen in the SiteOrigin editor.
You should then prune the bottom-margin: 1.5em for paragraphs inside of the .pic divs (note the designation of pic as a class hook .pic, rather than an id hook, which would have been #pic):
.pic p {
margin-bottom: 0;
}
To get even closer, relative positioning should be used on the .pic div to ensure that the subsequent styling suggestion (position: absolute;) will take effect:
.pic {
position: relative;
}
And then, for the text that appears when hovering an image:
p.text {
position: absolute;
width: 100%;
}
The styles above will work for mobile, but your theme is responsive, and you might need to account for some styling variations with different screen sizes.
For tablets, you'd need a media query like this:
#media (min-width: 600px) {
.some-class {
some-property: some-value;
}
etc...
}
And finally, for desktop:
#media (min-width: 1000px) {
.some-class {
some-property: some-value;
}
etc....
}
Thanks everyone for your help :) After some fiddling around with the suggestions and a software update, there is no gap now!
I thought I'd post my final code in case anyone has a similar problem and it might be of some help. (Note: there are some minor style changes which differ from the original post but have no effect on how it works).
HTML:
<div class="pic">
<img class="hover" src="http://peacefruit.net/wp-content/uploads/2016/11/Summer-Mikan.png"/>
<div class="text">Summer Mikan</div>
</div>
WIDGET CLASS:
fade
CSS:
.fade {
-webkit-opacity: 0.6;
-moz-opacity: 0.6;
opacity: 0.6;
}
.fade:hover {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
.pic {
position: relative;
}
.text {
color: #FFFFFF;
font-size: 22px;
font-weight: bold;
text-align: center;
background: rgba(214, 187, 14, 0.85);
}
.pic .text {
position:absolute;
top: 0px;
width: 100%;
visibility:hidden;
}
.pic:hover .text {
visibility:visible;
}
.pic p {
margin-bottom: 0px;
}
So glad it finally works, much appreciation to everyone!
I'm working with modifying a Wordpress theme. The theme is named glare and i would like to do the following. (URL: http://tofsti.no/letsbuzz/)
Remove the background from the menu, so that only text shows. I have tried:
div.row.transparent{
visibility: hidden;
}
#navigation .nav a {
color: #fff;
font-size: 20px;
}
But the visibility:hidden; hide the menu...
What to do?
I would like to push the gallery images up (testgallery url: http://tofsti.no/letsbuzz/?galleries=test ) - a couple of px below the menu.
How to do this? I have tried:
div.row.col-listing{
top: 200px
}
Use the following CSS for the menu and it should work:
header .transparent, #navigation .nav a {
background:none;
}
Everything in your theme that has a class of .normal has a very large margin-top value (232px):
.container .normal {
margin:0; /* or add whatever value works for you */
}
question 1: Since the div contains both the text/links and the background it all disappears when visibility is "hidden".
I'm guessing there is an opacity: setting somewhere, set to something like 0.5.
Does removing the background-color value and setting the opacity to 1 work?
I have a page with lots of data, tables and content.
I want to make a print version that will only display very few selected things.
Instead of writing another page just for printing, I was reading about CSS's feature for "#media print".
First, what browsers support it? Since this is an internal feature, it's OK if only the latest browsers support it.
I was thinking of tagging a few DOM elements with a "printable" class, and basically apply "display:none" to everything except those elements with the "printable" class.
Is that doable?
How do I achieve this?
EDIT:
This is what I have so far:
<style type="text/css">
#media print {
* {display:none;}
.printable, .printable > * {display:block;}
}
</style>
But it hides everything. How do I make those "printable" elements visible?
EDIT:
Trying now the negative approach
<style type="text/css">
#media print {
body *:not(.printable *) {display:none;}
}
</style>
This looks good in theory, however it doesn't work. Maybe "not" doesn't support advanced css ...
Start here. But basically what you are thinking is the correct approach.
Thanks, Now my question is actually
becoming: How do I apply CSS to a
class AND ALL OF ITS DESCENDANT
ELEMENTS? So that I can apply
"display:block" to whatever is in the
"printable" zones.
If an element is set to display:none; all its children will be hidden as well. But in any case. If you want a style to apply to all children of something else, you do the following:
.printable * {
display: block;
}
That would apply the style to all children of the "printable" zone.
If you want to display some links etc. when in the browser, that you don't want to be printed. Furthermore you have some logos and letterhead info that only should go on the printed page.
This seems to work fine:
Example:
CSS:
#media print {
.noPrint {
display:none;
}
}
#media screen {
.onlyPrint {
display: none;
}
}
HTML:
<div class="noPrint" id="this_is_not_printed" >
<a href=links.html>
</div>
<div class="onlyPrint" id="this_is_only_seen_on_printer" >
<img scr=logo.png >
<img scr=letterhead.png >
</div>
A simple way:
<style>
.print-only{
display: none;
}
#media print {
.no-print {
display: none;
}
.print-only{
display: block;
}
}
</style>
I got here because I was curious about printing a chart generated by chart.js. I wanted to just print the chart directly from the page (with a button that does a 'window.print') without all of the other content of the page.
So, I got closer by using the technique from the answer here: Why can't I override display property applied via an asterisk? .
You have to apply the 'asterisk' to the 'body' element, not just by itself. So, using the example CSS that the OP (Nathan) added to the question, I changed it to this:
<style type="text/css">
#media print {
body * {display:none;}
.printable, .printable > * {
display: block !important;
}
}
</style>
Then adding that 'printable' class to the chart itself, as in
<canvas id="myChart" class="printable" width="400" height="400"></canvas>
Which removed all page elements on the printed output except the chart when the 'print' button is clicked (via this):
<script>
myChart.render();
document.getElementById("printChart").addEventListener("click",function(){
window.print();
});
</script>
So, perhaps this will help anyone that gets to this question via the googles.
Came across the same question recently and for me, this solution works just perfect:
#media print {
* {
visibility: hidden;
}
.printable {
visibility: visible;
position: absolute;
top: 0;
left: 0;
padding: 10mm;
}
.printable * {
visibility: visible;
}
}
Since visibility: hidden doesn't remove elements, as display: none does, it is possible to change it for desired elements separately.
Nearly all browsers support it. It might be advantageous to use the media attribute on the link tag.
Using display: none; in some of your rules would be an appropriate way to handle your situation.
I suggest to hide the element that you won't print:
HTML
<h1 class="no-print" >Welcome Just Screen</h1>
<div> I want print this section :)</div>
<div class="no-print">It's display only on screen</div>
CSS
#media print {
.no-print {
display: none;
}
}