Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search


Circle Member
  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. I totally agree! This forum is an outstanding resource. My whole site is built based on other people's threads, their experience and help. Even when I don't find an answer, I find some bits of code that when reassembled can do amazing little things. Once again, thank you for the beautiful solution!
  2. I hate the option with a summary as a blog landing page! )))))) see my method in this thread:
  3. My method might seem weird but It's been working in my personal site for over 2 years with no problems. You can see instructions and the result in my blog. - You need to go through all blog posts though to add an empty Code Block in the place where you want your sidebar to be. + The good part is that you don't have to code and style each one of them. They will be filled automatically. Disclaimer: I'm not a coder. I used other people's pieces of code from this forum to implement this method. If you see mistakes or know how to make this method better, please comment 👋🏽 1) Choose a published blog post as a Source. It will contain the initial code. Every time you want to make changes to your sidebar globally you edit only the Source. I use Search in the blog editor to quickly access the Source blog post. 2) Create your sidebar manually 😞 using a Code Block. Make sure the div has a unique id. The code inside the div can be anything you want - images, links, lists, buttons, lines etc. This is just an example: <div id="my-mockup-sidebar"> <img src="https://link-to-your-image.jpg"> <p style="color:grey;font-size:14px;" align="center"> <a href="/blog?category=Puppies">Link to category 1</a><br> <a href="/blog?category=Kittens">Link to category 2</a><br> <a href="/blog?category=Raccoons">Link to category 3</a> </p> </div> ----------------------------------- OPTIONAL, for responsive design: Instead of the code above, I have several div's named #my-mockup-sidebar-1, #my-mockup-sidebar-2, #my-mockup-sidebar-3 containing different elements to have control over what is shown on mobile with stacked layout and what isn't. Example: <!-- contains profile pic and some text--> <div id="my-mockup-sidebar-1"> <a href="/about-me"><img src="https://link-to-profile-photo.jpg"></a> <p style="font-size:14px;line-height:1.3em;">Your text</p> </div> <!-- contains an image and the list of categories --> <div id="my-mockup-sidebar-2"> <img src="https://link-to-image-category-title.png"> <p style="color:grey;font-size:14px;" align="center"> <a href="/blog?category=Puppies">Link to category 1</a><br> <a href="/blog?category=Kittens">Link to category 2</a><br> <a href="/blog?category=Raccoons">Link to category 3</a><br><br> </p> </div> <!-- contains social media links --> <div id="my-mockup-sidebar-3"> <center><img src="https://social-media-title.png"><br> <a href="https://socialmedia.com/afterworkdiy" target="_blank"><img src="https://social-media-logo-1.png"></a></center> <a href="https://socialmedia.com/AfterworkDIY/" target="_blank"><img src="https://social-media-logo-2.png"></a></center> </div> ----------------------------------- 3) Go through all other blog posts and add a Recipient Code Block with the code below. The empty div inside this block also needs to have a unique name, but the same for all Recipient blog posts. This is the dropzone of the sidebar you created earlier: <!--code for the dropzone --> <div id="mockup-sidebar-container"></div> 4) Go to Settings - Advanced - Code Injection - Footer and add this code that forces those Recipient Code Blocks to load the content of the Source: <script> $(document).ready(function() { $('#mockup-sidebar-container').load('/blog/source-post #my-mockup-sidebar'); }); </script> Hit save and all blog posts now have the same sidebar you created only once in the Source blog post. ----------------------------------- OPTIONAL, continued: If you chose to split Source div's to display or hide some of them on mobile, then instead of the code above use the code below. The 640 value is your desired mobile breakpoint and can be changed: <script> $(document).ready(function() { if ($(window).width() > 640) { $('#mockup-sidebar-container').load('/blog/source-post #my-mockup-sidebar-1, #my-mockup-sidebar-2, #my-mockup-sidebar-3'); } else { $('#mobile-sidebar-container').load('/blog/source-post #my-mockup-sidebar-2'); } }); </script> This code loads all 3 div's: profile pic, categories and social media on big screens and on on screens narrower than 640 px it shows only categories (or whatever you will have in #my-mockup-sidebar-2 or whatever you will name it) -----------------------------------
  4. Sure thing! I've just marked it solved. But it needs to be seen here forever))
  5. I'm an idiot))) The link brought me to your last reply and I didn't even scroll to the top to see your answer. OMG! IT WORKS PERFECTLY!!!!!!!!! ABSOLUTELY PERFECT!!!! Thank you soooo much! This thread can be closed as the super right answer is here.
  6. Hey! Bumping the thread to ask if you have time to have a look at the code. If not, no problem, I'll stick with the white-on-white option then))))) But I'm sure the solution would help others too
  7. Luckily it has been fixed by now. Yay!!! I wish SS also added an option to use operators with tags. Like browser search operators))))) I also need this feature for products on the site I'm working on((( One of the options would be using a paid plugin - Universal Filter. Another option I could think of is simple but not optimal because works only if you need to filter by 2 tags, not more. It is duplicating certain tags as categories. In this case you cannot use the Archive block because it will look messy. Let's say you have 2 Categories: dogs, cats and various Tags: different colors, breeds, young/old, long-haired/hairless etc. If you want your summary to show only black bulldogs you will need to duplicate breed Tags (OR colors) as Categories. So instead of selecting Dog-category and Black-tag + Bulldog-tag (which will show you all black dogs and all bulldogs in different colors), you will select Bulldog-category and Black-tag. The problem arises when you want to show all mixed-breed black dogs... Because if you select Mixed-breed-Category and Black-Tag it will also show you black mixed-breed cats. In this case you can probably split Mixed-breed-category into two Categories: 'mixed-breed dogs" and "mixed-breed cats". But then again, if you want to show black mixed-breed dogs with long hair you're stuck(((((
  8. Thank you for your reply @creedon! I guess it will require a pretty long piece of code? I guess I shouldn't overload the site and 'd better stick with making the placeholder text white on white...
  9. OMG, @tuanphan you're fast and helpful as always! Thank you for your prompt reply! 🤍🤍🤍 The Style part works great - the font got smaller. But the Code part doesn't seem to change anything... I pasted the code to the Footer as is, without even changing your text example. But It still says "Type to search..." (( This same code works for the Search Block but somehow not for the Search Page. Any idea why? BUT thanks to you I realized how to implement plan B - hide the placeholder text making it white. Maybe it will help someone: <style> /* Search page placeholder text color */ .sqs-search-page .sqs-search-page-input input::placeholder { color:white; } </style>
  10. I knew I should use another platform to build a store but I like building with SS so much that I risked...(( Is there an option to display product thumbnails on the Search result page with some custom code? I'm using Brine
  11. Hello dear helpful community! I'm building a site for a Russian company using Brine and I managed to localize some of the built-in text. Special thanks to @tuanphan for his Search Block custom code 👍🏽 https://forum.squarespace.com/topic/164077-how-to-edit-customise-search-box-placeholder-text/?do=findComment&comment=375210 What I'm struggling with is the translation of "Type to search..." on the search Page. I'd like it translated OR hidden. I found this thread https://forum.squarespace.com/topic/156697-customise-styling-on-a-search-block/ but it doesn't seem to work, or maybe I'm doing something wrong. Please help! PW: rsrtr2021 Bonus question: How to make the search results fonts smaller?
  12. That's because you added the code line with text to your index page settings as per the instruction. If you want the same text appear on all pages then add the line with your text to Settings > Advanced > Code Injection. In the HEADER section.I did it and it works perfectly
  13. Hello @Paul2009 !Thank you for your answer! The solution is truly awesome! You made my day! Enjoy your coffee ;)Kristina
  14. same problem here :( @samfinding_alliants did you manage to solve it?
  15. Thank you for explaining this! Now I get a slight idea of what I'm doing :) It works like charm for most links. BUT NOT for the ones that end with / (slash). The code that I add after / seems to be treated as part of the address and not as code. It still takes me to the target website but I end up with the Page Not Found message. https://sitename.com/some-blog/article-about-something"target="_blank - OK https://sitename.com/some-blog/article-about-something/"target="_blank - NOT OK :( I tried deleting / and then adding "target="_blank => Page Not Found Please help!
  • Create New...