Total Slider
Support small screen devices? (3 posts)

  1. vbk100
    Posted 3 years ago #

    Seems great!

    Could you tell me if the plugin support small screen devices( Mobile and iPad etc.)? I mean the responsive style



  2. ericb2038
    Posted 3 years ago #

    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: http://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: http://www.totalslider.com/
    Version: 1.0
    License: GNU General Public License v2 or later
    License URI: http://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 :) )

  3. Van Patten Media
    Plugin Author

    Posted 3 years ago #

    ericb2038: Thanks for sharing your code!

    Just to clarify on a few points, make sure you're making your changes in a custom template file, not in the plugin itself. Every time the plugin updates, WordPress automatically overwrites all the files inside the plugin's directory, and your changes would be overwritten, which would not be good!

    Luckily, you can really easily set up a custom theme using the documentation found here.

    In a nutshell, copy the Total Slider template you want to use to your-wp-theme-folder/total-slider-templates/your-total-slider-template-name/, rename the appropriate files to match your-total-slider-template-name (if you're using that name, you would use your-total-slider-template-name.php, your-total-slider-template-name.js, etc.) then edit the style.css file to use your own information.

    You can also disable the drag and drop text feature in the PHP file of your custom theme. Just change Disable-XY-Positioning-In-Admin: No to read Disable-XY-Positioning-In-Admin: Yes.


Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Total Slider
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic