Photo Carousel In Header

Hi there,
you will need to replace part-slider.php with

</div>
</div>
</div><?php if( get_theme_mod( 'home_slider_show', 1 ) == 1 ): ?>
	<?php
		$q    = false;
		$args = false;

		if ( get_theme_mod( 'home_slider_show_recent', 0 ) == 1 ) {
			$args = array(
				'post_type'      => 'post',
				'posts_per_page' => get_theme_mod( 'home_slider_limit' ),
			);
		} elseif ( get_theme_mod( 'home_slider_postids' ) ) {
			$args = array(
				'post_type'      => 'post',
				'post__in'       => explode( ',', get_theme_mod( 'home_slider_postids' ) ),
				'posts_per_page' => get_theme_mod( 'home_slider_limit' ),
				'orderby'        => 'post__in',
			);
		} elseif ( get_theme_mod( 'home_slider_term' ) ) {
			$args = array(
				'post_type'      => 'post',
				'tax_query'      => array(
					array(
						'taxonomy' => 'category',
						'terms'    => get_theme_mod( 'home_slider_term' )
					),
				),
				'posts_per_page' => get_theme_mod( 'home_slider_limit' ),
			);
		}

		if( $args !== false ) {
			$q = new WP_Query( $args );
		}

		$attributes = sprintf( 'data-autoplay="%s" data-autoplayspeed="%s" data-fade="%s"',
			esc_attr( get_theme_mod( 'home_slider_autoplay', 1 ) ),
			esc_attr( get_theme_mod( 'home_slider_autoplaySpeed', 3000 ) ),
			esc_attr( get_theme_mod( 'home_slider_fade', 1 ) )
		);
	?>
	<?php if( $args !== false && $q !== false && $q->have_posts() ): ?>

		<div class="slick-slider home-slider" <?php echo $attributes; ?>>
			<?php while( $q->have_posts() ): $q->the_post(); ?>
				<div class="slide">
					<?php the_post_thumbnail( 'ci_slider' ); ?>

					<?php if ( ! get_theme_mod('home_slider_hide_content') ) : ?>
					<div class="slide-content">
						<?php if ( get_post_type() === 'post' ) : ?>
							<div class="entry-meta entry-meta-top">
								<p class="entry-categories">
									<?php the_category( ', ' ); ?>
								</p>
							</div>
						<?php endif; ?>

						<h2 class="entry-title">
							<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
						</h2>

						<?php if ( get_post_type() === 'post' ) : ?>
							<div class="entry-meta entry-meta-bottom">
								<time class="entry-date" datetime="<?php echo esc_attr( get_the_date( 'c' ) ); ?>"><?php echo esc_html( get_the_date() ); ?></time>
								<a href="<?php echo esc_url( get_comments_link() ); ?>" class="entry-comments-no"><?php comments_number(); ?></a>
							</div>
						<?php endif; ?>

						<a href="<?php the_permalink(); ?>" class="read-more"><?php _e( 'Continue Reading', 'ci_theme' ); ?></a>
					</div>
					<?php endif; // hide content ?>
				</div>
			<?php endwhile; ?>
		</div>

	<?php endif; ?>
<?php endif; ?>

	<div class="container">
		<div class="row">
			<div class="col-md-12">

and change in functions.php

	add_image_size( 'ci_slider', 1110, 600, true );

to

	add_image_size( 'ci_slider', 1920, 600, true );

then install the Regenerate thumbnails plugin, activate it and go to Tools -> Regen. Thumbnails to run a regeneration in order for the change to be applied.

Try installing the WP Editor plugin to enhance the default editor and then navigate to the /themes/olsenlight/ folder to find these files.

Finally, add this

.entry-utils:before{
background:none;
}

in your custom CSS box to remove the gray divider lines between posts.
Let me know if this works

Hi Fotis,

I’m not sure if it worked. I followed all your instructions.

Do I add the photo carousel the same way I would have added the post carousel? I tried doing this and still it only added my posts to it & didn’t give me a section to choose multiple photos.

Is it possible to have it set up like the example in my previous comment?

Also, the grey lines are still there.

Thanks Fotis

Hi there,
you will need to find a third party plugin that generates that kind of carousel/slider from www.remarpro.com plugin repository. Then replace all contents from part-slider.php with the code provided by the plugin you will find.

Can you add the css for the lines I provided before any other custom css you might have?

Hi Fotis,

Thanks for your help. I managed to get my photo carousel working!

Unfortunately, the dividing lines are still not going away even after putting at the top of the custom css box.

Any other ideas?

Thanks, Mardi

Hi Fotis,

I just realised you said to remove the grey lines between posts. This worked. But what I wanted was to remove all the lines dividing the areas on the page. so the ones around the menu bar, the ones on the page numbers, the ones for the sidebar etc, etc.

Sorry about the miscommunication.

Mardi

Hi Fotis,

Just to make your life a little busier….How do I remove the categories from above the title of a post, on the home page and in the actual post?
I found some code in a previous string & it didn’t work.
It was:
}
.entry-meta-top {
display: none;
}
Thanks Fotis.

Mardi

Hi there,
you can remove all border by adding this

.sidebar.sidebar-right,
.widget,
.site-bar,
.read-more,
#footer,
#paging,
#paging a,
#paging > span,
#paging li span {
    border: none;
}
.entry-utils:before {
    background: none;
}

in your custom CSS box.
Also try this

.entry-meta-top {
display: none;
}

only before any other custom css you might have.

Let me know if this works fine.

Once again you’ve solved all my queries!

Thank you so much Fotis!

Glad I could help!
I’d like to ask you, if you like the theme and you havent reviewed it yet if you could take a minute to rate it here it would help us a lot!