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

BREN

Circle Member
  • Content Count

    15
  • Joined

  • Last visited

  1. Hey Rowzi, Thank you so much for posting such a detailed breakdown of the steps and code needed! One question though.. I'm working on the Pacific template and am separating pages within the index with their own banner image... Long story short... I'd like to have each banner image change state/picture/something on rollover. Do you know if this code will work for that? Here's the site I'm working on to give you a better idea. Just click on the Projects tab to scroll down. www.quarryrockdevelopments.com Cheers!
  2. Hey @Sjiron, were you using it on a page within an index? I had the same problem when using it on a page within an Index. To solve the issue, try one of two things: A. copy and paste the Header Injection Code within the index area... click on the gear of the Index and paste it within the advanced tab at the header injection area.... Failing that, take the page out of the index and just have it on its own. I do find using so much code does create more bugs. Sometimes I need to close out of squarespace altogether when it starts getting too buggy... Hope this helps!
  3. OKAY! I found out how to do what i want to do. Maybe there's an easier way, but my way involved code boxes. So i had to say goodbye to the gallery block... It was a bit repetitive to do it 24 times, but once i found a rhythm it really didn't take much time. I essentially utilized the answers provided here: https://answers.squarespace.com/questions/67508/popup-window-with-text.html so thank you @kenwestphal! Step 01. Insert the following into the code injection area of the advanced tab of the page you wish to utilize the pop-ups: <link href="//cdn.rawgit.com/noelboss/featherlight/1.3.2/release/featherlight.min.css" type="text/css" rel="stylesheet" title="Featherlight Styles" /><script src="//cdn.rawgit.com/noelboss/featherlight/1.3.2/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script> Step 2. Now you need to create two code boxes. Code box 01 - For Display (this is your image or text that will show on the page) <a href="#" data-featherlight="#bio-name"> <img src="image link goes here"</a> <p style="text-align:center; color:#727272;">Text Goes Here</p> Step 03. Code Box 02 - For your Bio/pop-up Window <div style="display:none;"> <div id="bio-name"> <h3>Header/Name</h3> <p style="font-family:Lato; font-weight:500; font-style:normal; font-size:12px; letter-spacing:.4px; line-height:2.18em; color:#999999;" !important> Text goes in here. </p> </div> </div> (Play with the CSS styles to customize it how you see fit.) Step 04. Advanced Styling in Custom CSS For me, I just wanted to set a max width, so i added the following to the Custom CSS tab (Design>Custom CSS) .featherlight .featherlight-content {max-width: 500px;} BOOM. I had to repeat steps 2 & 3 a few times (24, actually) to set up my page, but it got me the result i was looking for. Check out my finished result at http://vancouver2017.com/speakers/#pechakucha I'd love to hear any feedback or ways to make this easier in the future. Cheers,Brendan
  4. Hey @AndreaDev, thank you for the response - it's most appreciated. Unfortunately, this wasn't exactly what i was looking for, as the photo also pops up in full screen with the text over the top - makes it hard to read. Is there a way so that ONLY the text can pop-up in a small window/lightbox, rather than A) with the photo, and B) without filling the screen? Any help at all is appreciated! CheersBrendan
  5. Thank you so much @AndreaDev ! I'm going to work with this and see if I can get it to work! I'll let you know if i run into any roadblocks... Thanks so much for helping me here!
  6. Hey Everyone, Maybe you can help me figure this out. I'm working on this site: www.vancouver2017.com I've utilized a lot of code that I have found through this forum - and I'm super happy with how the site has turned out - so thank you! Keep posting your answers and questions because it's incredibly useful. Anyway... I have a question that I haven't found any answers for yet. On the Speakers page (http://vancouver2017.com/speakers/) about halfway down, I have a gallery of 20 photos of people who will be doing a PechaKucha-style talk at our conference. It was suggested to me that I create a lightbox of their Bio when clicking on the image. Is there a way to get this done within the gallery block? If not, if there's a way to set up individual image blocks with the same result, I would be open to suggestions there too. Can anyone help me out with this? Btw, I am using the Pacific Template.Cheers, and thank you!!Brendan
×
×
  • Create New...