TaylorLove

@tuanphan you are AMAZING!!! How did you learn all this? I am trying to learn more so I don't have to ask the forum so much... do you recommend any videos or courses or ways to understand even just the basics to begin with?

@creedon I took the long code off the home index because it was showing the page messed up like in that image I last shared and I have some potential clients looking at my website this week and didn't want it to look weird. However, now it is working! I guess it wouldn't show the effect while I was viewing in squarespace backend of editing but when i looked at the page regularly outside of squarespace it did work! haha. It just didn't show the effect while I was in editor mode... didn't know that was a thing! Sorry about all the confusion! Is that normal to have code not display proper when testing in editor mode on squarespace but works fine when viewed on the actual website url/not squarespace view. If so, I didn't know that... Thanks again for your help and if you got any more time could you point me in a direction of reading or help with this or tag any other squarespace helpers you know who could help:

See image for what happened... still being weird, unfortunately. @creedon this is what I mean by "short code" <style> html:not( .squarespace-damask ) [id="home/title"].twc-ehpct { background-color : black; } </style> this is what I mean by "long code" <script> $( ( ) => { /* begin element hover parent class toggle Version : 0.1d0 SS Versions : 7.1, 7.0 Dependancies : jQuery Notes : this effect is not active in SS Preview to test it use private browsing < https://bit.ly/3f6lhq2 > this is a base effect meant as a base for other effects. this code alone shouldn't produce any visible change By : Thomas Creedon < http://www.tomsWeb.consulting/ > */ const hoverSelector = '#block-yui_3_17_2_1_1645803829176_2425'; const parentSelector = '.Index-page'; // do not change anything below, there be the borg here if ( window.frameElement !== null ) return; // bail if in preview const clss = 'twc-ehpct'; const $hoverElement = $( hoverSelector ); const $parentElement = $hoverElement .parents ( parentSelector ); $( hoverSelector ) .on ( 'mouseover', function ( ) { $parentElement.addClass ( clss ); } ) .on ( 'mouseout', function ( ) { $parentElement.removeClass ( clss ); } ); // end element hover parent class toggle } ); </script>

@creedon Haha. I wish I could say I understood what you just meant but I am so "green" aka new to this I don't fully understand. I did try some things but no luck... I also read back thru everything you said and re-looked at the links you reference for reading more... Here is what I have tried *see images. I tried making a video but it was too large to upload... I added this to the settings>advanced>code injection (header) Then added the new code you mentioned previously here... Did I install the code in the correct place (pages >page on the "title" page clicked the gear icon> then advanced and copied it there)? I tried it with just this new code only, tried it just with the old code only, tried it with both of them... no luck on any attempts. I feel bad I don't understand what you are saying. I really don't want to monopolize your time... but would like to get this to work if that is possible... going forward if you have any suggestions on courses or youtube videos, etc that help me understand this as a whole better let me know (like general coding basics and such). I'd like to learn more just not sure where or how to start....

@tuanphan @creedon maybe you all know what to do about this. feel free to tag any other helpful squarespace members that might have advice on these two issues I am facing. 🙂

Site URL: https://www.taylorlovecreative.com/about I tried looking at various past responses on the forum to issues related but not really finding the solutions I need... and have tried some different codes but have been unsuccessful... I am working with a Brine family template 7.0 (I think it is called Jaunt)... On my website "about" page (https://www.taylorlovecreative.com/about) I have two big issues: 1. FIX H2 TEXT WRAPPING ON TABLET VIEW: On my "about" page h2 text is wrapping and looks bad. mostly on tablet view but wondered if there is a way for it not to wrap... but want to make sure it will always be bigger than h3 and normal sized text. (see attached photo). I am fine if the image in the middle or the black block of text gets smaller if that is helpful to alleviate the issue of h2 text wrapping in tablet view. 2. REORDER TEXT BLOCKS ON MOBILE VIEW: My "about" page is laying out the text in an order I do not like once in mobile view, it is fine on tablet and desktop view. On mobile view I want to re-order the text blocks... there are 8 text blocks (not including the lines)... all need to be reordered... The order I want it in is: 1. image 2. black box of text 3. credentials 4. experience 5. certificates 6. clients 7. tools Hope this makes sense/this is possible.

@creedon I got a business plan now, but I am still struggling to make this work. Sorry! I am sure it is something simple, just very new to this... The jQuery is in Settings > Advanced > Code Injection > HEADER. (see image) I added the code to the page by looking at the page, then clicking the gear icon next to that page and adding it in the page settings > advanced and update the code to this: (it didn't work if I added it to the page or on the index page... tried both). (see image) const hoverSelector = '#block-yui_3_17_2_1_1645803829176_2425'; const parentSelector = '.Index-page'; so full code is: <script> $( ( ) => { /* begin element hover parent class toggle Version : 0.1d0 SS Versions : 7.1, 7.0 Dependancies : jQuery Notes : this effect is not active in SS Preview to test it use private browsing < https://bit.ly/3f6lhq2 > this is a base effect meant as a base for other effects. this code alone shouldn't produce any visible change By : Thomas Creedon < http://www.tomsWeb.consulting/ > */ const hoverSelector = '#block-yui_3_17_2_1_1645803829176_2425'; const parentSelector = '.Index-page'; // do not change anything below, there be the borg here if ( window.frameElement !== null ) return; // bail if in preview const clss = 'twc-ehpct'; const $hoverElement = $( hoverSelector ); const $parentElement = $hoverElement .parents ( parentSelector ); $( hoverSelector ) .on ( 'mouseover', function ( ) { $parentElement.addClass ( clss ); } ) .on ( 'mouseout', function ( ) { $parentElement.removeClass ( clss ); } ); // end element hover parent class toggle } ); </script>

@bangank36 @EleniM any updates? did you get squareup integrated... I am trying to get it integrated myself...

Ohhh so I need a business or commerce plan to add it, right? @creedon

then I also tried this in the inject code header section and updated this part const hoverSelector = '#block-yui_3_17_2_1_1645803829176_2425'; const parentSelector = '.Index-page'; @creedon

I am very new to putting in code, just find codes online and throw them in but I don't really understand it... yet! I want to learn it better so if you have any suggestion on where to learn let me know... @tuanphan @creedon I'd love to get to the point I actually understood code, difference between css and javascript etc and how to really understand looking at the "inspect" view on chrome shows. It is like a foreign language mostly to me but I find it fascinating yet confusing. haha. @creedon I am still struggling to make it work... I already had that Element Hover Parent Class Toggle code injected in the header from when I added the mouse as a dot. If I put this const hoverSelector = '#block-yui_3_17_2_1_1645803829176_2425'; const parentSelector = '.Index-page'; in my custom css page it says there is an error and doesn't do what you show in the video, so I am doing something wrong. (see image). I tried getting rid of my old code and just using the one above, tried it with the old code plus the new one above, I tried putting this new code above mixed in with the old code (replacing the block words with this new code)... nothing worked for me. I also don't know what "set the code constants thusly" means exactly.

https://mayflower-chihuahua-6fw3.squarespace.com/ password: tlc2022 I requested my domain to transfer, so once the transfer is complete it will be taylorlovecreative.com @tuanphan @creedon

currently it isn't live. @tuanphan should I publish it or message you password?

@creedon @tuanphan since you all were helping with a similar problem on the past forum referenced in my question above... thought I'd see if you knew what to do for this challenge I am dealing with? Thanks!

I was able to figure out how to make the block background change color if you hover over the image, but cannot figure out how to make the whole page background change when you hover over that image on that same page... Attached Image 1: before hover and code to the left. Attached Image 2: after hover and code to the left. (It colors the block background black, which is cool but I want the whole page to be black no just the block. the image is the only thing on the page. I saw this question asked here and tried this but it didn't work for me: