0
Welcome Guest! Login
0 items Join Now

Is this possible on Cerulean?

Last Post
Search Topic
    • Eagle75au's Avatar
    • Eagle75au
    • Jr. Rocketeer
    • Posts: 28
    • Thanks: 0

    Is this possible on Cerulean?

    Posted 9 years 7 months ago
    • Hi

      I have attached an image of what i would like to do but no idea if possible or how to do this some can i please get some guidance!

      I want to position an image outside the normal module positions and have this image linkable, its the orange 'Book Now' just above the menu.

      www.grampiansmotel.com.au

      Thanks
    #1236902
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: Is this possible on Cerulean?

    Posted 9 years 7 months ago
    • Put that image and link inside a custom html module and assign it to the same position as the slideshow - Then I can give you some CSS to relocate it.

      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.


      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.
    #1236940
    • Eagle75au's Avatar
    • Eagle75au
    • Jr. Rocketeer
    • Posts: 28
    • Thanks: 0

    Re: Is this possible on Cerulean?

    Posted 9 years 7 months ago
    • Hi MrT,

      Have done as you asked! .. Module is called 'Book Now' .. when you refresh the page it shows but then dissapears off the page

      Thanks for your help!

      Cheer Gav
    #1237193
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: Is this possible on Cerulean?

    Posted 9 years 7 months ago
    • Use this code...
      div#rt-slideshow .custom a {
    bottom: 100px;
    position: absolute;
    right: 20px;
    transform: scale(1.0);
}


      But... You are going to need to rescale that image and reposition it in the other viewport sizes. So you'll need to use that CSS in each of the media queries below with different values.
      /* Smartphones */
@media (max-width: 594px) {
 
}
   
/* Smartphones to Tablets */
@media (min-width: 595px) and (max-width: 882px) {

}
    
/* Tablets */
@media (min-width: 883px) and (max-width: 1074px) {

}
     
/* Desktop */
@media (min-width: 1075px) and (max-width: 1314px) {

}
     
/* Large Display */
@media (min-width: 1315px) {

}

      This is how to create a custom CSS compatible with Gantry 4...

      Simply create a file called "<TEMPLATENAME>-custom.css" and put this file in the CSS folder of the template (where <TEMPLATENAME> is the name of the template as seen in template manager e.g. rt_iridescent would be rt_iridescent-custom.css). GANTRY4 will automatically load this CSS file. If you wish, you can also have browser specific files by appending, for example, "-ie9" making the filename "<TEMPLATENAME>-custom-ie9.css"

      Also, Add module class suffix " nomarginall nopaddingall" to that module (note leading space but don't add speechmarks).

      Also, remove the paragraph tag that you added around that image 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.
    #1237261

Time to create page: 0.060 seconds