ericb2038
Forum Replies Created
-
Forum: Plugins
In reply to: [Total Slider] Support small screen devices?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 ?? )