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

Search the Community

Showing results for tags 'farro-template'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
  • Squarespace Forum Club Guidelines's Topics

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me



Found 8 results

  1. Site URL: http://bit.ly/39WMa9Q Hi everyone, I'm curious if anyone knows enough Squarespace behind the scenes to help me understand how a particular site customized their template. I'm familiar with basic CSS tweaks and styling themes, but not fully in a Squarespace context. I don't know the ins-and-outs of SQ templates, available content types, etc so could really use some pointers with the following example ... Here's the site I'm looking at - http://bit.ly/39WMa9Q . First of all, looking at the code, I know based on their template ID that it's a custom one based on Farro/Haute family (template id looks very similar but not quite the same). Looking at the two demo sites, I guess it's closer to Haute https://haute-demo.squarespace.com/ than to Farro https://farro-demo.squarespace.com/ . So with Haute as my starting point, what should I do to make my demo site I'm working on look a bit more like theirs? To achieve: a) most important - a similar looking Home page hero with the background looping video fading to image carousel. I think they might have done this with extra JS in their <head> section (look for function headerFade in their homepage source code), but I'm not 100% sure. How do I achieve this look? b) a similar looking content type like their About and Retailers pages (see their top nav); the About page in Haute is not quite there in terms of available layout elements I think, but I may be wrong? c) the tiling of content links under the hero banner (I believe this is blog post tiling because it looks very similar). theirs is tiled as 3-2: first a row of 3 , then a second row of 2; in Haute it goes 3-1-3 : 3 in 1st row, 1 in 2nd row (full width), then 3 per row again - and I don't know how to change it d) this one's not as crucial - the Instagram tiles at the bottom which also connects to their Gallery page
  2. Hi! Would anyone have any insight as to how I would be able to enable a header image on my homepage? I'm using the theme Haute which doesn't seem to have the ability to do so however the blog feature does. I want the header image to be at the top and full width even though my site width isn't full width. Ideally something similar to that on Bedford or Brine themes. This is the site I'm currently working on: https://seabass-arugula-rx3f.squarespace.com/ Any guidance would be appreciated! TIA! :)
  3. I have been trying for days in CSS but cannot get the font in anything to change. I am trying to get the site title and the blog title headings on the home page to change. Here is what I have, but it seems to have no effect and I have tried several variations. TIA!!! @font-face { font-family: 'QUANTIFY'; src: url(https://static1.squarespace.com/static/5dfa8d8f3dca077a2e9c02d2/t/5dfab078f9cc2c0a444b03dc/1576710264403/Quantify.woff); } /* Custom Font - Site Title */ .site-title span { font-family: 'QUANTIFY' !important; } /* Custom Font - Header Main Navigation */ .main-nav * { font-family: 'QUANTIFY' !important; }
  4. Hello everyone. The floating pagination arrows for blog posts present in the Farro template aren't showing up for me in Chrome browsers. It seems like this is a known issue, specifically with these arrow symbols not showing in Chrome, as I believe the arrow referenced here (https://stackoverflow.com/questions/27265831/google-chrome-is-not-showing-arrow-sign) is the same one used for Farro's blog's floating pagination arrows, though I may be wrong. My website is still unpublished, so I can't link it. Has anyone else experienced this issue? Is it possible to replace the default symbols for the Farro template floating pagination arrows in blog posts? Is it possible via css? Below is some code for reference. I believe the red text is the arrow icons specifically. If necessary, I'd like to replace the default arrows with these: Right — https://fontawesome.com/icons/angle-right?style=solid Left — https://fontawesome.com/icons/angle-left?style=solid&from=io. Please let me know if any additional information is needed to solve this issue. Thanks in advance. ———————— FOR REFERENCE ———————— CSS: .tweak-icon-weight-heavy .Icon--caretLarge--left, .tweak-icon-weight-heavy .Icon--caretLarge--right, .tweak-icon-weight-heavy .Icon--caretSmall--left, .tweak-icon-weight-heavy .Icon--caretSmall--right HTML: <nav class="BlogItem-pagination clear BlogItem-pagination--loaded" data-controller="BlogItemPaginationArrows" data-controllers-bound="BlogItemPaginationArrows"> <a href="/home/traveling-with-some-intention" class="BlogItem-pagination-link BlogItem-pagination-link--prev"> <svg class="Icon Icon--caretSmall--left BlogItem-pagination-icon" viewBox="0 0 9 16"> <use xlink:href="/assets/ui-icons.svg#caret-left-small-icon"></use> </svg><!-- --><div class="BlogItem-pagination-content"> <h4 class="BlogItem-pagination-title">BLOG POST TITLE</h4> <div class="BlogItem-pagination-meta"><!-- Author --><span class="BlogItem-pagination-meta-item BlogItem-pagination-meta-item--author">AUTHOR NAME</span><!-- Date --><time class="BlogItem-pagination-meta-item BlogItem-pagination-meta-item--date" datetime="2019-10-11">October <span>11, </span>2019</time></div> </div> </a> <a href="/home/traveling-with-intention" class="BlogItem-pagination-link BlogItem-pagination-link--next"> <div class="BlogItem-pagination-content"> <h4 class="BlogItem-pagination-title">BLOG POST TITLE </h4> <div class="BlogItem-pagination-meta"><!-- Author --><span class="BlogItem-pagination-meta-item BlogItem-pagination-meta-item--author">AUTHOR NAME</span><!-- Date --><time class="BlogItem-pagination-meta-item BlogItem-pagination-meta-item--date" datetime="2019-10-10">October <span>10, </span>2019</time></div> </div><!-- --><svg class="Icon Icon--caretSmall--right BlogItem-pagination-icon" viewBox="0 0 9 16"> <use xlink:href="/assets/ui-icons.svg#caret-right-small-icon"></use> </svg> </a> </nav>
  5. Hi all, This is probably too big of an ask, but I'll try anyways. If we can figure this out, I'm sure it'll be useful to a ton of people. I'm looking to add an identical sticky navigation to the very top of two different websites/templates. One being Farro, the other Brine. Basically, I'm making a child brand/website of a parent website/brand, and want an universal navigation at the top of both websites. An example of what I'm looking for can be found on Deciem's website (https://deciem.com/?lang=en&region=US). There, they have a navigation which allows customers to easily visit the websites of their various brands. Similarly, I'd like to have have a universal header on both websites, with a box for the parent brand linking to its homepage, and a box for the child company linking to its homepage. Visitors of either site would be able to quickly and easily switch back and forth, and clearly see that the two brands are interconnected. I've found some useful attempts online, but nothing sufficient. Any help is appreciated. Thanks in advance.
  6. Hello, A small imperfection but a curious one. While I have set the letter spacing to zero, for some reason my site Title (top left instead of logo), the titles of the projects (or blog posts in the base-template) and the links in the footer have letter-spacing on iPad and iPhones. This can only been seen when you check the device itself (not Developer Tools). I have also checked some non apple devices and this issue is not apparent. I have attached a screenshot from my phone vs from developer tools to compare. Does anyone know what might be causing this and have any suggestions on how to block it?
  7. Hello!I'm using the Farro Template and have found that for several screen sizes (iPad, iPad Pro Portrait, Mobile Landscape) the nav and footer aren't responsive. Is there some code I can use that will detect when the Nav is running over two lines or overlapping itself/ other content and switch to the mobile menu?Failing this, just a mobile query for screen sizes 768px width or below that will switch to mobile design – I have tried some suggestions in other threads but they haven't worked for this template. Site: https://clownfish-maracas-6wwx.squarespace.com
  8. I'd like to change "Related Posts" to say "Related Projects" – using the Farro template. I assume this involves jQuery but haven't managed to find anything other than this article for amending the search input. https://answers.squarespace.com/questions/13459/how-to-change-search-text-to-something-custom.html I guess it has to be something similar to this but none of these solutions work in my case!
  • Create New...