College Landscape cover photo

TallPhotoGuyTallPhotoGuy Registered Users Posts: 160 Major grins
edited February 6, 2021 in SmugMug Customization

With a College Landscape Gallery the cover photo covers 100% of the page, which is ok. I want to move the photo down to see some faces. how do I xo that. I think there is some CCS code.
Also - is there a way to change the vertical size of the cover photo box
Also2 - The cover photo is a horizonal banner. Is there any way to make it a vertical banner. San you wanted a flagpole picture

Comments

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @TallPhotoGuy said:
    With a College Landscape Gallery the cover photo covers 100% of the page, which is ok. I want to move the photo down to see some faces. how do I xo that. I think there is some CCS code.

    No need for custom CSS, there is a reposition icon top right corner:

  • JoMelJoMel Registered Users Posts: 10 Big grins
    What is the CSS Code to make changes to the cover photo of the College Landscape Gallery
    I want to make a border to just this Image, not to the others in the gallery, but don´t know how
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited April 12, 2021

    Try this

    .sm-gallery-cover[data-show-image="true"][data-tile-spacing="12"] {
        max-width: 98.55%;
        border: 10px #999 ridge;
    }
    

    If you change border width, 10px, adjust the max-width so the right margin equalizes with the left margin.

    BTW, when I scroll to the top I see an ghost image in the background.

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • JoMelJoMel Registered Users Posts: 10 Big grins
    Hi Allen,

    thanks for the code, but this don`t work. It makes a border, but don`t round the corners.
    I then tried to change the code to

    border-radius: 10px

    but this also don`t work.
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited April 13, 2021

    Try this with the border added to the rule.

    .sm-gallery-cover[data-show-image="true"][data-tile-spacing="12"] {
        max-width: 98.55%;  /* adjusts right margin space to equal left side */
        border: 10px #999 ridge;
        border-radius: 20px
    }
    

    There are about 4-5 different border styles you can use.
    Border Styles
    dotted, dashed, double, groove, ridge, inset, outset
    https://developer.mozilla.org/en-US/docs/Web/CSS/border

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited April 13, 2021

    deleted

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • JoMelJoMel Registered Users Posts: 10 Big grins

    I don`t want a border, just rounded corner but gave your code a try.
    It works but with a border so I changed the code to:

    .sm-gallery-cover[data-show-image="true"][data-tile-spacing="12"] {
    max-width: 98.55%; /* adjusts right margin space to equal left side */
    border-radius: 20px
    }

    Now everything is like I want it to be - Thanks

  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited April 17, 2021

    If you're just doing the radius you don't need the max-width.
    max-width: 98.55%;

    Chane to this. The square corner of the slideshow button shows with the corner radius of the image added.

    .sm-gallery-cover[data-show-image='true'][data-tile-spacing='12'],
    .sm-gallery-cover-container .sm-button-size-large {
     border-radius:20px
    }
    
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • JoMelJoMel Registered Users Posts: 10 Big grins

    Perfect - Thanks

Sign In or Register to comment.