0
Welcome Guest! Login
0 items Join Now

reproducing myriad slideshow

Last Post
Search Topic
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: reproducing myriad slideshow

    Posted 8 years 6 months ago
    • Cornelius123 - Please would you post your URL, superuser id and pswd in the secure tab of your post and i'll have a look for you.

      Why do you need fullslideshow theme for roksprocket? That only exists in Myriad Template. You don't need that theme, what you need to do is write some custom CSS to style the "slideshow" or "slideshow2" theme that you are using.

      What do you want to change?

      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.
    #1239753

  • Re: reproducing myriad slideshow

    Posted 8 years 6 months ago
    • Dear Mark,
      I would like it to look exactly like Myriad
    #1239774
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: reproducing myriad slideshow

    Posted 8 years 6 months ago
    • This will get you started...
      div.layout-slideshow .sprocket-features-content {
    left: 25%;
    bottom: auto;
    top: 25%;
    text-align: center;
}
div.layout-slideshow .sprocket-features-content .sprocket-features-title {
    font-size: 5em;
    letter-spacing: 20px;
    color: white;
    text-align: center;
}
div.layout-slideshow .sprocket-features-content .sprocket-features-title:after {
    background-color: white;
    width: 80px;
    height: 5px;
    content: "";
    position: absolute;
    left: 45%;
    top: 65%;
}
div.layout-slideshow .sprocket-features-content .sprocket-features-desc {
    margin-top: 30px;
}

      But.. I can't do it all for you, It's going to require adjustment with meda queries too. and font changes etc. This is really cuistom development work.
      // Gantry 5 custom CSS file

// import dependencies
@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) {

}

      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.

    • The following users have thanked you: neuclix

    • 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.
    #1239879

  • Re: reproducing myriad slideshow

    Posted 8 years 6 months ago
    • Dear Mark,
      The images in the slideshow are styled to height:auto and max-width:100%. How to change this to height: 100vh?
    #1240123
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: reproducing myriad slideshow

    Posted 8 years 6 months ago
    • Learn to use either, Firebug in Firefox, or Chrome Developer Tools in Chrome, they will save you hours on things like this and they're very easy to use.


      Use this code...
      .layout-slideshow .sprocket-features-img-container {
    max-height: 100vh;
}

      Regards, Mark.

    • The following users have thanked you: neuclix

    • 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.
    #1240283

Time to create page: 0.058 seconds