I want to disable border-bottom of the last elemnt inside a while loop, but it doesn't work...
This is the code:
<div class="col-sm-4">
<?php if ( $the_query->have_posts() ): ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<h2 class="special-project-title"><?php the_title()?></h2> <br/>
<div class="post-meta special-project-meta"><?php mida_post_meta()?></div><br/>
<a class="more-link spaciel-project-more" href="<?php echo the_permalink() ?>"><?php echo __('Read More', 'mida')?></a><br/>
<?php endwhile; endif;?>
<?php wp_reset_query(); ?>
</div>
"spaciel-project-more" has a border bottom, but I want the last one to not have a border bottom.. can't figure this out..
CSS:
.spaciel-project-more{
border-bottom: 1px solid black;
margin-top: -15px;
margin-bottom: -15px;
padding-bottom: 15px;
}
.spaciel-project-more:last-child{
border-bottom:none;
}
Thanks in advance!
It is not the :last-child because there is some other content after that. You can use :last-of-type:
.spaciel-project-more:last-of-type {
border-bottom: 0
}
Demo: JSFiddle
use this in your style in css may help you
.spaciel-project-more:last-child{
border-bottom:0px;
}
Related
I am displaying some icons and a short descriptor for each. I am using a list item to display the descriptions because I have a custom icon I am using to accompany the descriptor.
The icons display as expected, but as you can see the second row of descriptions is shifted right, not aligned with the row above (sorry the icons are so dark), I can't seem to debug why. All the properties seem to be the same.
<?php if( have_rows('section') ): ?>
<?php while( have_rows('section') ): the_row();
$image = get_sub_field('image');
?>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="mx-auto text-center">
<img src="<?php echo $image['url'] ?>">
<ul>
<li><?php the_sub_field('content'); ?></li>
</ul>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
And how I'm styling the list
ul {
padding-left: 2rem;
list-style-type: none;
list-style-position: outside;
}
ul li {
padding-left: 2rem;
background-image: URL("../../images/star.svg");
background-position: 0 0;
background-size: 1.6rem 1.6rem;
background-repeat: no-repeat;
margin-top: 1rem;
margin-bottom: 50px;
display: inline-block;
text-align:left;
}
I have this section on my website:
This is on my homepage, pulling through items of a custom post type called products.
Each product has it's own product colour, I've allowed the user to select this from an Advanced Custom Field Colour Picker.
I've created the Arrows using CSS :before and :after (one for the line and one for the arrow head), so I could colour them using the product colour ACF.
This would mean I would have to apply the colour inline, inside the template. But as I have used Pseudo classes, I don't believe I can style them inline.
To get around this I added a style block inside my loop... This seems to work but it's only taking the yellow colour as I assume it's the first colour it finds...
Is there a way around this? I'm not sure if I'm making it too complex...
Here's the separate CSS from the CSS document:
.products-item-inner .arrow-right:after {
content: "";
border: solid;
/* border-color: <?php the_field('product_colour'); ?>; */
border-width: 0 2px 2px 0;
display: inline-block;
vertical-align: middle;
padding: 5px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
margin-left:-12px;
}
.products-item-inner .arrow-right:before {
width: 30px;
height: 2px;
/* background-color: <?php the_field('product_colour'); ?>;*/
content: "";
display: inline-block;
vertical-align: middle;
}
Here's the template loop with the added CSS <style> inline:
<div class="container">
<div class="row">
<?php
$args = array(
'post_type' => 'products',
'posts_per_page' => 9999,
'orderby' => 'none'
);
$the_query = new WP_Query( $args );
?>
<?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<!-- <a href="<?php the_permalink(); ?>"> -->
<div class="col-lg-4 products-item-outer">
<div class="col-12 products-item-inner">
<style type="text/css">
.products-item-inner .arrow-right:after { border-color: <?php the_field('product_colour'); ?>; }
.products-item-inner .arrow-right:before { background-color: <?php the_field('product_colour'); ?>; }
</style>
<div class="logo">
<?php
$image = get_field('logo');
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
</div>
<div class="excerpt"><p><?php the_field('excerpt_text'); ?></p></div>
<div class="read-more-link">Read More<span class="arrow-right"></span></div>
</div>
</div>
<!-- </a> -->
<?php endwhile; wp_reset_postdata(); endif; ?>
</div>
</div>
Thanks for looking :)
Older browser support method
For maximum browser support, you can use the style attribute to assign a colour to your .arrow-right element, and can leverage currentColor in its pseudo-elements:
<div class="container">
<div class="row">
<?php
$args = array(
'post_type' => 'products',
'posts_per_page' => 9999,
'orderby' => 'none'
);
$the_query = new WP_Query( $args );
?>
<?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<!-- <a href="<?php the_permalink(); ?>"> -->
<div class="col-lg-4 products-item-outer">
<div class="col-12 products-item-inner">
<div class="logo">
<?php
$image = get_field('logo');
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
</div>
<div class="excerpt"><p><?php the_field('excerpt_text'); ?></p></div>
<div class="read-more-link">Read More<span class="arrow-right" style="color: <?php the_field('product_colour'); ?>;"></span></div>
</div>
</div>
<!-- </a> -->
<?php endwhile; wp_reset_postdata(); endif; ?>
</div>
</div>
.products-item-inner .arrow-right:after {
content: "";
border: solid;
border-color: currentColor;
border-width: 0 2px 2px 0;
display: inline-block;
vertical-align: middle;
padding: 5px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
margin-left:-12px;
}
.products-item-inner .arrow-right:before {
width: 30px;
height: 2px;
background-color: currentColor;
content: "";
display: inline-block;
vertical-align: middle;
}
CSS Custom Property method
You could also use a CSS custom property, if you need the colour in more than one spot, where the method above won't work (unless you repeat the colour definition in several places).
I added it to your .products-item-outer element as a style attribute. This will cascade down into your .arrow-right pseudo-elements. I also added a fallback colour of rebeccapurple in this example, in case the value is missing.
<div class="container">
<div class="row">
<?php
$args = array(
'post_type' => 'products',
'posts_per_page' => 9999,
'orderby' => 'none'
);
$the_query = new WP_Query( $args );
?>
<?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<!-- <a href="<?php the_permalink(); ?>"> -->
<div class="col-lg-4 products-item-outer" style="--product-color: <?php the_field('product_colour'); ?>;">
<div class="col-12 products-item-inner">
<div class="logo">
<?php
$image = get_field('logo');
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
</div>
<div class="excerpt"><p><?php the_field('excerpt_text'); ?></p></div>
<div class="read-more-link">Read More<span class="arrow-right"></span></div>
</div>
</div>
<!-- </a> -->
<?php endwhile; wp_reset_postdata(); endif; ?>
</div>
</div>
.products-item-inner .arrow-right:after {
content: "";
border: solid;
border-color: var(--product-color, rebeccapurple);
border-width: 0 2px 2px 0;
display: inline-block;
vertical-align: middle;
padding: 5px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
margin-left:-12px;
}
.products-item-inner .arrow-right:before {
width: 30px;
height: 2px;
background-color: var(--product-color, rebeccapurple);
content: "";
display: inline-block;
vertical-align: middle;
}
On my front page I have three posts in a row that are spread across the full width of the page. I want to add a padding of 30px to the left. However my problem is then that at the beginning of each row of images there is a padding of 30px. I want it so that technical there is only a padding to the left and right 30px of the middle image, so the outer two images are always touching the end of the screen. I tried using :first-child to then take away the padding, however since I have the posts in a loop it did not work, and removed padding from all three images. Does anyone have a solution?
what it looks like...
<article <?php post_class( 'col-md-4' ); ?>>
<div class="front-thumbnail-image"><?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?></div></article>
.medium-front-thumbnail {
max-width: 100%;
height: auto;
position: relative;
margin: 0 auto;
align-items: flex-end;
display: block;
float: left;
}
.front-thumbnail-image {
padding-left: 30px !important;
}
.col-md-4 {
padding: 0 0 0 0 !important;
margin-bottom: 100px;
background-color: red;
}
my entire front-page.php
<?php
/*
* Template Name:
*/
get_header();
get_template_part ('inc/carousel');
$the_query = new WP_Query( [
'posts_per_page' => 14,
'paged' => get_query_var('paged', 1)
] );
if ( $the_query->have_posts() ) { ?>
<div id="ajax">
<?php
$i = 0;
while ( $the_query->have_posts() ) { $the_query->the_post();
if ( $i % 7 === 0 ) { // Large post: on the first iteration and every 7th post after... ?>
<article <?php post_class( 'col-md-12' ); ?>>
<div class="large-front-container">
<?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?>
</div>
<h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<div class="front-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part ('front-page-shop'); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</article><?php
} else { // Small posts ?>
<article <?php post_class( 'col-md-4' ); ?>>
<div class="front-thumbnail-image"><?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?></div>
<a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p>
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part ('front-page-shop'); ?>
<?php get_template_part( 'share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</article>
<?php
}
$i++;
}?>
</div>
<?php if(get_query_var('paged') < $the_query->max_num_pages) {
load_more_button();
}
}
elseif (!get_query_var('paged') || get_query_var('paged') == '1') {
echo '<p>Sorry, no posts matched your criteria.</p>';
}
wp_reset_postdata();
get_footer();
you can use :nth-child(2) to target the middle div.
.grid > div:nth-child(2) {
padding: 0 30px;
}
.grid > div {
float: left;
}
.grid {
background: red;
overflow: auto;
display: inline-block;
}
img {
display: block;
max-width: 100px;
}
<div class="grid">
<div><img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg"></div>
<div><img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg"></div>
<div><img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg"></div>
</div>
On the code you've provided I can see you uses Flexbox. To the container of the images try to add justify-content: space-between. That should only add space between the images.
.front-thumbnail-image {
display: flex;
justify-content: space-between;
background: red;
}
<article class='col-md-4'>
<div class="front-thumbnail-image">
<img src="https://getuikit.com/v2/docs/images/placeholder_600x400.svg" height="120" />
<img src="https://getuikit.com/v2/docs/images/placeholder_600x400.svg" height="120" />
<img src="https://getuikit.com/v2/docs/images/placeholder_600x400.svg" height="120" />
</div>
</article>
Try this :
.grid img:not(:first-child) , .grid img:not(:last-child) {
padding: 0 10px 0 10px;
}
Full code :
img {
width: 100px;
height: 100px;
}
.grid {
background-color: red;
display: inline-block;
}
.grid img:not(:first-child) , .grid img:not(:last-child) {
padding: 0 10px 0 10px;
}
<div class="grid">
<img src="http://cdn.earthporm.com/wp-content/uploads/2014/10/animal-family-portraits-2__880.jpg">
<img src="http://onehdwallpaper.com/wp-content/uploads/2015/07/Abdorble-Animals-Desktop-Wallpapers-Pictures.jpg">
<img src="https://s-media-cache-ak0.pinimg.com/originals/b2/1e/c9/b21ec91754d33bb5de86c67c45482e12.jpg">
<img src="http://cisnerosnediadistribution.s3.amazonaws.com/media/images/reino_animal_-_trailer_image.png">
</div>
i'm new with jQuery !
i have a CSS file named "Slider.css" that contains the following code :
.banner1 {
/*background: url(../images/bnr1.jpg) no-repeat 0px 0px;*/
background-size: cover;
min-height: 650px;
}
.banner2 {
/* background: url(../images/bnr2.jpg) no-repeat 0px 0px;*/
background-size: cover;
min-height: 650px;
}
.banner3 {
/* background: url(../images/bnr3.jpg) no-repeat 0px 0px;*/
background-size: cover;
min-height: 650px;
}
what i want is to change the url of the background in page called home.ctp according to data that i get from database so i tried this :
<?php $i=1; ?>
<?php foreach ($query as $slider): ?> // query contain 3 items
<div class="slid banner<?= $i; ?>">
<div class="caption">
<h3><?= $slider->titre; ?></h3>
<p><?= $slider->contenue; ?></p>
know more
</div>
</div>
<script>
// alert(".banner<?= $i; ?>");
$(".banner<?= $i; ?>").css({"background": "url(../images/<?= $slider->url ?>) no-repeat 0px 0px;"})
</script>
<?php $i++; ?>;
<?php endforeach; ?>
So i tried $(".banner<?= $i; ?>").css({"background": "url(../images/<?= $slider->url ?>) no-repeat 0px 0px;"}) but it doesn't change anythnig..
How can i change the css of Slider.css from php Loop using jQuery !
Thanks for help
Basically, you're doing it wrong. You don't need and shouldn't be using jQuery for this.
This is what you want:
.banner {
background-size: cover;
min-height: 650px;
}
<?php foreach ($query as $slider): ?>// query contain 3 items
<div class="slid banner" style="background: url(../images/<?= $slider->url ?>) no-repeat 0px 0px;">
<div class="caption">
<h3><?= $slider->titre; ?></h3>
<p>
<?=$ slider->contenue; ?></p>
know more
</div>
</div>
<?php endforeach; ?>
You don't need jQuery to achieve this. If $slider->url contains the URL of your background image, just do:
<?php $i = 1; foreach ($query as $slider): ?>
<div class="slid banner<?php echo $i; ?>" style="background-image: url(<?php echo $slider->url; ?>)">
// ...
</div>
<?php $i++; endforeach; ?>
Indeed, your CSS already defines the background image, you shouldn't even need this. Just the <div class="slid banner<?echo $i; ?>"> does the trick.
On the front page of my site I have 3 posts being pulled, with a div underneath each that is a link. I need each of the 3 divs to be a different color. New posts in this category are going to be displayed here as they are posted, but it will just display the most recent three. I need to make it so that the three "hear more >" divs are always the same color. Below are pics and the code.
How is it currently:
How I need it to be:
HTML:
<?php
$args = array(
'post_type' => 'success',
'posts_per_page' => 3,
'order' => 'ASC'
);
$query = new WP_Query($args);
?>
<?php while ($query->have_posts()) : $query->the_post(); ?>
<div class="success-stories-div">
<div class="success-stories-text">
<p style="font-size: 120%;">Success Story</p>
<?php the_content(); ?>
</div>
<a href="<?php the_permalink(); ?>">
<div class="success-stories-link">Hear More >
</div>
</a>
</div>
<?php endwhile; wp_reset_query(); ?>
CSS:
.success-stories .success-stories-link {
margin-top: 1em;
width: 465px;
height: 50px;
background-color: #F4B147;
padding: 12px 0 0 15px;
}
you can use selector
example:
<style>
div{
margin-top: 1em;
width: 465px;
height: 50px;
padding: 12px 0 0 15px;
}
div.success-stories-link:nth-child(1) {
background: green;
}
div.success-stories-link:nth-child(2) {
background: yellow;
}
div.success-stories-link:nth-child(3) {
background: red;
}
</style>
<div class="success-stories-link">1</div>
<div class="success-stories-link">2</div>
<div class="success-stories-link">3</div>
I think that the problem is that you are not calling the other colors: I would try something like this: What I am doing here is that I am creating a variable $i and make it $i=0 then inside the while loop I increment $i and so I can add a number at the end of the css class and it will look like this:
class="success-stories-link<?php echo $i; ?>"
<?php
$args = array(
'post_type' => 'success',
'posts_per_page' => 3,
'order' => 'ASC'
);
$query = new WP_Query($args);
?>
<?php $i = 0;
while ($query->have_posts()) : $query->the_post(); ?>
<div class="success-stories-div">
<div class="success-stories-text">
<p style="font-size: 120%;">Success Story</p>
<?php the_content(); ?>
</div>
<a href="<?php the_permalink(); ?>">
<div class="success-stories-link<?php echo $i; ?>">Hear More >
</div>
</a>
</div>
<?php $i++; endwhile; wp_reset_query(); ?>
in the css I would add different background-color:
.success-stories .success-stories-link0 {
margin-top: 1em;
width: 465px;
height: 50px;
background-color: #F4B147;
padding: 12px 0 0 15px;
}
.success-stories .success-stories-link1 {
background-color: another-color;
}
.success-stories .success-stories-link2 {
background-color: another-color;
}
I haven't test this code. Also, I am looking at the pictures How I need to be:
Also, there might be a better solution to it...but this should save your life for now =)