Hi I am building a wordpress as per requirement of my client I need to show posts featured image only when hovering on post's title.So far I tried doing this by simple css in this way
li.wpp-thumbnail wpp_cached_thumb wpp_featured
{
display:none;
}
li.wpp-post-title:hover .wpp-thumbnail wpp_cached_thumb wpp_featured
{
display:block;
}
but this doesn't made the trick can you help me achieving this by any other process thanks in advance.
If you are trying to change the property of one element wpp-thumbnail from the event of other element li.wpp-post-title:hover, I think you have to use Javascript.
You should attach onmouseover="OnMouseIn" to the li.wpp-post-title element and write a function in java script file to handle that. Eg:
function OnMouseIn (elememnt) {
// find and assign the thumbnail object to a var
// make thumbnail visible
}
The CSS way of doing it would be setting the thumbnail as background of image of the title, using padding to align it and then displaying it on hover.
Same as setting different background for navigation items on hover.
In your CSS there seem to be a couple of dots missing and it is hard to see the logic when the HTML is not provided. However, it's not so difficult to achieve this with CSS. Just make sure that the featured image is included in the frame with the title.
Example, following your CSS:
--- HTML ---
<li class="wpp-post-title">
<h3>title</h3>
<img class="wpp-thumbnail wpp_cached_thumb wpp_featured" src="[your-ft-img-url]" />
</li>
--- CSS ---
.wpp-post-title .wpp_featured {
display:none;
}
.wpp-post-title:hover .wpp_featured {
display:block;
}
Note:
While you may, it is not recommended to add the li.
Likewise, you do not need to add all the classes of the featured image. One is enough.
If you would need to add all classes for a different reason, you need to add dots in between instead of spaces.
So, then the CSS would look as followed:
.wpp-post-title .wpp-thumbnail.wpp_cached_thumb.wpp_featured {
display:none;
}
.wpp-post-title:hover .wpp-thumbnail.wpp_cached_thumb.wpp_featured {
display:block;
}
I hope that helps. GL!
Related
Was hoping to increase the height of the google map module in Divi but my CSS code is not working and do not understand why. I am pasting the following code within Advanced > Custom CSS > Main Element of the Map Module
.et_pb_map {
height: 440px;
}
Any suggestions would be very useful!
Absolute Map for Divi Theme
Add the following CSS in the Row Settings/ Custom CSS/ Column "1" Main Element (column number is where you will put the map):
position:relative;
Add a Class to Map Module. In this example the CSS Class is absolute_map
Add the following CSS in the Custom CSS box:
.absolute_map .et_pb_map {
position: absolute;
overflow:visible;
height: 100%;
}
Be happy!
Try to add padding instead of an explicit increase of height.
#map ,#map .et_pb_map {padding-bottom: 56.25%}
You might have to adjust the selector. Usually #map is enough though.
and adjust the padding percentage to modify the aspect ratio. This is responsive.
The reason why this might work is because padding creates more space for the background - map in the case of this iframe - to be painted thus expanding it.
Read more on this here
Working demo on JSFiddle
If you're customizing through that section (Advanced > Custom CSS > Main Element) of the Divi Builder, just add the property declaration not the entire CSS rule.
height: 440px;
no need to add css class in the advanced > custom css. just add the property value 440px.
use !important for overnight css
.et_pb_map {
height: 440px !important;
}
Just add !important to your css
.et_pb_map {
height: 440px !important;
}
Use below code.
Please use your google API key here in this js file.
If you wanted to increased/decreased height of map then do changes in #div_gmap.
#div_gmap {
height: 440px;
}
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
<div id="div_gmap"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('div_gmap'), {
center: {lat: 22.3039, lng: 70.8022},
zoom: 12
});
}
</script>
If this thing is not working well then might need to check some of the css or any other framework causing this issue.
The best way to test out why the css dimension code doesnt work is to use chrome dev tool.
Press Shift+ Ctrl + I (or cmd + alt + I if you are safari user) and open up the web dev tool bar. Go to the Elements section and you will see styles controller. In the styles controller, you click on the elements you wanna check on the DOM side, in your case, it's probably <div class="et_pb_map">...</div>, or you can press ctrl+f to search et_pb_map.
After you have done that, you can go to the box viewer in the style tab and see why it doesnt work out.
I would say sometimes if you use padding/margin and didnt set overflow property well, it will crop out your elements. Or maybe your class is being overlapped by other class. You can use embed style to override that <div class="et_pb_map" style="...">...</div>, or simply put your class as the last class in the class attributes.
Example on using chrome web dev tool bar
Go to Appearance -> Customize -> Additional CSS and paste this code
.et_pb_map iframe {height: 400px !important; }
This will help you Check this jsfiddle
This is the only solution that worked for me. Assign a class to your map module i.e. .map-height and target it like this:
.map-height .et_pb_map {
overflow:visible;
height: 500px!important;
}
The simple approach is:
Go to Divi Theme Options
Scroll down to Custom CSS
Enter .et_pb_map {height:500px;}
Click Save Changes (the map will now change to 500px height)
I want to have a page which shows up in my index page but not clickable (so as an image block). can i achieve this by css or page header code injection? Does anyone know? Please help!
First, you'll need to find the id of the div you'd like to edit.
Using the squarespace flatiron demo as an example, the div is "yui_3_17_2_1_1405046742289_1089"
a#yui_3_17_2_1_1405046742289_1089 {
/*disable the link */ pointer-events:none;
}
If you want to hide the text over the image as well:
#yui_3_17_2_1_1405046742289_1089 .wrapper {display: none;}
}
I am working on a PHP file. I'm working on the menu bar, the menu bar contains all the image buttons, if someone hovers on one of the buttons I want them to change image(color). Could someone help me out with this?
$globalsettings = array(
'src' => $sImageURL.'global1.png',
'alt' => $clang->gT("Global participant settings"),
'title' => $clang->gT("Global participant settings"),
'style' => 'margin-left:5px',
'style' => 'margin-right:1px'
);
You can create hover effects using CSS (cascading stylesheets). Your CSS must be in an external stylesheet or embedded style element.
I'm using BUTTON that will style all <button> elements, but you can replace it with whatever element you want to style, such as an <img> with IMG (lowercase or uppercase).
BUTTON {
background: url(my_bg.png);
}
BUTTON:hover {
background: url(my_hover_bg.png);
}
If you don't know how to use stylesheets, just insert embedded styling into the <head> of your HTML document.
<style type="text/css">
/* Place CSS here */
</style>
If you want you can take it a step further and use CSS sprites (like old videos games used to do it). CSS sprites are a collection of images in one single image, and you simply change the position of the location of the background, and it creates the effect. You can achieve this like this:
#myelement {
background: url(my_bg.png) -0 -0;
}
#myelement:hover {
background: url(my_bg.png) -0 -100px;
}
There are also old school ways of hover effects but they're like Frontpage-era, so I don't recommend using them. CSS hover effects is the standard of today.
You're trying to solve 2 problems in one step. You need to get the images to display and then swap between them on hover.
You can't dynamically edit a button in JS (ok, you could with canvases and html 5 but it's non-trivial). So, you need to use CSS (or possibly JS) to to swap between 2 images.
Where those images come from is up to you - you can either pre-generate them which is a little work up front but easy to implement and no PHP required. This would be the preferred option if there's only one or two variations in colour.
Alternatively, you can have a PHP script which generates the images on-the-fly (and ideally caches them to save recomputing them later). This allows for infinite variation but requires more overhead on the server. This approach is commonly used to generate thumbnails as the source image isn't known in advance
Note that PHP has no control over when each image is displayed - it simply provides images to your CSS/JS in exactly the same way as a webserver would serve a static image.
If you want to edit an image in PHP, you need to look at the GD+ library
You can use css to do this quite easily by using the content: selector.
for example, your markup might look like this:
<div class="link" id="link1">
<img />
</div>
and the css would be something like:
#link1 a img{
content:url("http://www.maxxpotential.com/stephen2/wp-content/uploads/2013/03/Images-from-Deep-in-the-Woods-by-Astrid-Yskout-4.jpg");
}
#link1:hover a img{
content:url("http://blogs.mathworks.com/pick/files/zebrainpastelfield.png");
}
by using the selectors you assign in your script, you should find it pretty easy to amend this to suit your needs.
here is a working fiddle demonstrating this http://jsfiddle.net/pWYtu/1
You can use sprite image and onhover change position.
also you will get benefit of performance.
I need help with some CSS styling. I've tried various options with Firebug and cannot sort this out. How can I style the thumbnails on my posts (eg url: http://thatcriticguy.com/index.php?post/4/crossover-9-revamped-reinvented-and-a-must-have) and not style all images in the post at the same time. I have numerous posts on this site and need to only style the ones that are thumbnails that float right.
Is there a way to do this without modifying the template code just using CSS?
There's no way using pure CSS, because the thumbnails don't have an identifier that can distinguish them from the other images. Your only choices are either modifying the template code or using javascript to pick out the first image in a post and applying a style to it.
You need to have a "class" attribute on the images you want to style with CSS. This way your CSS will work only on the images you want.
For example you can have this HTML
<img src="..." class="thumbnail"/>
and this CSS:
.thumbnail {...}
If your posts' structure is always identical, this should do the trick:
.post-content p:first-child img
{ float: right }
It addresses all img elements in the first paragraph below post-content.
Not supported by IE 6. Source at Quirksmode.org
I use CMS for client and client doesn't know CSS he use WYSIWYG editor to put content in pages. Client adds Paragraphs, images, images in paragraph (left or right floated), ordered and unordered list, Tables. Problems comes when he want to add images in paragraph (left or right floated). and without adding css class it's not possible. And i don't want to add <div> in content because WYSIWYG editor can't manage div and client works in WYSIWYG mode.
How to style content of pages without using css class?
You will need your user to add a CSS class/style attribute to the image somehow - without adding something to the image to tell it to float right or left it won't float right or left.
If your question is how the client can add the class without having to manually edit the HTML I reckon the only way is to dive into the WYSIWYG editor's javascript and write something a bit like this towards the end of the image-adding process:
var alignment = prompt("Type l to align the picture to the left, and r to align the picture to the right","l").strToLower();
if(alignment == 'r')
{
//line of code to add class "right" to the image tag
} else {
//line of code to add class "left" to the image tag
}
What the code to add the classes should depend on how the WYSIWYG editor works
You can try using element selectors or ID selectors to add styles to HTML elements without referencing CSS class in them.
Element selector would add border to all images on the page:
img { border:1px; }
ID selector would do the same only to image with ID 'image1':
img #image1 { border:1px; }
Still you will need to reference the stylesheet from your page.
There are lots of different ways you can make CSS Selectors that don't require CSS classes. For example, to make a rule that applies to all img tags inside p tags, you could write this:
p img { float: left; }
But how are you hoping to determine which images need to be right-aligned and which images need to be left aligned? Does that data exist in the document in any machine readable format?
A WYSWYG should have "align" property for an image (at least those I have seen). You can then use CSS attribute selector img [align=left] { float:left; } or img [align=right] {float:right;} This wont work on IE 6,7 though, you can use JavaScript to mimic this for those browsers.