thewriterb Posted March 12, 2023 Share Posted March 12, 2023 i’m hopping using some CSS code to change a display of a link. In some of my blogs, the first posting I am using as an “introduction” page. In these pages I have placed an archive block set to an index in order to make a “page index”. This is working just fine. What I would like to do is make the links to the pages appear like my hyperlinks. These links have a red color for the text and have a hover background. Now I found I can change a few text display setting of these links by using: .archive-item-link I can add an underline, and change the font size and weight. But when trying to change the color or add a hover using the code I have been using, nothing changes. Is this possible? Are these display settings set some where else? Or are the setting codes different? Here are the settings I am using for hyperlinks:{color:#ff0206!important;} a:hover{background:#c0c0c0!important; border-radius:4px!important; transition-duration: .4s;} Website: ofwhitewalls.com Here is a link to one of my introduction pages with a page index. https://www.ofwhitewalls.com/hexagon-blog/blog-post-title-one-89c3t-c8gkl I am using 7.1. Thanks for any help. Link to comment
Solution tuanphan Posted March 16, 2023 Solution Share Posted March 16, 2023 Use this code to add hover color /* link hover */ .sqs-block-archive .archive-block-setting-layout-index .archive-item-link:hover { color: #f1f !important; } thewriterb 1 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
thewriterb Posted March 18, 2023 Author Share Posted March 18, 2023 Thank you so much! That worked! Link to comment
koko1234 Posted June 26, 2023 Share Posted June 26, 2023 Hi @tuanphan I currently have a blog page to display different projects for a website i am making for a client. I used the blog page so i would be able to filter through different category work titles (experience, public work, strategic change). I have then used an archive block to display these three categories to be filtered by. What i want to do now is: Create a hover and selection effect to these archive block items so you know what category is being selected (what projects are being displayed below) Idealy i would want this selction to be shown as a black underline, or black box behind (like the button style used on the site). Even better - when hovered over, the title item has a black underline, and when selected it is highlighted with a black box behind, and text is white. I am currently using this code (but it is not quite working properly): .archive-group-name-link{ display: flex; width: 100%; } .archive-group-name-link:after { display: flex; content: ''; width: 0px; height: 1px; transition: width .5s ease; } .archive-group-name-link:hover:after { width: 100%; background: black; } Any help or guidance on this would be very much appreciated. I have attached some visuals below 🙂 Site URL: https://ranunculus-lizard-zsfk.squarespace.com/work-blog Password: kokoloco Link to comment
tuanphan Posted June 26, 2023 Share Posted June 26, 2023 8 hours ago, koko1234 said: Hi @tuanphan I currently have a blog page to display different projects for a website i am making for a client. I used the blog page so i would be able to filter through different category work titles (experience, public work, strategic change). I have then used an archive block to display these three categories to be filtered by. What i want to do now is: Create a hover and selection effect to these archive block items so you know what category is being selected (what projects are being displayed below) Idealy i would want this selction to be shown as a black underline, or black box behind (like the button style used on the site). Even better - when hovered over, the title item has a black underline, and when selected it is highlighted with a black box behind, and text is white. I am currently using this code (but it is not quite working properly): .archive-group-name-link{ display: flex; width: 100%; } .archive-group-name-link:after { display: flex; content: ''; width: 0px; height: 1px; transition: width .5s ease; } .archive-group-name-link:hover:after { width: 100%; background: black; } Any help or guidance on this would be very much appreciated. I have attached some visuals below 🙂 Site URL: https://ranunculus-lizard-zsfk.squarespace.com/work-blog Password: kokoloco With Hover Add this to Design > Custom CSS a.archive-group-name-link[href*="blog/category"]:hover { background-color: black !important; color: white !important; } a.archive-group-name-link[href*="blog/category"] { padding-left: 3px; padding-right: 3px; white-space: nowrap; } With selected Do you use Business or Commerce Plan? koko1234 1 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
koko1234 Posted June 26, 2023 Share Posted June 26, 2023 (edited) 12 hours ago, tuanphan said: With Hover Add this to Design > Custom CSS a.archive-group-name-link[href*="blog/category"]:hover { background-color: black !important; color: white !important; } a.archive-group-name-link[href*="blog/category"] { padding-left: 3px; padding-right: 3px; white-space: nowrap; } With selected Do you use Business or Commerce Plan? @tuanphan that works! Thanks so much. Is there a way to adjust the size of the black box? Make it bigger/more padding around the text? Additionally, is there a way to keep the black box there, highlighting the title that has been selected? I use the Business Plan for this website. Edited June 26, 2023 by koko1234 Link to comment
tuanphan Posted June 27, 2023 Share Posted June 27, 2023 2 hours ago, koko1234 said: @tuanphan that works! Thanks so much. Is there a way to adjust the size of the black box? Make it bigger/more padding around the text? Additionally, is there a way to keep the black box there, highlighting the title that has been selected? I use the Business Plan for this website. #1. Just adding padding value If you need to add space on top/bottom, add attribute padding-top padding-bottom #2. With selected, it will be more complex Add this code to Code Injection > Footer <script> if (document.location.pathname.indexOf("/work-blog/category/Experience") == 0) { document.querySelector('body').classList.add('t-active') } if (document.location.pathname.indexOf("/work-blog/category/Public+Work") == 0) { document.querySelector('body').classList.add('t-active') } if (document.location.pathname.indexOf("/work-blog/category/Strategic+Change") == 0) { document.querySelector('body').classList.add('t-active') } </script> <style> body.t-active a.archive-group-name-link{ background-color: black !important; color: white !important; padding-left: 3px; padding-right: 3px; white-space: nowrap; } </style> koko1234 1 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
koko1234 Posted June 27, 2023 Share Posted June 27, 2023 20 hours ago, tuanphan said: #1. Just adding padding value If you need to add space on top/bottom, add attribute padding-top padding-bottom #2. With selected, it will be more complex Add this code to Code Injection > Footer <script> if (document.location.pathname.indexOf("/work-blog/category/Experience") == 0) { document.querySelector('body').classList.add('t-active') } if (document.location.pathname.indexOf("/work-blog/category/Public+Work") == 0) { document.querySelector('body').classList.add('t-active') } if (document.location.pathname.indexOf("/work-blog/category/Strategic+Change") == 0) { document.querySelector('body').classList.add('t-active') } </script> <style> body.t-active a.archive-group-name-link{ background-color: black !important; color: white !important; padding-left: 3px; padding-right: 3px; white-space: nowrap; } </style> Thank you for all that! #1. the padding works great. #2. the section works, however it selects all three titles in the arhive block instead of just one - is there something i can change so it just highlights the one title clicked on? And, would it be possible to just have an underline instead of the black box? Again, thank you so much for all your help! Link to comment
tuanphan Posted June 28, 2023 Share Posted June 28, 2023 4 hours ago, koko1234 said: Thank you for all that! #1. the padding works great. #2. the section works, however it selects all three titles in the arhive block instead of just one - is there something i can change so it just highlights the one title clicked on? And, would it be possible to just have an underline instead of the black box? Again, thank you so much for all your help! Try this new code <script> if (document.location.pathname.indexOf("/work-blog/category/Experience") == 0) { document.querySelector('body').classList.add('t-active1') } if (document.location.pathname.indexOf("/work-blog/category/Public+Work") == 0) { document.querySelector('body').classList.add('t-active2') } if (document.location.pathname.indexOf("/work-blog/category/Strategic+Change") == 0) { document.querySelector('body').classList.add('t-active3') } </script> <style> body.t-active1 a.archive-group-name-link[href="/work-blog/category/Experience"] { border-bottom: 1px solid black; padding-left: 3px; padding-right: 3px; white-space: nowrap; } body.t-active2 a.archive-group-name-link[href="/work-blog/category/Public+Work"] { border-bottom: 1px solid black; padding-left: 3px; padding-right: 3px; white-space: nowrap; } body.t-active3 a.archive-group-name-link[href="/work-blog/category/Strategic+Change"] { border-bottom: 1px solid black; padding-left: 3px; padding-right: 3px; white-space: nowrap; } </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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment