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

logaritym

Member
  • Content Count

    70
  • Joined

  • Last visited

  • Days Won

    1
  1. I have offered another options, which IMO works better and loads instantly over here -> https://answers.squarespace.com/questions/176218/spoiler-button-hidereveal.html#answer-176381
  2. I found a solution which looks like this one, but has more customization options, and also can hide images. I have added the code here - > https://answers.squarespace.com/questions/176218/spoiler-button-hidereveal.html#answer-176381
  3. OK, I think I found the best solution so far. I used the code from BloggerSentral with a little bit modifications, so that it matches better the looks of Squarespace. I made the button transparent with bold font, so that it looks like the markdown option offered in this answer. However, here you can add not only text, but also images to the spoilers, as well as make additional customizations. It also works instantly, so there is not loading time until the spoilers collapse. You can see how the function looks like on my puzzle blog -> https://www.puzzleprime.com/updates/ This is the CSS part, you can put it in the header of the advanced settings of the blog, if you want to use spoilers for multiple blog posts. <style type="text/css"> .spoilerbutton {display:block; border:none; padding: 0px 0px; margin:10px 0px; font-size:150%; font-weight: bold; color:#000000; background-color:transparent; outline:0; } .spoiler {overflow:hidden;} .spoiler > div {-webkit-transition: all 0s ease;-moz-transition: margin 0s ease;-o-transition: all 0s ease;transition: margin 0s ease;} .spoilerbutton[value="Show Solution"] + .spoiler > div {margin-top:-500%;} .spoilerbutton[value="Hide SolutionSolution"] + .spoiler {padding:5px;} </style> Next, whenever you want to add spoilers, use this HTML code: <input class="spoilerbutton" type="button" value="Show Solution" onclick="this.value=this.value=='Show Solution'?'Hide Solution':'Show Solution';"> <div class="spoiler"><div> <p> </p> <p> </p> SOME TEXT <img style=" margin: 30px auto; display: block;" height="Auto" width = "Auto" src="IMAGE URL"> </div></div> As I mentioned, you can add additional customizations, such as background color, etc, but this works best for my website. If you want to change the spoilers label, just change "Show Solution" and "Hide Solution" to whatever you need both in the CSS and the HTML parts.
  4. Hello guys,I am looking for a good spoiler button, which can hide or show some text and images on my pages. I am using the solutions offered in this question, but my webpage is loading too slow and it takes too much time until the content I need to hide gets hidden. Do you have any advice for improving the performance or maybe some other solution? You can see a sample page from my (puzzle) website here - > http://www.puzzleprime.com/updates/?tag=Advanced
  5. Hi and thanks for your answer. This is what SSCS replied: There is not a way to edit or adjust individual blocks on mobile or otherwise that is built in.In order to customize the mobile view or individual blocks it will require custom coding.Please note that adding CSS or custom code on Squarespace is an advanced modification. We recommend that you have coding knowledge before attempting to use custom coding.Third-party services or custom code falls outside the scope of the support we are able to offer.Alignment Question:There is a way to change the layout for the text/markdown/image blocks for the categories of puzzles' sections.At the moment the image is wrapped in the text similar to quote. Like described in this guide: Wrapping Text or Image within Text If the Image Block is placed beside the Text it will put the image below the text when viewed in mobile.The nature of our mobile styles will place blocks atop one another from left to right.I hope that helps to clarify. Please let me know if I can help with anything else.
  6. Hi guys, recently I made this website about puzzles - www.puzzlereview.com. On the home page at the bottom I have links for RSS, facebook and a newsletter block. I think in desktop/tablet view it doesn't look too bad (if you have suggestions for visual improvement, please let me know), but in mobile view these three get stacked on top of each other and stretched width-wise. This makes the facebook button abnormally large and doesn't look good. Can I edit the mobile view only so that the RSS and the facebook buttons still appear next to each other on phones? Also, for the blocks above them, Squarespace first puts the pictures on top and then the Markdown blocks with the text underneath below. Can I rearrange this order as well? Thanks, Artur
×
×
  • Create New...