-
Posts
3,605 -
Joined
-
Last visited
-
Days Won
92
Reputation Activity
-
colin.irwin got a reaction from artpimpress in Decreasing Section Padding Squarespace 7.1
There is a min-height of 33vh set on sections. You need to override that to get the sections smaller.
For all sections this would be:
.page-section { min-height: 0 !important; } For a specific section you need to specify the data-section-id that can be found by inspecting the page code using your browser's developer tools.
Somethig like this:
.page-section[data-section-id="5d979fd8590a832f3c411579"] { min-height: 0 !important; }
-
colin.irwin got a reaction from failbetter in Decreasing Section Padding Squarespace 7.1
There is a min-height of 33vh set on sections. You need to override that to get the sections smaller.
For all sections this would be:
.page-section { min-height: 0 !important; } For a specific section you need to specify the data-section-id that can be found by inspecting the page code using your browser's developer tools.
Somethig like this:
.page-section[data-section-id="5d979fd8590a832f3c411579"] { min-height: 0 !important; }
-
colin.irwin got a reaction from davekorns in How do I create hide/show text on a page, like you see with FAQs?
Here's a slightly more concise solution, using jQuery.
The idea is to use a Markdown block to hold your questions and answers. It should be the only Markdown block on the page.
The Markdown will look something like the following (The + at the start of each question is a cue for the user to know they can expand the entry).
+ This is a first question ----------------- This is the first line of an answer to the question above. This is a second line of the answer. * Bullet points * Can be used too + This is a second question ----------------- This is a one line answer to the question above.
Questions should be styled as H2.
Then put the following code into your page's injection point:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <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>
The first can be omitted if you already have a link to jQuery in your sitewide code injection point.
The second script tells the mouse cursor to become a pointer when over the Markdown H2s - this is to tell the user it's clickable. Then, when an H2 is clicked it toggles the visibility of all content between the clicked H2 and the next H2 / the end of the markdown block.
See it in action here - http://www.silvabokis.com/idea-testing/
-
colin.irwin got a reaction from ejeancross in How do I create hide/show text on a page, like you see with FAQs?
It does. I liked your solution but thought that a Markdown block to contain the FAQs would be easier for a non-technical person to maintain.
There's still some know-how required but the tools inside the Markdown editor make it relatively straightforward to maintain.
-
colin.irwin got a reaction from ARTSPEAKNYC in How do I create hide/show text on a page, like you see with FAQs?
Here's a slightly more concise solution, using jQuery.
The idea is to use a Markdown block to hold your questions and answers. It should be the only Markdown block on the page.
The Markdown will look something like the following (The + at the start of each question is a cue for the user to know they can expand the entry).
+ This is a first question ----------------- This is the first line of an answer to the question above. This is a second line of the answer. * Bullet points * Can be used too + This is a second question ----------------- This is a one line answer to the question above.
Questions should be styled as H2.
Then put the following code into your page's injection point:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <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>
The first can be omitted if you already have a link to jQuery in your sitewide code injection point.
The second script tells the mouse cursor to become a pointer when over the Markdown H2s - this is to tell the user it's clickable. Then, when an H2 is clicked it toggles the visibility of all content between the clicked H2 and the next H2 / the end of the markdown block.
See it in action here - http://www.silvabokis.com/idea-testing/
-
colin.irwin got a reaction from jaisequoia in Decreasing Section Padding Squarespace 7.1
There is a min-height of 33vh set on sections. You need to override that to get the sections smaller.
For all sections this would be:
.page-section { min-height: 0 !important; } For a specific section you need to specify the data-section-id that can be found by inspecting the page code using your browser's developer tools.
Somethig like this:
.page-section[data-section-id="5d979fd8590a832f3c411579"] { min-height: 0 !important; }
-
colin.irwin got a reaction from zoester300 in Decreasing Section Padding Squarespace 7.1
There is a min-height of 33vh set on sections. You need to override that to get the sections smaller.
For all sections this would be:
.page-section { min-height: 0 !important; } For a specific section you need to specify the data-section-id that can be found by inspecting the page code using your browser's developer tools.
Somethig like this:
.page-section[data-section-id="5d979fd8590a832f3c411579"] { min-height: 0 !important; }
-
colin.irwin got a reaction from bluebrindlemarketing in How do I create hide/show text on a page, like you see with FAQs?
@HHabel I have amended the instructions for you to use H3 as the open/close text
Markdown is as follows:
### + This is a first question This is the first line of an answer to the question above. This is a second line of the answer. * Bullet points * Can be used too ### + This is a second question This is a one line answer to the question above.
Script is as follows:
<script> $(document).ready(function(){ $('.markdown-block .sqs-block-content h3').css('cursor','pointer'); $(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle(); $(".markdown-block .sqs-block-content h3").click(function() {$(this).nextUntil("h3").slideToggle();}); }); </script>
-
colin.irwin got a reaction from bluebrindlemarketing in How do I create hide/show text on a page, like you see with FAQs?
It does. I liked your solution but thought that a Markdown block to contain the FAQs would be easier for a non-technical person to maintain.
There's still some know-how required but the tools inside the Markdown editor make it relatively straightforward to maintain.
-
colin.irwin got a reaction from FrankPrendergast in Decreasing Section Padding Squarespace 7.1
There is a min-height of 33vh set on sections. You need to override that to get the sections smaller.
For all sections this would be:
.page-section { min-height: 0 !important; } For a specific section you need to specify the data-section-id that can be found by inspecting the page code using your browser's developer tools.
Somethig like this:
.page-section[data-section-id="5d979fd8590a832f3c411579"] { min-height: 0 !important; }
-
colin.irwin got a reaction from spitznagel in attempting to set unique background image for one page, CSS not working with SquareSpace
Something like this should work:
body#collection-55a5af43e4b0aac39df22df0 { background-position: center top !important; background-image: url("//static1.squarespace.com/static/55a48db1e4b03b84d36b22fb/t/571e6768746fb924e954224b/1461610345514/Against%2BColorful%2Bgraffiti.jpg"); }
-
colin.irwin got a reaction from lisa.popa in Hide Header and footer from one page
Find the collection id of the page in question. You do this by inspecting the source code and looking at the body tag.
Then insert the collection id into the following code (making sure you keep the # character in the code) and paste the edited code into your custom css area.
#collection-id-here { header, footer { display: none !important; } }
-
colin.irwin got a reaction from sarahsaturday in Disabling Lightbox in Summary Box but keeping links when present
As a test I created a gallery called test gallery.
Then I gave some of the items in the gallery links
I created a summary block on another page that uses the gallery as the source of its images.
Then I created a css rule to kill pointer events for any summary items whose link is from the original gallery (begins with /test-gallery).
It works as expected. Items with no clickthrough url have a standard cursor and are not clickable but those with a clickthrough work properly.
Here is the code - insert it at the bottom of your custom css area after any other code that may already be there. You'll need to tweak href ^= "***" to reflect your gallery slug
.summary-item a[href^="/test-gallery"] { pointer-events: none; } -
colin.irwin got a reaction from BrookwoodDrew in Decreasing Section Padding Squarespace 7.1
There is a min-height of 33vh set on sections. You need to override that to get the sections smaller.
For all sections this would be:
.page-section { min-height: 0 !important; } For a specific section you need to specify the data-section-id that can be found by inspecting the page code using your browser's developer tools.
Somethig like this:
.page-section[data-section-id="5d979fd8590a832f3c411579"] { min-height: 0 !important; }
-
colin.irwin got a reaction from SouthernSunEvents in Removing Auto Hyphen from mobile view
Try adding this to the custom css area, after any other code that may be there. Also remove your code.
@media only screen and (max-width: 768px) { body { h1,h2,h3,p,li,a,em,i,strong { -webkit-hyphens: none !important; hyphens: none !important; } .page-desc p { -webkit-hyphens: none !important; hyphens: none !important; } } }
-
colin.irwin got a reaction from katie4 in Disabling Lightbox in Summary Box but keeping links when present
As a test I created a gallery called test gallery.
Then I gave some of the items in the gallery links
I created a summary block on another page that uses the gallery as the source of its images.
Then I created a css rule to kill pointer events for any summary items whose link is from the original gallery (begins with /test-gallery).
It works as expected. Items with no clickthrough url have a standard cursor and are not clickable but those with a clickthrough work properly.
Here is the code - insert it at the bottom of your custom css area after any other code that may already be there. You'll need to tweak href ^= "***" to reflect your gallery slug
.summary-item a[href^="/test-gallery"] { pointer-events: none; } -
colin.irwin got a reaction from Royster1994 in Edit form placeholder text - CSS
Try this
input.field-element::placeholder { color: red !important; } -
colin.irwin got a reaction from tuanphan in Edit form placeholder text - CSS
Try this
input.field-element::placeholder { color: red !important; } -
colin.irwin got a reaction from SalmaMaged in Removing blank spaces between page sections on Index Pages
The default section padding is 96px at the top and bottom.
Insert this into your custom css and then tweak the @sectionpadding pixel value until you get the layout you prefer.
@sectionpadding: 10px; .index-section .index-section-wrapper.page-content { padding-top: @sectionpadding; padding-bottom: @sectionpadding; }
-
colin.irwin got a reaction from Asiya in Removing blank spaces between page sections on Index Pages
It depends upon the template you are using.. Can you share the template name and also a url to the site?
-
colin.irwin got a reaction from jaimee1570048593 in Removing Auto Hyphen from mobile view
Try adding this to the custom css area, after any other code that may be there. Also remove your code.
@media only screen and (max-width: 768px) { body { h1,h2,h3,p,li,a,em,i,strong { -webkit-hyphens: none !important; hyphens: none !important; } .page-desc p { -webkit-hyphens: none !important; hyphens: none !important; } } }
-
colin.irwin got a reaction from DaImp in Harris template - turning navigation links into anchor links
Yeah - rather than just /#purpose you can use /home#purpose
However, this has the disadvantage of reloading the page rather than just scooting down to the anchor point.
If you're happy with coding you could leave the desktop links as they currently are and modify the mobile ones to contain /home#whatever
-
colin.irwin got a reaction from DaImp in Harris template - turning navigation links into anchor links
You put the actual pages in the Not Linked section and then add Links to them in the main navigation.
-
colin.irwin got a reaction from tuanphan in Harris template - turning navigation links into anchor links
You put the actual pages in the Not Linked section and then add Links to them in the main navigation.
-
colin.irwin got a reaction from Ciodensky in Executing my javascript code only on a specific page
Here's what you need to do.
First, wrap your code as follows
<script> window.Squarespace.onInitialize(Y, function(){ // Your code here }); </script>
This will execute the code on each page load.
Next, you may need to modify the code so that it only runs for the specific page. You do this by testing the body tag for the presence of the specific collection id.