Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
laurentaylar

Add button on gallery page slideshow

Question

A client provided a design to me that showcases a scrolling slideshow that has a heading, paragraph text and button. In Rally, the gallery page only allows text links. I've tried to figure this out by looking through help pages but I can't find the answer.

I found the code below, but I'm not seeing it work inside the Rally template. I'm not sure where I'm supposed to enter the info for my website - is the section# and p?

section#ingredients-gallery .Index-gallery-wrapper .Index-gallery-item p:last-child {
    background: #fff;
    color: #000;
    display: block;
    max-width: 200px;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 10px;
}

 

I also need to figure out how to hide the navigation background on index pages with a gallery page on top. I was able to hide the navigation background for regular pages with a banner image inside an index pages, but for gallery pages it goes back to showing a white navigation background.

Edited by laurentaylar

Share this post


Link to post

9 answers to this question

Recommended Posts

  • 0
15 minutes ago, laurentaylar said:

Thanks! I just tried that but it's not working. Is there something else I should try?

Have you inserted display: block; yet?

link is inline element, you first need to convert to inline-block or block with display: block; to use margin-top.

I see you have syntax error, maybe missing ; after !important

also, border should be: border: 2px solid #fff !important;

image.thumb.png.fdd0e5b0e0fc81bd4d1a271fc1edb5a6.png

Edited by tuanphan

You can send your question to my email to get faster answer.

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
  • 0
3 hours ago, laurentaylar said:

@tuanphan it's https://sawfish-frog-73kc.squarespace.com/ - "password2019"

I changed the template but hopefully that doesn't matter. I want to be able to turn all the links into a button that is a pill, transparent, and has a white outline/white text.

Thanks for your help!

Add to Home > Design > Custom CSS

.Index-gallery-item-content-body a {
    background: #fff;
    color: #333;
    padding: 10px 20px;
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
  • 0

Actually it looks like I figured it out with this:

.Index-gallery-item-content-body a {
      color: #ffffff;
      background-color: transparent !important;
      border-radius: 20px;
    padding: 8px 20px;
      border: solid 2px #ffffff!important
}

 

Now I'm just curious how to add spacing between the paragraph and the button so they're not so close to one another. Do you know how to add that?

Share this post


Link to post
  • 0
1 hour ago, laurentaylar said:

Actually it looks like I figured it out with this:

.Index-gallery-item-content-body a {
      color: #ffffff;
      background-color: transparent !important;
      border-radius: 20px;
    padding: 8px 20px;
      border: solid 2px #ffffff!important
}

 

Now I'm just curious how to add spacing between the paragraph and the button so they're not so close to one another. Do you know how to add that?

display: block;

margin-top: 20px;


You can send your question to my email to get faster answer.

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...