i have tried as much i know about this stuff but failed to show box-shadow over the image.
http://thesameffect.com/healthy-habits-and-distinctions/#related-posts
i want to show shadow overlayed on the images. same like as ..
http://thesameffect.com/blog/
Please kindly help me..
HTML :
<div class="related-posts">
<h3 class="related-title">Related Posts</h3>
<ul id="related-posts" class="related-list">
<li>
<a title="Permanent Link toHow Genetics and Epigentics Relate to Your Health and Fitness" rel="bookmark" href="http://TheSamEffect.com/how-genetics-and-epigentics-relate-to-your-health-and-fitness/">
<img class="attachment-Header Square" width="297" height="200" title="genes2" alt="genes2" src="http://TheSamEffect.com/wp-content/uploads/genes2-297x200.jpg">
<span class="related-heading">How Genetics and Epigentics Relate to Your Health and Fitness</span>
</a>
</li>
<li>
...
</li>
<li>
...
</li>
</ul>
</div>
CSS :
.related-posts ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
.related-list li {
background-color: #F4F4F4;
box-shadow: 0 0 10px #000000 inset;
float: left;
height: 150px;
list-style: none outside none !important;
margin: 0.25em !important;
overflow: hidden;
position: relative;
text-align: center;
width: 216px;
}
.related-posts ul li a {
font-size: 14px;
font-weight: normal;
line-height: 20px;
text-decoration: none;
}
.related-posts a {
color: #F4F4F4;
}
.related-list img {
display: block;
margin: 0;
position: absolute;
}
.related-heading {
background-color: rgba(0, 0, 0, 0.5);
bottom: 0;
font-family: Conv_resea-bolditalic,"Helvetica Neue",Arial,Helvetica,sans-serif,georgia;
font-size: 16px;
left: 0;
min-height: 40px;
padding: 10px;
position: absolute;
width: 90.5%;
z-index: 1;
}
PHP - WP Codes :
Thats how i am extracting images from genesis.
$img = genesis_get_image() ? genesis_get_image( array( 'size' => 'Header Square' ) ) : '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/related.png" alt="' . get_the_title() . '" />';
$related .= '<li>' . $img . '<span class="related-heading">' . get_the_title() . '</span></li>';
after doing all this stuff i am still unable to see box-shadow, Actually shadow is there at its actual place but due to z-index i think i am unable to visible shadow.
please kindly help me to resolve the issue.
thank you.
After Solution:
The following code just show the image url in Genesis.
genesis_get_image( array( 'format' => 'url' ) );
Try something like this
http://jsfiddle.net/esnLn/
Set the image as div background
Your shadow is on the list item which has an inset shadow, and the image in the list item covers it. One way around this is to set the list item backround image to your image and remove the image itself.
Based on your update you can try this:
$img = genesis_get_image( array( 'size' => 'Header Square' ) );
$related .= '<li style="background-image:url('.$img.')"><span class="related-heading">' . get_the_title() . '</span></li>';
Related
Question: How do you hook straight into the product thumbnail html on shop page attachment-woocommerce_thumbnail? Or instead, how would you recommend the best way to position a custom badge bottom: 0 absolute to the product image?
My goal is to add custom badges to products on the WooCommerce shop page and have the badges positioned at the bottom of the product image thumbnail.
To start, I created a function using the hook woocommerce_before_shop_loop_item_title - However, this hook means the tags by default are set to display above the product image.
I then added CSS to get them into position by making the il.product position: relative and custom badges position: absolute with z-index and pushed it 293px from the top into the desired position.
So it looks like this.
However, I now realize this workaround is flawed and not really optimal, as it's only specific to my display and thumbnail sizes can change as columns change etc.
Any advice would be much appreciated.
Thank you.
Example PHP Function, Simplified.
function woo_property_badges() {
global $post;
?>
<div class="woo-property-badge">
<span class="woo-property-featured-badge">'Featured'</span>
<span class="woo-property-cat-badge">'Category'</span>
</div>
<?php }
add_action( 'woocommerce_before_shop_loop_item_title', 'woo_property_badges', 1 );
Example HTML Output
<li class="product type-product post-210012 status-publish first instock product_cat-residential-property has-post-thumbnail featured virtual taxable purchasable product-type-auction et_pb_shop_item_0_0">
<a href="/product/Test-Product/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">
<div class="woo-property-badge">
<span class="woo-property-featured-badge">Featured</span>
<span class="woo-property-cat-badge">Residential</span>
</div>
Test Product Title
CSS Used
il.product-type-auction {
position: relative;
}
.woocommerce span.woo-property-featured-badge {
position: absolute;
left: 10px;
top: 293px;
display: block;
z-index: 2;
width: auto;
max-width: 70%;
padding: 5px 10px;
background: #31324E;
font-weight: 400;
color: #fff;
}
.woocommerce span.woo-property-cat-badge{
background-image: linear-gradient(to right, #A7784A73 , #A7784A);
color: #FFF;
padding: 5px 10px;
position: absolute;
top: 293px;
right: 10px;
z-index: 2;
font-size: 14px;
}
.woocommerce span.woo-property-cat-badge:before {
position: absolute;
right: 0;
top: 0;
bottom: 0;
content: "";
left: -12px;
border-top: 15px solid transparent;
border-right: 12px solid #A7784A73;
border-bottom: 15px solid transparent;
width: 0;
}
One thing you can try is to create a wrapper around the product image so that you can position the badge relative to this wrapper.
function wrap_loop_product_image() {
if ( ! class_exists( 'WooCommerce' ) ) return; //* exit early if WooCommerce not active/installed
add_action( 'woocommerce_before_shop_loop_item_title' , 'product_loop_image_wrapper_open', 9 );
add_action( 'woocommerce_shop_loop_item_title' , 'product_loop_image_wrapper_close', 9 );
}
add_action( 'woocommerce_before_shop_loop' , 'wrap_loop_product_image', 3 );
// Open wrapper
function product_loop_image_wrapper_open() {
echo '<span class="product-image-wrapper">';
}
// Close wrapper
function product_loop_image_wrapper_close() {
echo '</span>';
}
This code goes in functions.php. You would still need to adjust your CSS code.
I tried to change my svg image and text on hover and it doesn't work how I want it. I want the moment my mouse crosses over any of these 2 (svg or text) to change both.
Maybe I made a mistake in the html structure or maybe in css.
Please if you can help me, thanks in advance.
.logout-image {
mask: url("../../../assets/images/log-out.svg");
background-color: #62799D;
width: 20px;
height: 20px;
margin-right: 20px;
margin-left: 20px;
}
.logout-container {
display: flex;
flex-direction: row;
align-items: center;
padding: 8px 0px 8px 24px;
width: 100%;
height: 60px;
position: static;
left: 0px;
top: 280px;
color: #62799d;
margin-top: 35vh;
}
.logout-container:hover {
background: #0c2e6e;
color: white;
}
.logout-image:hover{
background: white;
}
<ul className="SidebarList">
{sidebarData.map((value, key) => {
return (
<li
className="row"
key={key}
onClick={() => {
window.location.pathname = value.link;
}}
>
{" "}
<div className="icon">{value.icon}</div>{" "}
<div className="title">{value.title}</div>
</li>
);
})}
{" "}
{" "}
//here is the problem
<li className='logout-container'>
<div className="logout-image"></div>
<div className="title" >Logo Out</div>
</li>
//until here
</ul>
This is how I wanted to change with hover:
target result
And this is how it is working right now:
current result
The background changes only if I cross over my svg image:
example here
Add this:
.logout-container:hover > .logout-image{
background: white;
}
It turns the image and words white when logout-container is hovered.
we can see lot of empty space in link as below the image. I want to hide those empty space.
.main {
margin: 0 auto;
width: 1000px;
}
body, button, input, select, table, textarea {
font-family: 'Roboto Condensed', sans-serif;
color: #636363;
font-size: 14px;
line-height: 1.5;
}
html
<div class="custom_case">
<div class="custom_case_left">
<h1 class="cc1">Custom Cases</h1>
<h2 class="cc2">Make Your Own design</h2>
</div>
<?php
$brandSelect = '<select id="brand_select">';
$brandSelect .= '<option value="">My Brand</option>';
$brandSelect .= '</select>';
echo '<select id="model_select"><option value="">My Model</option></select>';
?>
<div class ="cc3">
<div class ="cc4">
<span class ="cc5"> See Cases > </span>
</div>
</div>
I dont want to give so much empty space between image and below footer
please help me for this.
Thanks in advance.
Figured it out for you!
Your image of the phone cases is what is causing the space issue.
.custom_case_right img {
/*float:right;*/
/*bottom:320px;*/
}
That will fix the spacing beneath your image. Now your image is displaying improperly and to fix do this
.custom_case_right {
float:right;
margin-top:-310px;
}
These two changes ought to take care of it for you. I tested this out in Chrome.
You'll still need to think about how you want to have your image behave as your viewport shrinks though.
trying to make img:
line-height: 0;
vertical-align: top or bottom;
You have to fix the height of main-container.
enter code here.main-container{
height:550px;
}
Make this changes to your classes:
.col1-layout .col-main {
position: relative;
}
.custom_case_right {
float: left;
position: absolute;
top: 0;
bottom: 0;
right: 0;
}
And in your image remove position absolute, add this style instead:
.custom_case_right img {
position: relative;
width: 620px;
height: 100%;
}
I'm working on "Related Articles" widget carousel navigation in WordPress. Widgets is working fine and now I'm working on styling part.
This is what I currently have:
This is what I want to achieve:
The problem is that I'm stuck on styling li. The problem is that I'm trying first of all to add width and height even with !important and it's still not re-sizing. So I need to split this carousel navigation into 8 similar parts. I think display:inline / display:inline-block might cause this issue.
CSS:
div.carousel_navigation {
display: inline-block;
background: #eeebe7;
width: 224px;
position: relative;
border-right: 1px solid #b1afa9;
border-left: 1px solid #b1afa9;
border-bottom: 1px solid #b1afa9;
}
ul li.prev-article, ul li.next-article {
display: inline;
width: 28px;
height: 20px;
}
li.nav-item-links {
display: inline;
width: 28px;
height: 20px;
}
PHP:
<div class="carousel_navigation">
<ul>
<li class="prev-article"><a class="prev-article"><</a></li>
<?php $count = 1; foreach( $related_posts_guides as $post): // variable must be called $post (IMPORTANT) ?>
<li class="nav-item-links">
<a href="#item_<?php echo $count; ?>">
<?php echo $count; ?>
</a>
</li>
<?php $count++; endforeach; ?>
<li class="next-article"><a class="next-article">></a></li>
</ul>
</div><!-- .carousel_navigation -->
Thank you in advance!
That's because your li elements are inline. If you want them to be in line with eachother, but also stylable with properties like height and width, you'll need to set them as inline-block instead:
ul li.prev-article, ul li.next-article,
li.nav-item-links {
display: inline-block;
width: 28px;
height: 20px;
}
Note that I've also joined both of your selectors with a comma as their style properties were identical.
I have the following issue.
I have 2 sets of checkboxes with a title for each. That title is supposed to have a grey background, then the checkboxes area should have no color in the background.
The issue is that if I put only 1 set of checkboxes with its title, the backgrounds work good.
However, when I put the 2nd set of checkboxes, the checkboxes area of the 1st set has a grey background and seems to be inheriting the bg of the title of the 2nd set.
Here is the code. Any clue?
Thanks!
<div class="bgFilterTitles">
<h1 class="filterTitles">COLOR</h1>
</div>
<div class="boxes">
<?php
$colors = $con -> prepare("SELECT DISTINCT color_base1 FROM item_descr ORDER BY color_base1 ASC");
$colors ->execute();
while ($colorBoxes = $colors->fetch(PDO::FETCH_ASSOC))
{
echo "<input type='checkbox' class='regularCheckbox' name='color' value='".$colorBoxes[color_base1]."' /><font class='similarItemsText'> ".$colorBoxes[color_base1]."</font><br />";
}
?>
</div>
<div class="bgFilterTitles">
<h1 class="filterTitles">PRICE</h1>
</div>
<div class="boxes">
<?php
$prices = $con -> prepare("SELECT DISTINCT price FROM item_descr ORDER BY price ASC");
$prices ->execute();
while ($priceSort = $prices->fetch(PDO::FETCH_ASSOC))
{
echo "<input type='checkbox' class='regularCheckbox' name='price' value='".$priceSort[price]."' /><font class='similarItemsText'> ".$priceSort[price]."</font><br />";
}
?>
</div>
Here are the CSSs used:
.boxes {
width: 160px;
float: left;
padding: 10px;
border: 1px solid #C6C6C6;
clear: both;
}
.filterTitles
{
background-color: #F1F1F1;
font-family: Arial,Helvetica,Verdana,Sans-serif;
font-size: 11px;
font-weight: normal;
color: #333;
text-transform: uppercase;
padding: 4px;
border: 1px;
border-color: #C6C6C6;
border-top-style: dotted;
}
I'm not sure if I understood the problem correctly, is this what you were trying to do?
http://jsfiddle.net/mdLVG/
In that case you need to add clear:both; to your .filterTitles CSS class.