hansworks Posted January 7 Share Posted January 7 (edited) Hello All- Trying, unsuccessfully to style a link in Exerpts on a blog page. I would like to have a hover color, medium bold the link, and remove the underline. Is it also possible to have the web link open a new browser window the same behaviour as the passthrough-link? Using inspector I can see that exerpt text is p.preFade.fadeIn but dont know where to go from there with code. Many Many thanks for any support. https://playbook-nth.squarespace.com/communications password: NTH2024# First blog entry “Using Accessibility Features” is the entry I am working on Edited January 7 by hansworks added a function Link to comment
tuanphan Posted January 9 Share Posted January 9 You mean make this bold + change color on hover + open in new window? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
hansworks Posted January 9 Author Share Posted January 9 Thank you for your reply. Yes, that is correct: bold + change color on hover + open in new window Link to comment
tuanphan Posted January 10 Share Posted January 10 On 1/8/2024 at 3:53 AM, hansworks said: Hello All- Trying, unsuccessfully to style a link in Exerpts on a blog page. I would like to have a hover color, medium bold the link, and remove the underline. Is it also possible to have the web link open a new browser window the same behaviour as the passthrough-link? Using inspector I can see that exerpt text is p.preFade.fadeIn but dont know where to go from there with code. Many Many thanks for any support. https://playbook-nth.squarespace.com/communications password: NTH2024# First blog entry “Using Accessibility Features” is the entry I am working on It looks like you changed url, the page doesn't work now Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
hansworks Posted January 15 Author Share Posted January 15 Hi, apologies, we keep changing it after every meeting. https://playbook-nth.squarespace.com/all-resources pw: NHT2024 Link to comment
tuanphan Posted January 17 Share Posted January 17 On 1/16/2024 at 1:41 AM, hansworks said: Hi, apologies, we keep changing it after every meeting. https://playbook-nth.squarespace.com/all-resources pw: NHT2024 NHT2024 incorrect password now 😆 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
hansworks Posted January 17 Author Share Posted January 17 Oh boy, I'm drinking too much coffee! Forgot the # https://playbook-nth.squarespace.com/all-resources NTH2024# Link to comment
tuanphan Posted January 20 Share Posted January 20 On 1/18/2024 at 12:09 AM, hansworks said: Oh boy, I'm drinking too much coffee! Forgot the # https://playbook-nth.squarespace.com/all-resources NTH2024# It shows this Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
hansworks Posted January 20 Author Share Posted January 20 (edited) Apologies, url keeps changing as we work on the site. Also, just a note, we are using the excerpt only for text because we dont want user to go into details of the blog entry. https://playbook-nth.squarespace.com/tech-resources PW: NTH2024# Edited January 20 by hansworks Link to comment
tuanphan Posted January 23 Share Posted January 23 Add this code to Website Tools (under Not Linked) > Code Injection > Footer <style> .blog-excerpt a:hover { font-weight: bold; color: #f1f; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function() { $('.blog-excerpt a').attr('target','_blank'); }); </script> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
hansworks Posted January 24 Author Share Posted January 24 (edited) Amazing! Thank you sooooo much for the script, definitely outside my capacity. One question: How do I increase the weight and reduce the size of the "VIEW WEBSITE" link before hover effect? Edited January 25 by hansworks Link to comment
tuanphan Posted January 28 Share Posted January 28 On 1/24/2024 at 11:47 PM, hansworks said: Amazing! Thank you sooooo much for the script, definitely outside my capacity. One question: How do I increase the weight and reduce the size of the "VIEW WEBSITE" link before hover effect? Edit top code <style> code to this <style> .blog-excerpt a { font-size: 10px; font-weight: 300; } .blog-excerpt a:hover { font-weight: bold; color: #f1f; } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
hansworks Posted February 5 Author Share Posted February 5 That work perfectly, now I can fiddle with the colors and sizes to my heart's content. So grateful for your help!!! tuanphan 1 Link to comment
hansworks Posted April 4 Author Share Posted April 4 (edited) Looking for some help updating the above code https://playbook-nth.squarespace.com/technology-resources. PW:NTH2024# #collection-659613958b47182e64b137e0 was targeted in sitewide CSS to make changes as well as footer injection to create hover. /*BLOG ADJUST SECTION: remove accessibilty arrow on blog post title*/ .passthrough-link:after { content: "" !important; } /* blog page title link hover color */ .passthrough-link:hover { color: none; } // remove click through on categories body#collection-659613958b47182e64b137e0 .blog-categories { pointer-events: none; } /* remove click through on title */ body#collection-659613958b47182e64b137e0 .blog-title { pointer-events: none; } /* remove click through on tags */ body#collection-659613958b47182e64b137e0 .blog-tags { pointer-events: none; } (1) https://playbook-nth.squarespace.com/technology-resources/queens-connected-mobile-hotspot-lending-program Sitewide how can i block the "tags" from showing - see attached screen shot. I'm using Universal Filter if that makes any difference. (2) https://playbook-nth.squarespace.com/social-services-referral-resources on this page only #collection-65afe261149961050212a96a could a hover be added to the accessability arrows? I have tried removing the code .passthrough-link:after {content: "" !important; but the arrows are not showing after removal. Could this be caused by Universal Plugin? Grateful for the help! Edited April 4 by hansworks Link to comment
tuanphan Posted April 7 Share Posted April 7 On 4/4/2024 at 11:26 AM, hansworks said: Looking for some help updating the above code https://playbook-nth.squarespace.com/technology-resources. PW:NTH2024# #collection-659613958b47182e64b137e0 was targeted in sitewide CSS to make changes as well as footer injection to create hover. /*BLOG ADJUST SECTION: remove accessibilty arrow on blog post title*/ .passthrough-link:after { content: "" !important; } /* blog page title link hover color */ .passthrough-link:hover { color: none; } // remove click through on categories body#collection-659613958b47182e64b137e0 .blog-categories { pointer-events: none; } /* remove click through on title */ body#collection-659613958b47182e64b137e0 .blog-title { pointer-events: none; } /* remove click through on tags */ body#collection-659613958b47182e64b137e0 .blog-tags { pointer-events: none; } (1) https://playbook-nth.squarespace.com/technology-resources/queens-connected-mobile-hotspot-lending-program Sitewide how can i block the "tags" from showing - see attached screen shot. I'm using Universal Filter if that makes any difference. (2) https://playbook-nth.squarespace.com/social-services-referral-resources on this page only #collection-65afe261149961050212a96a could a hover be added to the accessability arrows? I have tried removing the code .passthrough-link:after {content: "" !important; but the arrows are not showing after removal. Could this be caused by Universal Plugin? Grateful for the help! #1. You can use this code to Technology Resources Page Header Code Injection <style> .blog-meta-item.blog-meta-item--tags { display: none !important; } </style> #2. You mean add an arrows after Website link? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
hansworks Posted April 10 Author Share Posted April 10 (edited) That worked perfectly! Thank you so much For some reason the pre hover color (from higher up in the thread ) on the link "WEBSITE" is not displaying as a color. I am tring to have the pre-hover color as red and the hover color is set to blue using CSS. I think this is probably a SQSP site style issue as I cant find it in CSS. Edited April 10 by hansworks Link to comment
tuanphan Posted April 13 Share Posted April 13 On 4/10/2024 at 11:42 PM, hansworks said: That worked perfectly! Thank you so much For some reason the pre hover color (from higher up in the thread ) on the link "WEBSITE" is not displaying as a color. I am tring to have the pre-hover color as red and the hover color is set to blue using CSS. I think this is probably a SQSP site style issue as I cant find it in CSS. Use this CSS code body#collection-659613958b47182e64b137e0 { .blog-excerpt a { color: red; } .blog-excerpt a:hover { color: #6789d3 !important; }} Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
hansworks Posted April 15 Author Share Posted April 15 Thank you so much! This also allows me to repeat this for other blocks as well, so super useful. Another related aspect of the blog has come up: On https://playbook-nth.squarespace.com/social-services-referral-resources pw NTH2024 I am trying to make a link on each blog excerpt jump to each the blog entry in the same way that the title links to the entry. link would be blue text that changes to red on hover. I have attached a sample image below using 'NYC 988..." entry as an example. Many thanks. Link to comment
tuanphan Posted April 18 Share Posted April 18 On 4/16/2024 at 1:49 AM, hansworks said: Thank you so much! This also allows me to repeat this for other blocks as well, so super useful. Another related aspect of the blog has come up: On https://playbook-nth.squarespace.com/social-services-referral-resources pw NTH2024 I am trying to make a link on each blog excerpt jump to each the blog entry in the same way that the title links to the entry. link would be blue text that changes to red on hover. I have attached a sample image below using 'NYC 988..." entry as an example. Many thanks. Password is incorrect now Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
hansworks Posted April 19 Author Share Posted April 19 So sorrry that's a typo, PW is NTH2024# Link to comment
tuanphan Posted April 22 Share Posted April 22 (edited) On 4/18/2024 at 3:41 PM, tuanphan said: Password is incorrect now I guess you can add additional link there, or what is problem here? Edited April 22 by tuanphan typo Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment