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

wklz

Member
  • Content Count

    73
  • Joined

  • Last visited

  • Days Won

    6
  1. In order to achieve Show/Hide FAQs you can use the Markdown Block and a jQuery script, as shown in this tutorial on this site (here) First, you need to inject this code call below, in the site-wide Code Injection (Settings > Advanced > Code Injection Header): Code call: <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> Then, you need to add this jQuery script below in the page specific Code Injection: <script> $(document).ready(function(){ $('.markdown-block .sqs-block-content h2').css('cursor','pointer'); $(".markdown-block .sqs-block-content h2").nextUntil("h2").slideToggle(); $(".markdown-block .sqs-block-content h2").click(function() {$(this).nextUntil("h2").slideToggle();}); }); </script> Then you will need to add a Markdown Block on the page with the following structure: ## **+ QUESTION 1** REPLY 1 ## **+ QUESTION 2** REPLY 2 ## **+ QUESTION 3** REPLY 3 In this video below, I have guided you through the whole process: SOURCE FOR THE CODE: Silva Bokis
  2. Hello Guys, I have seen a lot of posts on this subject, today I will show you how to add a search lens in the navigation bar (in the header) in Squarespace 7 using the tutorial made by the Squarespace Guru for Squarespace 6, that you can find here This is how it looks like: You will need to follow these steps: 1) Retrieve the search address for your Squarespace site, every Squarespace site has one. • If you have a custom domain it will be as follows: www.yourdomain.com/search • If you do not have a custom domain linked to your site, it will be as follows: www.yourusername.squarespace.com/search 2) Add in the Code Injection, in the header section the following code in Settings >> Advanced >> Code Injection >> Header: <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> This video shows you how to do it: 3) Add a link under the main navigation and name it the following: <i class=" fa fa-search"></i> Here is the video that shows you how to do it in Squarespace 7: As a note, it might take a few minutes for the lens icon to display. SOURCE: Squarespace Guru
  3. Hello Guys, I have seen a lot of posts on this subject, today I will show you how to add a forum to your Squarespace 7 site by using a third-party service called • Muut ( http://muut.com/ ) • Muut gives you the option to create a discussion board, and provides you with the embed code to share it on your site. The service is free, although if you want a custom domain option and more styling option, you will have to purchase a premium plan. In this video, I have shown you how you could add it to your Squarespace site (to display the forum, so the code renders, you will have to either go incognito or be logged out of your site): Here you can see an example: MUUT FORUM To render the code, you will have to do one of the following: 1 • Browse in incognito mode (this will not work, if you are also logged in incognito mode). 2 • Be logged out of your site 3 • Use another browser
  4. Hello Guys, I have seen a lot of posts on this subject, that had some great code workarounds! I thought it would have been nice to gather them all and take videos to show how to achieve captions under grid-style Gallery Blocks in Squarespace 7, it works also on Squarespace 6 I am no code expert, but I have gathered the solutions in these posts: • http://answers.squarespace.com/questions/55687/hoverimage-titles-on-gallery-grid-images • Here it is the guide I have drafted, I would like to point out again this is not my code and I have found it in the resources above, so I am not able to troubleshoot it :) I have divided it into two sections: • Make the captions display at all times • Make them display on hover 1 • Make the captions display at all times This is how it looks like: here This is the code that should be entered: #block-yui_3_17_2_8_1420902652606_4622 .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { display: block; } This video shows you step by step where to retrieve the #block element using Chrome and how to add the code to your Squarespace 7 site: In order, for it to work you will have to replace the following #block-yui3172814209026526064622 with your #block ID for your Gallery Block. If you remove the following from the CSS snippet: #block-yui3172814209026526064622, all gallery blocks with grid style that you have will display image file names. 2 • Make them display on hover This is how it looks like: here .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { display: block; position: inherit; background-color: rgba(255,255,255,0.9); top: -18px; margin-bottom: -18px; opacity: 0; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; } .sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title { opacity: 1; } @media only screen and (max-width: 1024px) { .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { opacity: 1; } } I took a video to show you how to implement this solution: I hope this is useful to someone, it worked for me :)
×
×
  • Create New...