Jump to content

tuanphan

Circle Member
  • Posts

    63,790
  • Joined

  • Last visited

  • Days Won

    511

Everything posted by tuanphan

  1. Some CSS code to change Logo on One Page. All code, you can add to Custom CSS box Replace Pixabay with your new logo url. #1. One Page Use this code to Page Header Code Injection (If your site plan doesn't support Code Injection, you can edit page > Add a Block > Choose Code > Then paste the code). <style> header#header img { content: url(https://cdn.pixabay.com/photo/2024/01/07/14/12/man-8493244_1280.jpg); } </style> #2. Change Logo on Desktop Only add to Custom CSS box /* Desktop Only */ @media screen and (min-width:768px) { header#header img { content: url(https://cdn.pixabay.com/photo/2024/01/07/14/12/man-8493244_1280.jpg); }} #3. Change Logo on Mobile Only /* Mobile Only */ @media screen and (max-width:767px) { header#header img { content: url(https://cdn.pixabay.com/photo/2024/01/07/14/12/man-8493244_1280.jpg); } } #4. Change Logo on Blog Page (List) /* Blog Page (list) */ [class*="type-blog"].view-list header#header img { content: url(https://cdn.pixabay.com/photo/2024/01/07/14/12/man-8493244_1280.jpg); } #5. Change Logo on Blog Post /* Blog Post */ [class*="type-blog"].view-item header#header img { content: url(https://cdn.pixabay.com/photo/2024/01/07/14/12/man-8493244_1280.jpg); } #6. Change Logo on Event List /* Event List */ [class*="type-event"].view-list header#header img { content: url(https://cdn.pixabay.com/photo/2024/01/07/14/12/man-8493244_1280.jpg); } #7. Change Logo on Event Detail /* Event Detail */ [class*="type-events"].view-item header#header img { content: url(https://cdn.pixabay.com/photo/2024/01/07/14/12/man-8493244_1280.jpg); } #8. Change Logo on Shop/Category Page /* Shop/Category */ [class*="type-products"].view-list header#header img { content: url(https://cdn.pixabay.com/photo/2024/01/07/14/12/man-8493244_1280.jpg); } #9. Change logo on Individual Products /* Individual Product */ [class*="type-products"].view-item header#header img { content: url(https://cdn.pixabay.com/photo/2024/01/07/14/12/man-8493244_1280.jpg); } #10. Change Logo on Cart Page /* Cart Page */ body#cart header#header img { content: url(https://cdn.pixabay.com/photo/2024/01/07/14/12/man-8493244_1280.jpg); } #11. Change Logo on Homepage Only /* Homepage Only */ body.homepage header#header img { content: url(https://cdn.pixabay.com/photo/2024/01/07/14/12/man-8493244_1280.jpg); } #12. Change Logo on Other Pages (Exclude Homepage) /* Other pages - exclude homepage */ body:not(.homepage) header#header img { content: url(https://cdn.pixabay.com/photo/2024/01/07/14/12/man-8493244_1280.jpg); } #13. Change Logo on Scroll Only /* On Scroll Only */ header#header.shrink img { content: url(https://cdn.pixabay.com/photo/2024/01/07/14/12/man-8493244_1280.jpg); } #14. Change Logo when Burger Menu is Open /* When burger menu is open */ body.header--menu-open header#header img { content: url(https://cdn.pixabay.com/photo/2024/01/07/14/12/man-8493244_1280.jpg); } If you still have problem when changing logo, just comment below with your site url, I will check it again.
  2. Line 1 in screenshot 1 is incorrect, it will appear as a raw text on top of all pages
  3. You can duplicate the site, set live template there, then share duplicated site url, we can check problem easier
  4. Use this code instead div#backToThumbs { font-size: 40px !important; top: 100px !important; }
  5. Use this new code @media screen and (max-width:991px) { .portfolio-text { opacity: 1 !important; top: unset !important; background-color: rgba(0,0,0,0.5) !important; } .portfolio-overlay { opacity: 1 !important; top: unset !important; background-color: transparent !important; } }
  6. Hi, Can you share link to this page? We can check easier
  7. You need to declare @font-face, the code should be @font-face { font-family:'avenir regular'; src: url('https://static1.squarespace.com/static/652f7b0b2732e6621ae68c90/t/65b15b5e8627652529f0ba6c/1706122078642/Avenir+Regular.ttf'); } @font-face { font-family:'avenir light'; src: url('https://static1.squarespace.com/static/652f7b0b2732e6621ae68c90/t/65b15b6913dcd6583b82dbe3/1706122089667/Avenir+Light.ttf'); } h1, h2, h3, h4 { font-family:'avenir regular' !important; } /* p1, p2, p3 = p */ p, p * { font-family:'avenir light' !important; }
  8. If you share link to page where you have problem, we can check easier
  9. To change frame color on this section, use this code section[data-section-id="65a06227ba81942b7a12d3b2"] .list-item-media { border: 2.5px solid #f1f !important; }
  10. You can use a CSS code like this h2.list-item-content__title { font-family: 'roc-grotesk' !important; }
  11. Try this code to Website > Website Tools > Custom CSS @media screen and (min-width:768px) { .user-items-list-item-container[data-section-id="65ae8b8d3fd5d37f0bfb4844"] li { position: relative; } .user-items-list-item-container[data-section-id="65ae8b8d3fd5d37f0bfb4844"] a.list-item-content__button { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; } .user-items-list-item-container[data-section-id="65ae8b8d3fd5d37f0bfb4844"] .user-items-list-simple .list-item-content__button-wrapper { min-width: 300px; } }
  12. deeproots123 It still incorrect. You try checking again (maybe you used 2 password for site wide and single page?)
  13. @nevesman You can use this code to Website > Website Tools (under Not Linked) > Custom CSS /* Description width */ .project-meta { max-width: 1200px !important; }
  14. If you don't have a budget to buy plugin, you can add a section in Site Footer, design your layout, then I can check and give some code to make this become a popup when you click the button (I used to a case a few months ago)
  15. 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>
  16. #1. You can use a Filter Plugin to achieve this #2. Can you share link to page where you have problem? We can check easier
  17. No. Custom Font won't show on List of Font in Site Styles, to assign it to an elements, you need to use CSS code. You can share link to your site + let me know which elements you want to apply custom font, we can give the code
  18. You can also share site url, I can give some code to achieve this
  19. You can add this code to Website > Website Tools > Custom CSS. If it doesn't work, you can share site url, we can check it again easier /* dropdown items color */ .header-nav-folder-content div * { color: #f1f !important; }
  20. If you share link to page where you added Google Maps, we can check easier
  21. Which page are you referring to? I don't see it on homepage https://www.peaceful-loan.com/
  22. It is not possible, you can consider reduce & equal text all items on mobile, then we can reduce space easier (if you need this, I can give the code)
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.