How to change the length of text on sliders? & questions about customization

Sparkling
1

Hi!
Thank you for offering such a nice theme for free! I’m enjoying it so much.

I’m now working on the sliders and I’m wondering if I can customize it in the following points:

  • length of the text: as a default, it shows only 55 letters. How I can show more text? In the sample photo of Sparkling theme, it shows more texts.
  • background color of the title: In the title area, now it has a pink color. Is it possible to change that?
  • position of the text area: now it is positioned left-below. Can I place it in other position, such as center or right above, etc?

Thank you so much for your help!!

2

Hi @kaori,

I hope you are well today and thank you for your questions.

length of the text: as a default, it shows only 55 letters. How I can show more text? In the sample photo of Sparkling theme, it shows more texts.

You can display more text by adding the following code in the functions.php file of your child theme. Change the 100 value in the following code to number of words you want to display.


function custom_excerpt_length($length){ 
	return 100; // Change the number of words length here.
} 

/**
 * Featured image slider, displayed on front page for static page and blog
 */
function sparkling_featured_slider() {
  if ( is_front_page() && of_get_option( 'sparkling_slider_checkbox' ) == 1 ) {
    echo '<div class="flexslider">';
      echo '<ul class="slides">';

        $count = of_get_option( 'sparkling_slide_number' );
        $slidecat =of_get_option( 'sparkling_slide_categories' );

        $query = new WP_Query( array( 'cat' =>$slidecat,'posts_per_page' =>$count ) );
        if ($query->have_posts()) :
          while ($query->have_posts()) : $query->the_post();

          echo '<li><a href="'. get_permalink() .'">';
            if ( (function_exists( 'has_post_thumbnail' )) && ( has_post_thumbnail() ) ) :
              echo get_the_post_thumbnail();
            endif;

              echo '<div class="flex-caption">';
                  if ( get_the_title() != '' ) echo '<h2 class="entry-title">'. get_the_title().'</h2>';
                  if ( get_the_excerpt() != '' ){                  	
                  	add_filter('excerpt_length', 'custom_excerpt_length');
                  	echo '<div class="excerpt">' . get_the_excerpt() .'</div>';
                  	remove_filter('excerpt_length', 'custom_excerpt_length');
              		}
              echo '</div>';

              endwhile;
            endif;

          echo '</a></li>';
      echo '</ul>';
    echo ' </div>';
  }
}
background color of the title: In the title area, now it has a pink color. Is it possible to change that?

Yes you can change it by adding the following code in the style.css file of your child theme.

.flex-caption h2.entry-title {
  background-color: #CEE213;
}

Please change the color value in the above code to whatever you want to use by referring the following pages.

http://www.w3schools.com/html/html_colorvalues.asp
http://www.w3schools.com/tags/ref_colorpicker.asp

position of the text area: now it is positioned left-below. Can I place it in other position, such as center or right above, etc?

Yes you can it right above by adding the following code in the style.css file of your child theme.

div.flex-caption h2.entry-title, div.flex-caption .excerpt {
  float: right;
  clear: both;
}

I have attached the sample child theme containing above changes which you can use.

Best Regards,
Movin