Paul_in Posted June 10, 2020 Share Posted June 10, 2020 Site URL: https://www.casegoods.in/404 Hi everyone, password of the website : CaseGoods_C3 over the past 3 weeks, I got my hands on how to find the right ".sqs" blocks with developer tools on a browser and use it to customise a big bunch of things with the Custom CSS area. But somehow I'm not able to find the right one on the cover page I designed for the 404 error page. On this page I would like to update the hyperlink style, by default it's "active" and fade when mouse hover. I would like to give it a colour that changes on hover instead of the fading. When I'm in the custom CSS area, I'm able to see a change in the hyperlink style with my little CSS code update, but it only works there and not in the final online page no matter how many times I refresh or clear my browser cache : https://www.casegoods.in/404 I tried a lot of blocks as you can see : /*404 Link color fix*/ .sqs-slide-wrapper[data-slide-type="cover-page"] [data-slice-type="navigation"] ul li a { color: #05424d !important;} .sqs-slide-wrapper[data-slide-type="cover-page"] [data-slice-type="navigation"] ul li a { color: #05424d !important;} .sqs-slide-wrapper[data-slide-type="cover-page"] [data-slice-type="navigation"] ul { a {color: #05424d !important;}} .sqs-slide-wrapper[data-slide-type="cover-page"] [data-slice-type="buttons"] li, .sqs-slide-wrapper[data-slide-type="cover-page"] [data-slice-type="navigation"] li { a {color: #05424d !important;}} .sqs-slide-wrapper[data-slide-type="cover-page"] .alignment-center .layer-front .sqs-slide-layer-content { text-align: center; a {color: #05424d !important;} } .sqs-slide-wrapper[data-slide-type="cover-page"] [data-slice-type="navigation"] ul { a {color: #05424d !important;} a:hover {color: #ffffff !important;} } Not sure where I'm wrong, any thought ? Link to comment
tuanphan Posted June 10, 2020 Share Posted June 10, 2020 Add to Page Settings > Advanced > Header <style> /*404 Link color fix*/ .sqs-slide-wrapper[data-slide-type="cover-page"] [data-slice-type="navigation"] ul li a { color: #05424d !important;} .sqs-slide-wrapper[data-slide-type="cover-page"] [data-slice-type="navigation"] ul li a { color: #05424d !important;} .sqs-slide-wrapper[data-slide-type="cover-page"] [data-slice-type="navigation"] ul { a {color: #05424d !important;}} .sqs-slide-wrapper[data-slide-type="cover-page"] [data-slice-type="buttons"] li, .sqs-slide-wrapper[data-slide-type="cover-page"] [data-slice-type="navigation"] li a {color: #05424d !important;} .sqs-slide-wrapper[data-slide-type="cover-page"] .alignment-center .layer-front .sqs-slide-layer-content { text-align: center; a {color: #05424d !important;} } .sqs-slide-wrapper[data-slide-type="cover-page"] [data-slice-type="navigation"] ul { a {color: #05424d !important;} a:hover {color: #ffffff !important;} } </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
Paul_in Posted June 10, 2020 Author Share Posted June 10, 2020 Hurray ! Thanks @tuanphan Working perfectly with this only : <style> /*404 Link color fix*/ .sqs-slide-wrapper[data-slide-type="cover-page"] [data-slice-type="navigation"] ul li a { color: #05424d !important;} </style> Link to comment
lstrauss831 Posted June 16, 2020 Share Posted June 16, 2020 Hi, I need help with my Hyperlink style CSS. I don't see changes when I use CSS. Please review it. Thank you for your help. https://www.lsdesignmarketing.com/ h1 a:link, h2 a:link, h3 a:link, p a:link { color: #2c87f0;} h1 a:visited, h2 a:visited, h3 a:visited, p a:visite { color: #636;} h1 a:hover, h2 a:hover, h3 a:hover, p a:hover { color: #636; text-decoration: underline; } h1 a:active, h2 a:active, h3 a:active, p a:active { color: #c33; text-decoration: underline; } Link to comment
lstrauss831 Posted June 16, 2020 Share Posted June 16, 2020 I updated and still doesn't work. h1 a:link, h2 a:link, h3 a:link, p a:link { color: #2c87f0; text-decoration: none;} h1 a:visited, h2 a:visited, h3 a:visited, p a:visited { color: #636; text-decoration: none;} h1 a:hover, h2 a:hover, h3 a:hover, p a:hover { color: #636; text-decoration: underline; } h1 a:active, h2 a:active, h3 a:active, p a:active { color: #c33; text-decoration: underline; } Link to comment
tuanphan Posted June 16, 2020 Share Posted June 16, 2020 1 hour ago, lstrauss831 said: I updated and still doesn't work. h1 a:link, h2 a:link, h3 a:link, p a:link { color: #2c87f0; text-decoration: none;} h1 a:visited, h2 a:visited, h3 a:visited, p a:visited { color: #636; text-decoration: none;} h1 a:hover, h2 a:hover, h3 a:hover, p a:hover { color: #636; text-decoration: underline; } h1 a:active, h2 a:active, h3 a:active, p a:active { color: #c33; text-decoration: underline; } Add to Home > Design > Custom CSS div#content a:hover { color: #2c87f0 !important; text-decoration: none !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
Recommended Posts
Archived
This topic is now archived and is closed to further replies.