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

brandon

Circle Member
  • Content Count

    2,157
  • Joined

  • Last visited

  • Days Won

    29

Everything posted by brandon

  1. Nice! Yeah that'll work too; thanks for letting me know. -Brandon
  2. That's true. When I said "...the simplest thing to do..." I suppose I neglected to consider simply making the table horizontally scrollable. Obviously this has its own disadvantages (as all approaches do) but it does get the job done! -Brandon
  3. No, the element references are specific to Brine (and possibly Brine's related templates).
  4. Hi there. One option is to add the gif as a background image on the image's containing element. When the image loads, it will cover up the gif (although the gif is still there, just not visible). Something like this, added via the CSS Editor, substituting your own gif file: .summary-thumbnail { background-image: url("https://d13yacurqjgara.cloudfront.net/users/82092/screenshots/1073359/spinner.gif"); background-position: center; } Or, here's another option using just CSS: .sqs-block-summary-v2 * { position: relative; z-index: 1; } .summary-thumbnail:after { content: " "; height: 60px; width: 60px; -webkit-animation:spin 1s linear infinite; -moz-animation:spin 1s linear infinite; animation:spin 1s linear infinite; display: block; position: absolute; margin-left: auto; margin-right: auto; top: 40%; left: 45%; border-top: 0.2em solid rgba(200, 200, 200, 0.5); border-right: 0.2em solid rgba(200, 200, 200, 0.5); border-bottom: 0.2em solid rgba(200, 200, 200, 0.5); border-left: 0.2em solid #ffffff; border-radius: 50%; } @-moz-keyframes spin {100%{-moz-transform: rotate(360deg);}} @-webkit-keyframes spin{100%{-webkit-transform: rotate(360deg);}} @keyframes spin {100%{-webkit-transform: rotate(360deg); transform:rotate(360deg);}} Do let me know if this works for you. -Brandon If this or any other answer helps you out, please give credit where credit is due and Accept and/or Up-Vote that answer. If it didn't help, feel free to inquire further or wait and see what others have to say. Code is provided without any warranty, expressed or implied.
  5. Ok, I updated the code. It works now. The only problem I see is that this doesn't show the announcement bar on mobile. In order to change that, the code would need to be refactored a bit which would take time. That combined with the fact that the OP never responded means I probably won't get to this.
  6. A few comments: I would change your class "column" to "cell", since that's more accurate. No biggy though. The quest for "responsive tables" is an ambitious one. On mobile, you can only fit a few cells wide and only if the text isn't too long. Here are some solutions that others have come up with to deal with it. I suppose the simplest thing to do would be to add a media query and break the cells into stacking blocks. Like this. @media only screen and (max-width: 860px) { .column { display: block; width: 100%; border-bottom: 1px solid white; } } Do let me know if this works for you. -Brandon If this or any other answer helps you out, please give credit where credit is due and Accept and/or Up-Vote that answer. If it didn't help, feel free to inquire further or wait and see what others have to say. Code is provided without any warranty, expressed or implied.
  7. On second thought, Caroline, simply try using the code I provided but instead of "content: NEXT" and "content: PREV" use "content: >" and "content: <".
  8. Hi Caroline. I would post a new question with your description and a link to the page in question. Then you can comment on your question with @BrandonW (case sensitive) and I'll be notified and will try to take a look. It could be that your template requires slightly modified code.
  9. Hi there. Give this a try. Insert the following CSS using the CSS Editor. /*Reorder category list items on Montauk*/ /*http://caniuse.com/flexbox*/ /*http://shouldiprefix.com/#flexbox*/ #collection-5719735837013bf7bb9fc122 .category-nav-links { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ display: flex; /* NEW, Spec - Firefox, Chrome, Opera */ -webkit-justify-content: space-around; /* Safari 6.1+ */ justify-content: center; } /*Set the order of each list item ('li'), starting from the second child (first child is not displayed)*/ /*"All"*/ #collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(2) { order: 1; } /*"General"*/ #collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(3) { order: 6; } /*"Hair"*/ #collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(4) { order: 2; } /*"Hair Care"*/ #collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(5) { order: 4; } /*"Nail"*/ #collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(6) { order: 5; } /*"Wig"*/ #collection-5719735837013bf7bb9fc122 .category-nav-links li:nth-child(7) { order: 3; } @media only screen and (max-width:640px) { #collection-5719735837013bf7bb9fc122 .category-nav-links { -webkit-flex-flow: column; flex-flow: column; } } Keep in mind that if you add or remove categories, you'll have to change the "order:" values accordingly. Do let me know if this works for you. -Brandon If this or any other answer helps you out, please give credit where credit is due and Accept and/or Up-Vote that answer. If it didn't help, feel free to inquire further or wait and see what others have to say. Code is provided without any warranty, expressed or implied.
  10. Cool man; glad that worked. You deserve some credit for your very clearly articulated question. That makes a big difference when it comes to unique requests.
  11. Another option may be to float the images instead of making distinct columns for them. I believe that then the images will always be first in the document flow even when floated to the right. This would of course cause the text to flow around the image, rather than staying within its own column which may or may not be desirable to you.
  12. Keep in mind that this code is very specifically written for your current row/column/block arrangement. If you rearrange things, this code would have to be refactored. But this at least shows it's possible (and not that difficult) to do, and gives you a pattern to follow if you need to modify it in the future. Reference: http://stackoverflow.com/questions/220273/
  13. Hi there. Give this a try. @media only screen and (max-width: 640px) { #page-56fd63b662cd94b482c67b26 .row .row:nth-child(even) { display: table; } #page-56fd63b662cd94b482c67b26 .row .row:nth-child(even) .col:first-child { display: table-footer-group; } } Using Flexbox may be the more standard way to reflow the visual presentation of the document, but using it here causes additional complications, and doesn't have as broad compatibility as display:table. Let me know how it works for ya. -Brandon
  14. UPDATE DEC. 23, 2018: Hi everyone. The original answer (included below) is old and out of date. Don't use it. It's easy to get a fixed header with CSS, but hard to ensure it looks right on all devices and contexts. If you need more than the basic CSS, use Fixit, a 'plugin' I created that is much more reliable and up-to-date. A LOT of people have asked for help with this over the years. There are a lot of different things to consider when fixing nav/headers, and this answer didn't address every possible variation. So the answer needed continued modification. So I finally spent a few weeks to create and test a 'plugin' that everyone can use to reliably get fixed headers/navigation in the Brine/Wright family of templates (see list at link). It takes all the various aspects into account, and gives you options for "fixing" specific elements in the header. Once the code is added, it handles all the addition of CSS and Javascript for you. Take a look at Fixit, and feel free to get in touch if you have any questions on it. ORIGINAL POST Hi there. This has been asked before (as you have no doubt seen), but I don't think that answer takes everything into account that it ought to. Here's a better answer. This is tricky because once you fix the header to the top, the main content gets covered by the header. This is due to the way that "position:fixed" removed the element from the calculated height of the parent. You can compensate by adding padding/margin to the body content, but then other problems can arise (or go unnoticed). It's further complicated by the fact that you may or may not be using the announcement bar feature (now or in the future). On top of that, the announcement bar can be closed, which means we need to keep that in mind as well. Finally, we must also take into account both full-width and mobile navigations AND the fact that the header isn't always the same height...as screen width or device orientation changes, navigation may wrap and the height change. In order to take all of these factors into account, you're going to need to pair some simple CSS with some not-as-simple Javascript. Insert the following CSS in the CSS Editor: /*Set the full-width nav to fixed position.*/ .Header { position: fixed !important; width: 100%; z-index: 890; /*One more than SS galleries (889), at time of writing.*/ } /*Set the mobile nav to fixed position. Note that clicking hamburger/navicon will jump user to top of page.*/ .Mobile { position: fixed !important; width: 100%; z-index: 890; } Now, insert the following Javascript in the Footer area of "Code Injection": <script> //On Brine, move the announcement bar inside the .Header element, for use with fixed header. Adjust padding-top on main content according to height of header (initially, on window resize, and on announcement bar close). Y.on('domready', function () { var aBar = document.getElementsByClassName("sqs-announcement-bar-custom-location")[0]; var aBarCloser = document.getElementsByClassName("sqs-announcement-bar-close")[0]; var header = document.getElementsByClassName("Header")[0]; var headerInner = document.getElementsByClassName("Header-inner")[0]; var mobileHeader = document.getElementsByClassName("Mobile")[0]; var siteInner = document.getElementsByClassName("Site-inner")[0]; //Move annoucement bar into header. Otherwise applying "fixed" to both header and aBar will cause overlap. if (aBar) { aBar.parentNode.removeChild(aBar); header.insertBefore(aBar, header.firstChild); } //Call function on initial load. padBody(); //Call function if/when annoucement bar is closed. if (aBarCloser) { aBarCloser.addEventListener('click', function() { setTimeout(padBody, 500); }, false); } //Call function if/when window is resized. window.addEventListener('resize', padBody, false); }); //A function to calculate header height, then pad main content accordingly. function padBody() { var headerHeight; headerHeight = header.offsetHeight; //On mobile, headerHeight will be 0, So recalculate from mobileHeader. if (!headerHeight) { headerHeight = mobileHeader.offsetHeight; } siteInner.style.paddingTop = headerHeight + "px"; resizeImages(); } //A function to resize images after padBody. function resizeImages() { var images = document.querySelectorAll('img[data-src]'); for (var i = 0; i < images.length; i++) { ImageLoader.load(images[i]); } } </script> Do let me know if this works for you. -Brandon If this or any other answer helps you out, please give credit where credit is due and Accept and/or Up-Vote that answer. If it didn't help, feel free to inquire further or wait and see what others have to say. Code is provided without any warranty, expressed or implied.
  15. Hi there. This can be done like this. Remove any previous code you added. Then, add the following code via the CSS Editor: .websiteFrame { position: fixed; z-index: 990; background-color: rgba(198, 250, 229, 1); } #websiteFrameTop { top: 0; left: 0; width: 100%; height: 10px; } #websiteFrameRight { top: 0; bottom: 0; right: 0; width: 10px; } #websiteFrameBottom { bottom: 0; left: 0; width: 100%; height: 10px; } #websiteFrameLeft { top: 0; bottom: 0; left: 0; width: 10px; } Then add the following code via Code Injection, to the "Footer" area: <div id="websiteFrameTop" class="websiteFrame"></div> <div id="websiteFrameRight" class="websiteFrame"></div> <div id="websiteFrameBottom" class="websiteFrame"></div> <div id="websiteFrameLeft" class="websiteFrame"></div> Do let me know if this works for you. If you have any questions on it, I'm happy to answer them. -Brandon If this or any other answer helps you out, please give credit where credit is due and Accept and/or Up-Vote that answer. If it didn't help, feel free to inquire further or wait and see what others have to say. Code is provided without any warranty, expressed or implied.
  16. Cool. I'll try to take a look at the other question soon. Do keep in mind, people here may be more likely to help if they see that you take the time mark answers as 'accepted' if in fact they are the right answer for you.
  17. I edited the code in my second answer. It's much simpler now (assuming that you removed the previous code). Regarding your comment about the aspect ratio of the images: capping the max-width does not affect the rendering of the images, or their aspect ratio. If you remove the code and expand and contract the width of your browser from very wide to very thin, you'll see that those images change aspect ratio throughout the entire range. That is how that particular template is designed. Capping the max-width simply stops that scaling at a certain point, once that max-width is reached.
  18. New answer for you: The following code will limit the width of the entire website on the York template. It also prevents the height of other elements within the website from growing. /*Prevent York Template from expanding infinitely in height/width*/ /*Limit width of entire site.*/ #site { max-width: 1400px; /*Adjust as desired.*/ margin-right: auto; margin-left: auto; } /*Prevent header growing in height infinitely.*/ #header { margin-top: 5%; } -Brandon If this or any other answer helps you out, please give credit where credit is due and Accept and/or Up-Vote that answer. If it didn't help, feel free to inquire further or wait and see what others have to say. Code is provided without any warranty, expressed or implied.
  19. @joshuar87 Great. If you wouldn't mind marking my answer as accepted, that'd be appreciated.
  20. Hi Matt. It's always a good idea to check the style editor to see if you can adjust the setting from there. It sounds like you've done that. In which case, you can try inserting this CSS into the CSS editor. #page { max-width: 980px; /*Adjust this number as desired.*/ } -Brandon If this or any other answer helps you out, please give credit where credit is due and Accept and/or Up-Vote that answer. If it didn't help, feel free to inquire further or wait and see what others have to say. Code is provided without any warranty, expressed or implied.
  21. Hi all. This works for me: {## <p>This code won't appear.</p> <p>Neither will this.</p> {website.id} <!--This won't show either.--> Nothing in here will render. ##} EDIT: Squarespace has published the 'comment directive': {# This is a single line comment} {##BEGIN} This is a longer, mulitline comment {##END} But this also works for me, as does my initial example: {##} This is a longer, mulitline comment {##} -Brandon If this or any other answer helps you out, please give credit where credit is due and Accept and/or Up-Vote that answer. If it didn't help, feel free to inquire further or wait and see what others have to say. Code is provided without any warranty, expressed or implied.
  22. Update 10/24/2019: Add this via the CSS Editor, save and refresh: /* Add this first bit to get more flexibility in height. */ .sqs-layout.sqs-editing .sqs-block, .sqs-block-spacer-content { min-height: 0px !important; } .sqs-block-spacer .sqs-block-content { height: 0; } /* Add this second bit too if you want to be able to go to zero. */ .sqs-block-spacer { padding-top: 0 !important; padding-bottom: 0 !important; } If a response helped you out, show some love by 'Like' (bottom-right) and/or 'Upvote' (top-left). Note that the minimum width of a spacer block isn't dictated by the block, but by Squarespace's grid system. It's not an issue with the spacer block, but it's the minimum width of any block on Squarespace (technically, it's the minimum width of columns). Messing with grid column width requires a case-by-case evaluation and code-writing. Original Answer: Hi @joshuar87. I've run into this in the past as well. The minimum height of the spacer block can seem too high for some instances. The minimum height seems to be based on a combination of your templates default 'line-height' property, the default top/bottom gutter height (17px), and an arbitrary minimum padding set by the SS system. Finally, a min-height rule limits the spacer block when dragging it up and down in LayoutEngine. It is possible to override these values by inserting the following CSS into the CSS Editor. Save, then refresh the page. /*Remove minimum spacer-block height*/ .spacer-block { padding-top: 0; padding-bottom: 0 !important; } .spacer-block .sqs-block-content { line-height: 0.0em; } .sqs-layout.sqs-editing .spacer-block { min-height: 0; } /*End remove spacer-block height*/ Keep in mind that if Squarespace changes their code, this kind of CSS can stop working at any time. Let me know how this works for you. -Brandon
  23. Yes, here is a suggestion. First, check your style editor and be sure that there is not simply an option there to disable the 'fixed' header. If you don't see an option in your style editor, you can use the following CSS inserted into the CSS Editor: .header-announcement-wrapper { position: static; } #page { margin-top: 0 !important; } Remember, the CSS Editor and the Style Editor are different editors. The style editor is where you have simple options to change the template. The CSS editor allows you to insert code. -Brandon
  24. @michaelhull Hi. This should be do-able. The following CSS restyles the default next/previous arrows. Insert this using the style editor. .sqs-gallery-controls { background-color: white; padding-top: 25px } .sqs-gallery-controls .previous, .sqs-gallery-controls .next { background-color: transparent; margin-top: 0; padding: 0 !important; line-height: inherit; position: static; } .sqs-gallery-controls .previous:hover, .sqs-gallery-controls .next:hover { background-color: transparent; } .sqs-gallery-controls .previous::before, .sqs-gallery-controls .next::before { color: #2E2E2E; width: inherit; font-size: 10px; font-family: inherit; } .sqs-gallery-controls .previous::before { content: "PREV"; } .sqs-gallery-controls .next::before { content: "NEXT"; } .previous::after { content: "/"; color: #2E2E2E; margin-left: 5px } Do keep in mind that code like this can break if SQSP changes the template code. Also, I didn't test this across your site. If you're using galleries in other places, it might negatively affect them. So you'll need to test and tweak as necessary. Also, a disclaimer that I can't guarantee or warranty the results of using this code (use at your own risk). Finally, if this code helps you out, consider marking this answer as accepted. Or, inquire further or wait and see what others here have to offer. -Brandon
×
×
  • Create New...