Forum Replies Created

Viewing 1 replies (of 1 total)
  • Not out of the box.
    But changing the CSS to make it responsive is not hard ??

    I used the twentytwelve template provided with the plugins and changed
    wp-content/plugins/total-slider/templates/twentytwelve/style.css this way :

    (“#featured” is a div created by the “responsive” theme)

    (on small devices (phones) only the title is kept, the description text is hidden, otherwise the text recovers the image)

    /*
    Template Name: Twenty Twelve
    Template URI: https://www.totalslider.com/
    Description: Template designed for integration with the WordPress Twenty Twelve theme.
    Author: Chris Van Patten (inspired by work done by the WordPress team)
    Author URI: https://www.totalslider.com/
    Version: 1.0
    License: GNU General Public License v2 or later
    License URI: https://www.gnu.org/licenses/gpl-2.0.html
    */
    
    #featured p {display:none !important; padding:0 !important}
    #featured {padding:0 !important}
    
    #featured p.ts-twentytwelve-description {display:block !important;}
    
    .ts-twentytwelve {
    	width: 100%;
    	max-width: 960px;
    	margin-left: auto;
    	margin-right: auto;
    	height: 325px;
    	position: relative;
    }
    
    .ts-twentytwelve-slide {
    	background-size: cover;
    	background-color: #ECECEC;
    	background-position: center;
    	list-style: none;
    	margin: 0 !important;
    	width: 100%;
    	height: 325px;
    	position: absolute;
    	/*border-radius: 4px;
    	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); */
    }
    
    .ts-twentytwelve-link {
    	display: block;
    	max-width: 600px;
    	width: 80%;
    	min-width: 200px;
    	/*border: 10px solid transparent;*/
    	color: #444 !important;
    	font-size: 14px;
    	text-decoration: none;
    	position: absolute;
    	left:0  !important;
    	bottom:0 !important;}
    
    .ts-twentytwelve-link:hover {
    	text-decoration: none;
    }
    
    .ts-twentytwelve-overlay {
    	background: rgba(80, 80, 80, 0.8);
    	padding: 20px;
    	position: absolute;
    	left:0  !important;
    	bottom:0 !important;
    	/*border-radius: 3px;
    	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    	*/
    }
    
    .ts-twentytwelve-title {
    	margin: 0 0 24px !important;
    	line-height: 1.2 !important;
    	font-size: 22px;
    	font-weight: normal;
    	color: #fff !important;
    }
    
    .ts-twentytwelve-description {
    	line-height: 1.714285714;
    	margin: 0 !important;
    	color: #fff !important;
    	text-align:left !important;
    }
    
    @media screen and (max-width: 640px) {
    	#featured p.ts-twentytwelve-description {display:none !important; margin:0 !important;}
    	.ts-twentytwelve-title {margin:0 !important}
    }

    Your mileage may vary with the widths/heights, but basically this does integrate total-slider pretty well with the ‘responsive’ theme using its child theme ‘responsive-full-content’. The text position in my case is set up to lower right for all slides (I negate the drag and drop feature of the text in the class : .ts-twentytwelve-overlay by setting the left and bottom to 0 with an “!important” modifier), but it’s pure laziness on my part, I did not want to write JS to reflect the modifications ?? )

Viewing 1 replies (of 1 total)