LeauxFi
Member-
Posts
35 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by LeauxFi
-
i fiddled with that code a bit when I realized the social icons had also gone white. messy to double up the coding but it worked. I added this onto the bottom of yours to also make my social icons black. thanks tuan! body.header--menu-open header#header.shrink use { fill: black !important; stroke: black !important;} as for the issue in number 1, sure. its super weird. but easily repeatable on any phone. step 1: go to any page and open the menu step 2: open the team link/nav folder (everything still looks fine) step 3: tap on the menu to close it out INSTEAD of hitting back to close out the nav folder. my theory is when it slides over the menu to cover the screen, then you go 1 level deeper by going into the nav folder.... it slides back only one level when you choose to close it that way. theory might make no sense but its what i imagine lol
-
this worked out perfectly, and i think i understand the code written here now which is awesome. But I've now discovered two issues because of it (my fault for sure) 1- Once you expand the folder in the menu to show the team members, and then close the menu compeltely, the text stays in place O_o and its just floating there like it didn't realize it should go away. And. 2- I have a color changing menu bar active. Its works as intended everywhere else EXCEPT in one case: When you scroll down on any page, the menu color inverts from white to black, and the font color & logo invert from black to white so they're still visible. The problem is, on mobile when you scroll down and hit menu, the word menu actually blends in now. Because the text has inverted to white, and is now on a white background. Is there a way to stop the inversion from happening ONLY when the menu opens on mobile? this is kinda confusing so I'll attach photos Top of the page view: Correct Scrolled down until the bar color changed and text inverted: correct Opened the menu after scrolling down: Wrong 😞
-
IDEALLY a "+" by the team dropdown, and a "<" by the Back button. Is that possible?
-
I mean when you scroll, the size of the menu changes slightly. On my website, I made it so it shrinks a bit and completely inverts from white background & black text, to black background & white text when you scroll. And targeting the header only on one specific page? That goes beyond my knowledge sorry. Maybe @tuanphan the genius knows?
-
Please Review my New Site!!!! Very Grateful
LeauxFi replied to jakefromleeds's topic in Feedback on Your Site
I think it looks very good, only critique I have is the font choice for the large sized font. It just looks plain and lacks personality imo. And since the font is so large, it really pulls attention. Mainly "Crafting Compelling Customer Journeys" and "We Bridge Creativity And Performance To Captivate Audiences And Boost Your Business's Bottom Line." fonts. I think a different font choice will elevate the page that much more -
First, your job is SO cool. Awesome site. Looks like your menu shrinks on every page on scroll. And the home page is the only page effected with color change on shrink. Did you use CSS to get that header/menu shrink? I did on my site, but the color change is intentional for me. I'm no expert at all, but it seems to me a custom code is the issue. And are you actively working on it now? As I was typing this, it went from changing to black, to changing to this slate gray color instead
-
indeed. but MORE like the example here: 1 - https://jakemitchellmiller.com/ -this is a perfect execution of what I wanted to achieve. Full screen splash that behaves like a normal parallax somehow. I believe this site was also created here on squarespace and was linked from another thread link from months past
-
believe it or not, i figured out a combination of code (thru terrible trial and error) to just hide the "<" and ">" completely on the mobile menu. although I would prefer to have a "+" sign instead for my dropdown. its www.thetenmg.com
-
I've put the codes you placed here into my mobile site and they work, but I find the arrows "<Back" and the dropdown menu i have ">" look super crazy. Are you still working on this one @tuanphan just wondering. I know you help everyone on here
-
How to make Instagram block carousel like gallery slideshow?
LeauxFi replied to hasher22's topic in Customize with code
it looks completely fixed now. how did you do it? it even works on mobile it seems -
agreed. doesn't seem like this was ever fixed. The carousel is unusable for me, and though the grid looks better... it doesn't have any controls. I just want to make a carousel that is cleanly spaced like the grid. seems impossible
-
How do I get the main splash video to use parallax? In another thread @tuanphan gave this solution which worked for a section further down the page: But when I try to target my splash landing which is a video... it doesn't work at all. I know this is because apparently squarespace doesn't give a public facing url for the videos you upload. So I cant use the video url to replace the one in the code provided. I saw a suggestion saying to upload directly to the custom files area under CSS, but it can only take files under 20mb. The video exceeds that. Can anyone tell me how I would achieve parallax on the splash video? Do I need to finesse an unlisted youtube video and have it point there or something? site: www.thetenmg.com
-
Did anybody find an answer to this?
-
Did something change on squarespace? Half my codes broke
LeauxFi replied to LeauxFi's topic in Code Blocks
hmmmm. i found that you're absolutely right, i was missing a "}" on line 53. So it was pulling it from another place which I guess meant everything in between was wrapped in the mobile-only ruleset. I fixed it.... but it changed nothing 😢 so i ask this... do any errors occuring BELOW the code we've been talking about (lines 76-84) effect it? As in, could a broken media/mobile code below here be the culprit? EDIT: Found the culprit. The animation/javascript for that page was causing all the issues. It broke everything. I deleted it in its entirety and everything went back to working. I'm thinking the missing "}" was getting pulled from the broken animation script putting everything in between into mobile-only mode. once i fixed that...i can see a lot more things are broken but they're obvious. it'll be tedious, but its a RELIEF. I now know at least all the code didn't suddenly break, but instead the animation which I imported from outside broke. Go figure. This was the code responsible /*Loading Animation from Will-Myers.com*/ #wm-loading-animation{ position:fixed; z-index:9999; height:100vh; width:100vw; background:#ff0000; display:flex; justify-content:center; align-items:center; } .loading-graphic{ animation: pulse 0.6s ease-in-out 0.3s; } #wm-loading-animation.hide-animation{ visibility: hidden; opacity: 0; transition: visibility 0s 1s, opacity .5s linear; /*Hide this element after load*/ } @keyframes pulse { 0% {transform: scale(1);} 50% {transform: scale(1.3);} 100% {transform: scale(1);} } /*End Loading Animation from Will-Myers.com*/ //FIX ME @media screen and (max-width:767px) { #REMOVEMEwm-loading-animation{ position:fixed; z-index:9999; height:100vh; width:100vw; background:#ff0000; display:flex; justify-content:center; align-items:center; } .loading-graphic{ animation: pulse 0.5s ease-in-out .2s; } #wm-loading-animation.hide-animation{ visibility: hidden; opacity: 0; transition: visibility 0s 1s, opacity 1s linear; /*Hide this element after load*/ } @keyframes pulse { 0% {transform: scale(1);} 50% {transform: scale(1.3);} 100% {transform: scale(1);} } /*End Loading Animation from Will-Myers.com*/- 14 replies
-
- code-injection
- code
-
(and 3 more)
Tagged with:
-
Did something change on squarespace? Half my codes broke
LeauxFi replied to LeauxFi's topic in Code Blocks
https://www.thetenmg.com/event- 14 replies
-
- code-injection
- code
-
(and 3 more)
Tagged with:
-
Did something change on squarespace? Half my codes broke
LeauxFi replied to LeauxFi's topic in Code Blocks
Thank you. I ran my code through a few checkers and it came back with no errors. And I discovered something today.... it seems that all of the codes work... for mobile. O_o So when I'm editing my site, and I switch to the mobile view? All of the codes are working as they used to. It's only on desktop application where suddenly they stopped working. I've been changing them around a little in mobile view and they're still responsive as well. So, is it possible a code is wrong if it still works as expected on mobile but not desktop? And I'm not talking about the codes where we specify mobile only with the max-width tag. I'll post an example. On this code, I simply wanted any text in a specific section that was underlined... to be turned red, alter the font size, and remove the underline. I used this code: //WORKS ON MOBILE? change underline color section[data-section-id="637c4a75c10b4a517ecbd275"] span[style*='underline'] { color: red; text-decoration: none !important; font-size: 23px; } span[style*='underline'] { color: red; text-decoration: none !important; } On mobile it works fine and you get: But on desktop view you get: I'm growing more and more confused by the minute lol. Hope you all are having a great holiday season. I'm going to go through and check line by line for any missing ; as it was suggested earlier. I don't have any error notifications from squarespace nor the other checkers though. I appreciate any help!- 14 replies
-
- code-injection
- code
-
(and 3 more)
Tagged with:
-
Did something change on squarespace? Half my codes broke
LeauxFi replied to LeauxFi's topic in Code Blocks
There WAS an error a few days ago, it said i was missing an opening { somewhere. I found it and fixed it so now theres no errors its just... nothing that used to work, still works. I just don't understand how everything could just break like that. I should start giving examples... on our gallery, it used to change to gray on mouseover using this code: //color to gray on mouseover, grid,masonry,reel, or strips .gallery-masonry-item img { filter: grayscale(0); -webkit-filter: grayscale(0); } .gallery-masonry-item:hover img { filter: grayscale(1); -webkit-filter: grayscale(1); } What changed on squarespace's side... that invalidated this? If i could understand that, I could probably fix the rest of the code too. And thank you for your help thus far. I'm pulling my hair out trying to understand this- 14 replies
-
- code-injection
- code
-
(and 3 more)
Tagged with:
-
Did something change on squarespace? Half my codes broke
LeauxFi replied to LeauxFi's topic in Code Blocks
update.... i just deleted ALL of my CSS and it made absolutely no difference to the site. O_o maybe its not that the codes are broken, but somehow the CSS isn't functioning AT ALL for my site? I even added a basic align code from a recent thread to test it, and nothing happened. /* Keep the menu items at the same height as the site title */ .header-menu-nav-wrapper { position: fixed; top: 41%; /* Adjust this value to center the menu vertically */ transform: translateY(-50%); } update #2 : got something to work. Tried a piece of a code i found recently in another thread meant for changing the font in the menu/header. Altered it to manually change the height of my menu to try and balance it out...and it worked? how did something THIS simple do the job? it doesn't even seem finished. is it really just the naming conventions that broke everything? .header * { margin-top: -2px !important }- 14 replies
-
- code-injection
- code
-
(and 3 more)
Tagged with:
-
Did something change on squarespace? Half my codes broke
LeauxFi replied to LeauxFi's topic in Code Blocks
Hey thanks for the suggestions. I've been looking through the selectors and I just don't get what I did wrong. I singled out one of the things that broke. At the top right and bottom left of my website are some social links. The last one is a tiktok link where I used CSS to change the icon to the standard tiktok icon. Whatever changed on squarespace's background broke that. All it's supposed to do is show the picture like it used to. Here's the code I have to do so BOTTOM TIKTOK ICON: //tiktok footer icon sqs-svg-icon--wrapper.url div { visibility: hidden; } .sqs-svg-icon--wrapper.url { background-image: url(https://static1.squarespace.com/static/61bd15d7e1c71204485ecbe0/t/62131fb6b7c2f243d399385c/1645420470663/tiktokroundblack.png); background-size: cover; background-repeat: no-repeat; transform:scale(1.6); position: relative; bottom: 0.5px; } TOP TIKTOK ICON: //social links in header .icon[aria-label="URL"] svg { visibility:hidden; } .icon[aria-label="URL"] { background-image: url(https://static1.squarespace.com/static/61bd15d7e1c71204485ecbe0/t/621da8ab0b9b365aea19f2f4/1646110891131/tiktoklogo2.png); background-size: 16px; background-repeat: no-repeat; transform:scale(1.04); position: relative; top: 0px; }- 14 replies
-
- code-injection
- code
-
(and 3 more)
Tagged with:
-
Did something change on squarespace? Half my codes broke
LeauxFi replied to LeauxFi's topic in Code Blocks
squarespace was my first foray into css and writing scripts outside of html way back in the myspace days lol. Ive fixed the text changing to white issue through editing styles. No idea how that changed or why. But i think you're right that IS the culprit. Something has happened on Squarespace's side that broke all my custom css. Hopefully its as simple as renaming everything but, did they list out somewhere what names things would have to change to? Example: What do i need to change here to make this work? //leauxfi banner section[data-section-id="61fdb3fc29a34e3eea8fb405"] .row { display: flex; align-items: center; justify-content: center; } section[data-section-id="61fdb3fc29a34e3eea8fb405"] .row .col .sqs-block { padding: 10px !important; } #block-daf99410cfc6092cafe3 { margin-top: -2px; } Or my now broken anchor/jump to links //event anchor links stuff html { scroll-behavior: smooth; scroll-margin: 300px; } .anchor { display: block; position: relative; top: -150px; visibility: hidden; } @media screen and (max-width: 768px) { #block-yui_3_17_2_1_1669057617341_1590729 { display: none !important; visibility: hidden; } #block-yui_3_17_2_1_1669057617341_1590729 { visibility: hidden; display: none !impmortant; } } #block-yui_3_17_2_1_1646149692611_6756 { padding-top: 7px; } @media screen and (max-width: 768px) { #block-yui_3_17_2_1_1669226799897_33295 { display: none !important; visibility: hidden; } } Something just needs to be renamed?- 14 replies
-
- code-injection
- code
-
(and 3 more)
Tagged with:
-
What happened? I haven't checked my site in months because everything was the way I wanted... I went back today for a basic update and noticed my menus were no longer vertically centered anywhere on my site. Then I noticed all the fonts that we're previously black on my bio pages for me and my team, are white. I had an animation queued up for a hidden page on the site, and the animation was completely broken as well. I had custom indexing code (thanks tuan!) on that hidden page where you click a title and it would scroll down to that part. It took a lot of experimenting to figure out how to get it to scroll down to the exact spot I wanted. But now... its back to scrolling too low on every title. Did something change in the coding in the last few months? Why are my codes suddenly not working and/or wrong without any changes? website : www.thetenmg.com
- 14 replies
-
- code-injection
- code
-
(and 3 more)
Tagged with:
-
Thanks to some of the other threads on anchor links, I got mine up and running for the most part. The problem is, they're overshooting their target by a good margin on every one. Can someone tell me what I'm missing? This is the code block I have on the page Heres the page : www.thetenmg.com/event Also, how do i make it so the menu can be collapsed to the side if they dont want to use it? This is the code block on the page to get the links visible on the right <ul class="tp-float-buttons"> <li><a href="#WHAT">WHAT</a></li> <li><a href="#WHO">WHO</a></li> <li><a href="#WHEN">WHEN</a></li> <li><a href="#WHERE">WHERE</a></li> <li><a href="#SPONSOR">SPONSOR</a></li> <li><a href="#GUEST">GUEST LIST</a></li> </ul> <style> ul.tp-float-buttons { position: fixed; top: 15%; right: 3px; z-index: 999; list-style: none; padding-left: 0; margin: 0; } ul.tp-float-buttons a { color: white; background-color: black; padding: 3px; margin-bottom: 2px !important; display: inline-block; min-width: 125px; text-align: center; font-size: smaller; top: 125px; position: relative; } </style> And this is the CSS code i had pertaining to it: html { scroll-behavior: smooth; scroll-margin: 300px; } .anchor { display: block; position: relative; top: -150px; visibility: hidden; #WHAT {top: -250px;} } and finally this is the code block i put in the very top of each section for the anchor links to refer to: <div ID="GUEST"></div> and <div ID="WHEN"></div> and <div ID="WHO"></div> etc etc
-
My menu on desktop suddenly isn't vertically aligned, HELP!
LeauxFi replied to LeauxFi's topic in Customize with code
i dont think so, its worked out fine for me. I had to go back and adjust some of the other css i had but it all worked out in the end. -
My menu on desktop suddenly isn't vertically aligned, HELP!
LeauxFi replied to LeauxFi's topic in Customize with code
this worked perfectly. thank you! but arghhhh i thought i could figure this out with my novice skills. then you drop code i don't even understand how to read. "a".header? skip-link? what is this code instructing the site to do? is the cause of the problem some invisible button element that threw the alignment out of wack all the sudden? i just want to understand what happened IF possible edit: and now that ive gone back, i see it threw the banners i had on my website off alignment. however, i can tell it UNDID the need for me to have custom css to center them correctly. so your code seems to have fixed my banner alignment issues totally. what happened here?