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


Circle Member
  • Posts

  • Joined

  • Last visited

  • Days Won


Posts posted by kale

  1. You can use a media query to adjust the font size based on the width of the window, try adding this to your Custom CSS section.

    @media only screen and (max-width: 640px) {
     #header h1.site-title { font-size: 24px; }

    That will reduce the font size to 24px when the screen width is 640px or less. Adjust the font size (and/or max-width value) to your liking, but 640px and 480px are common values for max-width when targeting mobile devices.

  2. EDIT: This is a method to remove a single time from an events list without removing all times from the list. This is not how you would hide the time from all events.

    I believe I have this solved (somewhat), however, it requires jQuery. It works by using a "unique" time to target and then add a custom class to it. Then, we hide that class and thus, hide the time. The custom time I've used is 1:23am -- so any event you want to hide the time on, you set the start time to that value. Unfortunately, if you have an event that starts at that exact time, this won't work.

    This is for the FIVE template, I'm not positive if it works for other templates.

    To install jQuery to your site, go to 'Manage Site' (gear icon) > 'Settings' > 'Code Injection' and paste this into the 'Header'

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    Next, go to your Events page, and go to 'Events Settings' > 'Advanced' and paste this into the 'Page Header Code Injection'

    $( document ).ready(function() {

    Lastly, go to your Custom CSS section, and paste this:

    .hideTime { display: none !important; }

    Now, as I mentioned above, in order for this to work, the event start time must match the value in the 'contains(" ") -- this can be changed to whatever time you want, but make sure you set the times of the events to match.

    Another thing to consider is that the time might show up in other places -- I have turned off the 'Event Date Label Time' in the 'Style Editor' (under 'Event Styles').

    Another place where the time will show up is in the 'Calendar block' -- I decided to hide this for all events (aesthetically, I prefer them hidden) -- to do this, you would add this to your custom CSS:

    .sqs-block.calendar-block .yui3-calendar-day .event-menu .event-time-group .event-time { display: none; }

    This isn't a perfect solution, obviously, and I hope SQSP adds a 'hide time' and 'all day' event options -- as well as 'repeating events'.

  3. If you want this to be applied site wide, then you should use the custom CSS section, and will only have to add the CSS once -- if you want to control image captions on a single page, then you can use per page code injections and style tags.

    For a single, site wide adjustment, go to 'Change Style' (paintbrush) > 'CSS' (hit confirm) and copy / paste this:

    .sqs-block.image-block .image-caption-wrapper p { font-size: 16px; }

    And then 'Save' in the CSS window, and 'Save' again in the 'Style Editor' slide-out.

    If you want to control it on a page-per-page basis, you would instead go to the page in question, then go 'Manage Site' (gear icon) > 'Page Settings' > 'Advanced' > and paste this into the 'Page Header Code Injection' section (be sure to include style tags):

      .sqs-block.image-block .image-caption-wrapper p { font-size: 16px; }

    You would need to do this on any page you wanted the CSS applied.

  4. The #hero is just the name of the element that whoever designed the template chose. A hero image is a common print / design term for the top main image on a page (I believe). This could have been named #banner or #banner-wrapper or something but they chose hero (which is why the original code didn't work).

    I believe the min-height offers the ability to grow beyond the value set. In other words, something with min-height says "I must be 'this' high, but I can be taller if space allows" -- vs -- height, which is a more definite value (not positive on this, though).

  5. @Toe Try adding this CSS to your custom CSS section:

    #collection-52017e88e4b0e6816c1cd75a #hero .page-image { min-height: 200px; }

    That will change the height of your banner image on the 'Contact Us' page (not sure if that's the one you're wanting to alter but I used it to figure it out).

    If its for a different page, and you don't know how to get the collection ID, just post back, or alternatively, you can apply this to a single page by going to the 'Page Settings' > 'Advanced' > 'Page Header Code Injection' and pasting this (including style tags)

        #hero .page-image { min-height: 200px; }

  6. You add the code to your custom CSS section, which is described here: http://help.squarespace.com/customer/portal/articles/438114-making-style-changes

    However, you will need to identify your block ID, as the one I used above is just a random string of text. You get the ID by using the 'Inspect Element' found in Safari or Chrome, or by using Firebug extension for Firefox. It can be a bit tricky finding the block and id, but once you get the hang of it, identifying all of the various elements becomes quite easy.

    Edit: If you have a particular block on a particular page you want to center, and are willing to post the link to the page, I can get / provide the ID for you.

  7. You could use some custom CSS to reposition (center) a block on a page. If you were to have a search box with no blocks on either side, you could left align it in the layout engine, but then do something like this to center it:

    #block-27cdfcdfb02ef08fdfc1 {
     position: relative;
     background: pink;
     width: 25%;
     left: 38%;

  8. @Chris S - The problem is that you are using a background image, and it doesn't scale above 100% on Squarespace. Regular images will, which is how you get those full bleed galleries like Momentum, but background images are treated differently.

    I have never found a good solution to scale a background image. I've tried numerous CSS hacks and jQuery scripts and none worked, but I didn't really spend a lot of time on it, so it's most likely possible to get a background image scaling the same way regular images do on Squarespace, but I don't know how.

  9. Sure, you can do it a couple ways. You can specify on a page-per-page basis by adding this to your(s) 'Page Settings' > 'Advanced' > 'Page Header Code Injection'

        #banner-area-wrapper { height: 200px; }

    But if you want the same sized banner for all pages except the homepage, I would probably do it this way instead -- go to the 'Style Editor' and set the 'Banner Area Height' to the height you want for the rest of your pages, and then go to the homepage and go 'Page Settings' > 'Advanced' > 'Page Header Code Injection' and add this custom CSS:

            #banner-area-wrapper { height: 500px; }

    Using this technique, you will have consistent banners for all pages (and newly created pages) and a custom one for just the homepage.

  10. @Chris S Yes, it would look like this:

    <div class="fullWidthSectionBG">
    <div class="fullWidthSection">
    <div class="myLeftColumn">My Left Stuff goes here</div>
    <div class="myRightColumn">My Right Stuff goes here</div>

    And then in your custom CSS:

    .myLeftColumn { width: 50%; float: left; }
    .myRightColumn { width: 50%; float: left; }

    That would make two columns that are both 50% wide and float left. If you add padding etc. you would have to subtract that from the 50%

  11. I see what you're saying -- unfortunately, I'm all out of ideas... I think you're going to have to decide which you'd rather have, the full width background or the search bar in the header.

    If you moved the search back "into" the site, you could have both, but the search would have to be below that header image (on the white background).

    If I think of anything I'll let you know.

  12. @Chris S -- Okay I think this should do it. Change this CSS:

    #page-body-wrapper {
     overflow-x: hidden;
     overflow-y: hidden;

    to this CSS:

    body { overflow-x:hidden;  }

    That should not affect your search box. Otherwise I'd say to use #site -- but because you have that search box that is "outside" of #site, it disappears, so using body seems to work.

  13. I wanted to achieve this effect using the 'Five' template -- so after a bunch of experimenting, I believe I've figured it out. This is what I did:

    First, in 'Style Mode' - locate 'Sizes and Values' > 'Site Width' and set it to 80% - this can be adjusted to your preference - it acts as margins on the left and right of your content.

    Next, I created the two div's, one to act as the background, the other to hold the content. I added this to my custom CSS:

    .fullWidthSectionBG { 
     background: pink;
     margin-left: -1600px;
     margin-right: -1600px;
    .fullWidthSection { padding-right: 1600px; margin-left: 1600px; }

    Lastly, in order to remove the scroll bar, I added the overflow CSS -- I had to add "x" and "y", as I found without "y", when you reduced the site and the mobile kicked in, it produced a double scrollbar effect (not sure why).

    #page-body-wrapper {
     overflow-x: hidden;
     overflow-y: hidden;

    This should allow you to add a max-width, so the site doesn't stretch to infinity, and adds some padding.

    #page-body { max-width: 1200px; padding: 0px 50px 0px 50px; }    

    To add the section to the actual site, I used a 'Markdown Box' and put this in:

    <div class="fullWidthSectionBG">
    <div class="fullWidthSection">
    <p>Content goes here</p>

    It seems to work fine - I just looked at it in IE8 and it looks fine. I plan on implementing it on a site I'm working on, so if I find any snags I'll update this answer.

  • Create New...