@kevinkang100 : Please go through the following theme instructions to know more about changing featured slider.
https://catchthemes.com/theme-instructions/catch-responsive-pro/#featured-slider
Let me know if you have any further issues.
Regards,
Tikaram
@karl : To remove the dots add the following additional css.
.header-image-slider .cycle-pager{
display: none;
}
Add the following code to the functions.php file of the child theme.
function rock_star_featured_slider() {
global $post, $wp_query;
// get data value from options
$options = rock_star_get_theme_options();
$enable_slider = $options['featured_slider_option'];
$sliderselect = $options['featured_slider_type'];
$enable_slidersocial = $options['featured_slider_enable_social_icons'];
$imageloader = $options['featured_slider_image_loader'];
// Get Page ID outside Loop
$page_id = $wp_query->get_queried_object_id();
// Front page displays in Reading Settings
$page_on_front = get_option('page_on_front') ;
$page_for_posts = get_option('page_for_posts');
if ( 'entire-site' == $enable_slider || ( ( is_front_page() || ( is_home() && $page_for_posts != $page_id ) ) && 'homepage' == $enable_slider ) ) {
if ( ( !$output = get_transient( 'rock_star_featured_slider' ) ) ) {
echo '<!-- refreshing cache -->';
if ( $enable_slidersocial ) {
$sliderclass = "main-slider with-social sections";
}
else {
$sliderclass = "main-slider sections";
}
$output = '
<div class="' . $sliderclass . '">
<div class="wrapper">
<div class="cycle-slideshow"
data-cycle-log="false"
data-cycle-pause-on-hover="false"
data-cycle-swipe="true"
data-cycle-auto-height=container
data-cycle-fx="'. esc_attr( $options['featured_slide_transition_effect'] ) .'"
data-cycle-speed="'. esc_attr( $options['featured_slide_transition_length'] ) * 1000 .'"
data-cycle-timeout="'. esc_attr( $options['featured_slide_transition_delay'] ) * 1000 .'"
data-cycle-loader="'. esc_attr( $imageloader ) .'"
data-cycle-slides="> article"
data-cycle-next="#next"
data-cycle-prev="#prev"
data-cycle-pager="#pager1"
>';
// Select Slider
if ( 'demo-featured-slider' == $sliderselect && function_exists( 'rock_star_demo_slider' ) ) {
$output .= rock_star_demo_slider( $options );
}
elseif ( 'featured-post-slider' == $sliderselect && function_exists( 'rock_star_post_slider' ) ) {
$output .= rock_star_post_slider( $options );
}
elseif ( 'featured-page-slider' == $sliderselect && function_exists( 'rock_star_page_slider' ) ) {
$output .= rock_star_page_slider( $options );
}
elseif ( 'featured-category-slider' == $sliderselect && function_exists( 'rock_star_category_slider' ) ) {
$output .= rock_star_category_slider( $options );
}
elseif ( 'featured-image-slider' == $sliderselect && function_exists( 'rock_star_image_slider' ) ) {
$output .= rock_star_image_slider( $options );
}
$output .= '
</div><!-- .cycle-slideshow -->
<div class="controls">
<div class="cycle-prev"><a href="#" id="prev"><span class="screen-reader-text">' . esc_html__( 'Previous Slide', 'rock-star-pro' ) . '</span></a></div><!-- .cycle-prev -->
<div class="cycle-next"><a href="#" id="next"><span class="screen-reader-text">' . esc_html__( 'Next Slide', 'rock-star-pro' ) . '</span></a></div><!-- .cycle-next -->
</div><!-- .controls -->
<div id="pager1" class="cycle-pager"></div><!-- .cycle-pager -->';
if ( $enable_slidersocial ) {
$output .= rock_star_get_social_icons();
}
$output .= '
</div><!-- .wrapper -->
</div><!-- #feature-slider -->';
set_transient( 'rock_star_featured_slider', $output, 86940 );
}
echo $output;
}
}
To see your changes instantly you will need to clear the transient. To clear Transient : Go to customizer preview and make any change you like. After the transient is cleared the slider will not stop on Hover.
Let me know if you need further assistance.
Regards,
Tikaram
@mariag : To find slider option :
Go to Appearance => Customize => Featured Slider
Select the slider type as desired and save. Let me know if you need further assistance.
Regards,
Tikaram
Hi Tikaram,
The Twenty Seventeen Theme does not offer the featured slider post option. It’s a theme related issue.
@zeldafwilliams : I could not find any text that overlays the image on the featured slider.
To reposition the logo :
Go to Appearance => Customize => Additional css and add the following css.
#header-content .wrapper{
width:95%;
}
Let me know if you have any more issues.
Regards,
Tikaram
“Additional CSS” what was previous working custum css in the “theme Options” is as follows:
h2#site-description {
font-style: normal;
font-weight: bold;
}
#featured-post .post {
text-align: left;
}
#featured-post img {
display: block;
margin: 0 auto;
}
#header-menu ul.menu { text-align: left; }
#featured-post img, #main-slider img { box-shadow: none; }
#site-title a:hover,
#site-title a:focus,
#site-title a:active {
color: #222;
}
#supplementary .widget-area,
#site-generator .copyright {
text-align: center;
width: 100%;
}
#site-generator td {
text-align: center;
}
#masthead #secundary-menu ul.menu {
display: block;
}
@media screen and (min-width: 960px) {
#site-title { font-size: 26px; }
#site-description { font-size: 16px; }
}
@albertjee : You can add Featured slider (full width) but there is no option to add promotional headline to Catch Box Pro via the customizer.
Let me know if you have any more queries.
Regards,
Tikaram
@derekbarneysrgmail-com : The header image is supposed to be above the navigation. If you check the demo, you can see the slider below the navigation. If you would like to get the image below navigation you can enable it from the customizer.
First add a page with featured image to display as a slider then Go to Appearance => Customize => Theme Options => Featured Slider. Enable featured slider and select the page to work as a featured slider.
Follow this link to know more about adding featured slider on your website.
Regards,
Tikaram
@jenkweb : The following custom css that you have used while customizing your site is causing the issue.
#masthead {
background-color: #cccccc;
}
.main-navigation a {
background-color: #cccccc;
}
Please remove these additional css from your site and the top portion of the image will be displayed.
As you can see in the demo of the theme, the featured image slider starts from the top of the page and not from the bottom of the menu.
Let me know if you need further assistance.
Regards,
Tikaram
Thanks for the speedy reply, Tikaram – I don’t think I’d quite explained myself correctly.
It seems to be some kind of issue where the header image seems to scale itself by default and then end up looking far too zoomed in and blurry.
I’ve taken these two screenshots of my site side-by-side…
On the homepage, (left) my header image (pic of me) and the slider image (pic of hand holding brushes) are appearing as I’d expect – not zoomed – if I drag the right hand edge of the browser out to the right a LONG way the header image of me begins to zoom.
On my art page (right) the header image is already zoomed in (compare the size of it to the slider image on the home page) where I’d expect it to be behaving just like the header image of myself on the homepage
To add a complication to this, I’ve had a couple of instances where the homepage has acted just the same – rather than a default of me peering over the top of the slider as in the screenshot, the image is zoomed in a long way showing only the top of my hair.
Here are the links to both images
http://www.simonphipps.com/wp-content/uploads/branding/featured_header_simonphipps.jpg
http://www.simonphipps.com/wp-content/uploads/featured/featured_art.jpg
As you can see, these are the exact same dimensions as the header image from your template
http://www.simonphipps.com/wp-content/themes/parallax-frame/images/gallery/header-bg.jpg
The same effect can be seen on one of the game images/pages – if I drag the window so it’s just wide enough – approx 980 -990 pixels the header logo is already zoomed by a factor of (I’m guessing from screencaps and measurements) 114%, which would imply that the images that are 1680 pixels across (just like your template example) are now being scaled up to 1920 pixels wide…?
http://www.simonphipps.com/games/dragonstone/
http://www.simonphipps.com/wp-content/uploads/featured/featured_dragonstone.jpg
Most peculiar
Thanks again
Simes
1) Can you please clarify what you mean by category image. Where would you like to use the image?
It would be used at the beginning of a post to denote its category.
2) I don’t think the space will be sufficient for a slider. You may use a smaller logo instead of big one. You can enable featured slider from the customizer if you would like to use a slider on your website.
So, I can just reduce the size of the logo and then enable a slider for the main page header?
Thanks!
@michalpasicki : Please follow this link to know more about image size to be used for featured content and featured sliders.
https://catchthemes.com/theme-instructions/clean-journal-pro/#featured-image
If you would like to change the width and height of featured sliders and featured content then you will need to use slider type as “Image” from the customizer.
Please use header size as specified in theme instructions.
What tool have you used to test your site.
Regards,
Tikaram
Hi Tikaram,
Thanks a lot for the hint with the slider image size. I had chosen a size too small, and now that I uploaded a bigger sized picture it all works fine.
However, when I tried to add the code you quoted above, I did not see any effect on my website, i.e. there was not more space underneath the featured slider. Any other idea how to achieve this?
Thanks a lot,
Michaela
@kelvinmace : To display video on the home page you need to change setting from the customizer
Go to Appearance => Customize => Theme Options => Layout Options
Under Archive Content Layout Select Full Content Display and save. You can display videos on your website using the video widget. Just drag and drop the video widget on any of the available widget areas.
1) Can you please clarify what you mean by category image. Where would you like to use the image?
2) I don’t think the space will be sufficient for a slider. You may use a smaller logo instead of big one. You can enable featured slider from the customizer if you would like to use a slider on your website.
Let me know if you need further assistance.
Regards,
Tikaram
@kelvinmace : Go to Appearance => Customize => Featured Slider . You can either enable or disable the sliders from
Enable Slider option. If you would like to display sliders Under Select Slider Type select the Featured slider you would like to use. You may choose from Featured post slider, Featured page slider, Featured category slider and Featured image slider.
Regards,
Tikaram
@generic_username : Go to Appearance => Customize => Header Media and Under Enable Header Media on Select disabled to disable Header image.
You do not need a plugin to display an image slider it can be done through customizer from theme options.
Go to Appearance => Customize => Featured Slider Under Enable Slider on Select Homepage/Front-page or entire site and select the featured pages that you would like to display as sliders.
You may upgrade to Pro if you would like to use post, image and category sliders. Let me know if you need further assistance.
Regards,
Tikaram
@micha : GO to Appearance => Customize => Additional css and add the following css code to add some white space between the slider and the four images underneath.
#main {
padding-top: 50px;
}
Please read the theme instructions properly and know about the image sizes to be used in featured slider. Follow this link to know more about featured slider image sizes. If you use different sizes than recommended the slider will not work properly.
Regards,
Tikaram
@micha : I did some research about your site but i could not find your sliders were full width before and the space below the slider was also not there. Please check these link to view how your site was during April and June
April 2017 : https://web.archive.org/web/20170407220234/http://travelintense.com
June 2017 : https://web.archive.org/web/20170616173823/http://travelintense.com
I am providing you additional css to make the slider full width and add space below the slider.
GO to Appearance => Customize => Additional css and add the following css code
#main {
padding-top: 50px;
}
.featured-slider .slides img {
width: 100%;
}
Let me know if you need any further assistance.
Regards,
Tikaram
Dear Tikaram,
The pro version works extremelly well!
But… i’m doing the featured post slider and I have 4 posts with featured pictures. I would like them in the slider. I’ m following the tutorial and it says: copy ‘post id’ …
My question might sound amateur..but which is the id of the post, where can I find it?
I copied the url of the post but it did not work… 🙁
Thank you,
Kamilla
@shinuj1989 : To enable Featured image slider on homepage only Go to Appearance => Customize => Featured Slider
Under Enable Slider on Select : Homepage / Frontpage and save your setting. The slider will appear in home page only now.
Regards,
Tikaram
