Jump to content

gcerceo

Member
  • Posts

    37
  • Joined

  • Last visited

Everything posted by gcerceo

  1. @Beyondspace I have a new question about the Portfolio templates & the linking on the parent pages. How can I change the links on the main portfolio page, to link to existing pages (that aren't part of the portfolio project)? I have 4 other pages I want to use as the linked pages instead of the templated portfolio projects. If there's an existing forum solution/thread, please share. I don't want you to re-hash a comment if someone has already done this.
  2. Wow @Beyondspace with the dunk! Thats definitely helpful! That solves a lot of my initial problems. I can now format it with css. I have a few other things I'd like to implement now thats sorted out. On this site, the cursor position wobble on the floating background images. And, creating the parallax on those images with a static display headline block floating. Is that a scrolling JS library? Here is a custom site that has a few really delightful UX notes to it. Theres obvs some limitations on a SS site., but I know I can incorporate some types of interactions that enhance my splash page. I'll post my test page once I get some of those parallax fx in it. And thank you @Beyondspace I'v wrestled all week with my test homepage in an attempt to hobble and experiment.
  3. Hi Everyone, I have a feeling this may be a longer thread as theres a few things I'm trying to accomplish with javascript, css, and html on a test page. My intention is to save this section and bring it into my index once its working properly as my main content navigation menu. My first hurdle has been whether or not to use an ul & li, I found a codepen that I swapped with my images and font styling. Conversely, I've inspected other more successful use cases of this effect and seen people use a <div> and classes for an anchor tag (right now my list is not clickable). the list items need to be links, because its going to be navigation to those project pages. My second hurdle may be a result of the codepen using lists instead of div and classes to only target those specific items. Anyone who is much more experienced with coding conventions, please help me out here– the text and formatting of all the template pages when I go to 'add section' are all messed up and broken. I assume because of the codepen css and ul/li stuff... how can I create this effect but not effect the SS built in page templates? My third hurdle is also somehow related to the codepen JS. The text blocks are missing if I add a section and add a text block. And, in those other sections the background photo moves when I hover on the list item. I removed the section above the blue main body section, to keep the problem focused. Its all related I know, but trying to knock out one thing at a time. I feel like its partially working, the 2nd and third hurdle are the big ones, because I've tried to use IDs and classes for the LI but that doesn't seem to work. www.grahamcerceo.com/home-1 pw: boom Thanks for the help.
  4. Im replying to my own thread lolz. @tuanphan let me know if this makes sense below. So I was able to get the codepen to work, with their images... however, theres some issues now that I see with not defining ul & li classes to those images (when I go and add block, the templates with images are all screwed up, I assume because Im messing with SS list code? how can I fix the ul/li issue so I dont screw up the rest of my site's lists, and how can I make sure this section works properly and I can save it to implement on my actual index page?
  5. url www.grahamcerceo.com/home-1 pw: boom
  6. Heres the codepen: html <img src=""> <ul> <li class="item" data-image="https://ct112013.files.wordpress.com/2013/07/pasteeel.jpg">WOMAN</li> <li class="item" data-image="https://i.pinimg.com/736x/1a/e9/ff/1ae9ff68eddb75113cc797f1324515b9--color-coordination-reiss.jpg">MAN</li> <li class="item" data-image="http://www.todaysparent.com/wp-content/uploads/2014/02/Mint1.jpg">KID</li> </ul> <style> html, body { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100vw; height: 100vh; background-color: #ffebd5; display: flex; justify-content: center; align-items: center; } ul { list-style: none; padding: 0; margin: 0; position: relative; } ul li { font-family: "Belleza", sans-serif; position: relative; font-size: 80px; text-align: center; -webkit-text-stroke: 1px black; color: transparent; margin-bottom: 40px; z-index: 1; } img { position: absolute; width: 30%; object-fit: contain; transform: translateX(-50%) translateY(-50%); top: 50%; left: 50%; z-index: 10; } </style> <script> const items = document.querySelectorAll('.item') const image = document.querySelector('img') items.forEach((el) => { el.addEventListener('mouseover', (e) => { imageData = e.target.getAttribute('data-image') console.log(imageData) e.target.style.zIndex = 99 image.setAttribute('src', imageData) }) el.addEventListener('mousemove', (e) => { image.style.top = e.clientY + 'px' image.style.left = e.clientX + 'px' }) el.addEventListener('mouseleave', (e) => { e.target.style.zIndex = 1 image.setAttribute('src', '') }) }) </script>
  7. There was a code tweak SS support needed to deploy to my site after requesting screenshots of my developer panel. All fixed. I will mark this as resolved. Thank you Tuanphan.
  8. I wasn't sure which section to post this in. The editing on the backend is still broken, see above. It was fine yesterday, and this morning.
  9. The view of my site and all its pages seen below. Not sure if anyone else is experiencing this. Thankfully, my site isn't broken. Status.SS says editing is operational.
  10. Support has reinforced its merely technical, and not actually changed to that styling.
  11. same. waiting on support queue. i hope its resolved soon.
  12. I'm also interested in changing this. The responsive alignment and spacing sucks before it hits the mobile breakpoint, especially with text blocks. site: grahamcerceo.com Does that string of code go into the advanced tab (header injection) on each page's settings? Thanks again!
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.