0
Welcome Guest! Login
0 items Join Now

SOLVED Adding a class for slide titles

    • webandcie's Avatar
    • webandcie
    • Jr. Rocketeer
    • Posts: 24
    • Thanks: 0

    SOLVED Adding a class for slide titles

    Posted 8 years 4 months ago
    • Hi,

      I have a slideshow (particle News Slider) with slides. Each slide has a title.
      This title should be displayed only on the desktop and not on the mobile or tablet.
      I have to add the class "visible-desktop", but where should you?
      eg:
      <Div class = "g-newsslider-preview-title"> My title </ div>
      Must become
      <Div class = "g-newsslider-preview-title visible-desktop"> My title </ div>

      I do not know where to add it.

      Best regards.
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: SOLVED Adding a class for slide titles

    Posted 8 years 4 months ago
    • You won't be able to do that there unless you create a particle override to add the class in the particle TWIG code. A better way would be to use media queries in your custom CSS.
      // Gantry 5 custom CSS file
      
      // import breakpoints
      @import "dependencies";
      
      // Typical values are the default breakpoints set in Gantry 5
      // but these values are user definable in style settings
      // so that is why the code below uses mixins to get the actual 
      // values from Gantry 5 template.
      
      // commonly used media queries
      
      //  typically min 75rem 
      @include breakpoint(large-desktop-range) {
      
      }
      // typically range 60rem to 74.938rem 
      @include breakpoint(desktop-range) {
      
      }
      
      // typically 48rem to 59.938rem
      @include breakpoint(tablet-range) {
      
      }
      // typically 30rem to 47.938rem
      @include breakpoint(large-mobile-range) {
      
      }
      // typically max 30rem
      @include breakpoint(small-mobile-range) {
      
      }
      
      // Less commonly used media queries
      
      // typically min 60rem
      @include breakpoint(desktop-only) {
      
      }
      // typically min 48rem
      @include breakpoint(no-mobile) {
      
      }
      // typically max 47.938 rem
      @include breakpoint(mobile-only) {
      
      }
      // typically max 59.938rem
      @include breakpoint(no-desktop) {
          .g-newsslider-preview-title {
              display: none;
          }
      }
      
      // Mobile Menu Breakpoint
      @media only all and (max-width: $breakpoints-mobile-menu-breakpoint) { 
      
      }
      
      @import "nucleus/mixins/breakpoints";


      To create a custom CSS compatible with Gantry 5 please read this http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet .

      Remember to recompile CSS from base outline too.


      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    • webandcie's Avatar
    • webandcie
    • Jr. Rocketeer
    • Posts: 24
    • Thanks: 0

    Re: SOLVED Adding a class for slide titles

    Posted 8 years 4 months ago
    • Hi,

      Big Thanks !!!

Time to create page: 0.075 seconds