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

alxfyv

Member
  • Posts

    1,885
  • Joined

  • Last visited

  • Days Won

    3

Community Answers

  1. alxfyv's post in In Squarespace Developer Mode, can one save the AWS CLI SDK to the website's server-side “Home” directory? If so, how? was marked as the answer   
    That would also include server-side JavaScript/Node. Because Squarespace only supports the front-end addition of HTML, CSS and Javascript within Code Injection, Code Blocks, and Developer Mode, you need to use front-end JavaScript in order to utilize third-party APIs (which is what you're doing currently).
    Enabling Developer Mode only exposes template files for the site. Beyond the JSON-T templating engine, Developer Mode doesn't enable any sort of server-side logic or requests to take place. Therefore, it seems the answer to your question is no.
    A potential alternative solution may be to use Google Apps Script or Google Cloud Functions instead, storing the credentials in the code there, and making a front-end request (via JavaScript on your website) to that endpoint in order to perform the handshake and get back the data you need.
  2. alxfyv's post in In Squarespace Developer Mode, can one save the AWS CLI SDK to the website's server-side “Home” directory? If so, how? was marked as the answer   
    That would also include server-side JavaScript/Node. Because Squarespace only supports the front-end addition of HTML, CSS and Javascript within Code Injection, Code Blocks, and Developer Mode, you need to use front-end JavaScript in order to utilize third-party APIs (which is what you're doing currently).
    Enabling Developer Mode only exposes template files for the site. Beyond the JSON-T templating engine, Developer Mode doesn't enable any sort of server-side logic or requests to take place. Therefore, it seems the answer to your question is no.
    A potential alternative solution may be to use Google Apps Script or Google Cloud Functions instead, storing the credentials in the code there, and making a front-end request (via JavaScript on your website) to that endpoint in order to perform the handshake and get back the data you need.
  3. alxfyv's post in How do I create a hover text over my grid gallery? was marked as the answer   
    You might try copying and pasting this in Design > Custom CSS:
    /* ** in gallery grid, set a hover over slide effect to ** display slide title on partially transparent ** overlay */ .sqs-gallery.sqs-gallery-design-grid .slide .margin-wrapper .image-slide-title { position: absolute; bottom: 0; width: 100%; height: 0; color: white; background-color: rgba(194, 194, 163, .8); opacity: 0; transition: all .25s ease-in; } .sqs-gallery.sqs-gallery-design-grid .slide .margin-wrapper:hover .image-slide-title { height: 40%; opacity: .9; }
    This should give you the effect, on hover over a slide, of a partially transparent overlay sliding up over the image and displaying the slide title.
    Let me know whether this works and, if so, whether it's the type of effect you have in mind.
    -Steve
  4. alxfyv's post in I can't get my google sheet to be responsive! What am I doing wrong? was marked as the answer   
    Put the following in the embed block:
    <div id="Iframe-Liason-Sheet" class="iframe-border center-block-horiz"> <div class="responsive-wrapper responsive-wrapper-wxh-550x2000"> <iframe src="https://docs.google.com/document/d/1VouYUL9gPUHsjCvZPwHhZ1JQ8yMhIgTTI6md5Sn-5rE/pub?embedded=true"> <p style="font-size: 110%;"><em><strong>ERROR: </strong>An iframe should be displayed here but your browser version does not support iframes.</em> Please update your browser to its most recent version and try again.</p> </iframe> </div> </div>
    Put this in Custom CSS:
    #Iframe-Liason-Sheet { max-width: 550px; max-height: 2000px; overflow: hidden; } /* inner wrapper: make responsive */ .responsive-wrapper { position: relative; height: 0; /* gets height from padding-bottom setting */ -webkit-overflow-scrolling: touch; overflow: auto; } .responsive-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: none; } /* padding-bottom = h/w as a % */ .responsive-wrapper-wxh-550x2000 { padding-bottom: 363.6364%; } .iframe-border { border: 1px solid #000; } .center-block-horiz { margin-left: auto !important; margin-right: auto !important; }
    I have it working with this code on this /test page on my site. I'll leave the page up for awhile. I'll leave the pen Responsive-Iframe-REF up on CodePen permanently.
    There is some extra height and some horizontal scroll at desktop/laptop sizes. I've been unable to modify this as the
    <iframe> won't display at any size other than 550x2000. It's persnickety that way. I've not encountered one like it.
    If you want to provide additional styling, padding, margin, box-shadow, etc., put the class names in the
    <div id="Iframe-Liason-Sheet"> opening tag and add corresponding class rule sets in CSS.
    If you need help with further CSS or anything, let me know. In any case, let me know how it works.
    -Steve
  5. alxfyv's post in Change header fill on scroll using jQuery and custom CSS was marked as the answer   
    I'm not a jQuery expert but I notice two things.
    You're loading jQuery v. 1. The latest release is v. 2.1.4 (iOS fail-safe edition, not support IE<9), or v. 1.11.3 (support IE6-8). jQuery 1.11.3 and 2.1.4 Released – iOS Fail-Safe Edition.
    I think the double colon in your css() method is incorrect. I think correct is
    'background-color' : 'rgba(0, 0, 0, 0.7)' w3schools Try-It Example.
    Hope this helps.
    -Steve
  6. alxfyv's post in How to change font style in markdown editing was marked as the answer   
    I've discovered the reason why the Bebas Neue font did not work in your markdown block. It's in several parts.
    (1) To use the TypeKit (and Google) fonts as provided on Squarespace, one must use the Style Editor thereby making broad changes to whole use categories, i.e., body text, nav font, etc. This method is not intended to facilitate the use of these fonts in a more targeted fashion, i.e., for a single paragraph, for the content in a markdown block, or for a particular CSS class. See Squarespace' Guide on how fonts work in Squarespace and Squarespace' Guide on using TypeKit fonts in Squarespace.
    (2) To use a TypeKit font in this more targeted fashion, one must create a Kit, “load" that Kit into Code Injection using the script and Kit ID provided by TypeKit, and then call upon the fonts in that Kit in individual instances. See Squarespace' Guide on using custom TypeKit fonts
    (3) In my test of 9 fonts mentioned in my comment above, the 6 fonts that failed to load in the markdown block did so because they are TypeKit fonts and no Kit was loaded for them. The only way to reach them without loading a Kit is through the Style Editor but with the Style Editor you have to make broad use category changes.
    (4) The 3 fonts that did not fail in the markdown block are not TypeKit fonts but what w3schools calls “web safe fonts” available in all browsers without loading them in a Kit.
    So the short answer is that to use the Bebas Neue font in your markdown block, you will have to create a Kit at TypeKit and use their generated script and Kit ID to load the Kit into your site. Without loading a Kit, you are limited to the web safe fonts for targeted usage.
  7. alxfyv's post in Can I have a different background image for mobile version of site? was marked as the answer   
    Hi Jeff,
    The background image and related CSS properties the home page currently has (at desktop sizes) are:
    .collection-type-template-page #outerWrapper { background-image: url("http://static1.squarespace.com/static/560d7230e4b0a4c7e9582606/t/560e9ee2e4b01316733a433f/1443798754915/sitebghome.jpg"); background-position: center center; background-size: cover; background-attachment: fixed; background-repeat: no-repeat;}
    For an explanation of what the various background properties mean and do, see the w3schools' article CSS Background and the MDN article background.You must have uploaded the current background image to Squarespace. If you don't want to do the same again with another image but want instead to use an image off the web, just substitute the url to your new image for the current url (http://static1.squarespace....) and put the CSS in Design > Custom CSS. You needn't put all the background property declarations in Custom CSS, just the ones you modify.
    If at first it seems not to work, add !important to the individual declarations. Thus, e.g., background-size: cover !important;.
    Whatever declarations you change, you will need to enclose them all in a media query. Thus:
    @media only screen and (max-width: 640px) { .collection-type-template-page #outerWrapper { /* property declarations here */ }}
    I hope this answers your question. If not, let me know.
  8. alxfyv's post in Why does it take different CSS to center the :before and :after pseudo-elements in my instance? was marked as the answer   
    OK. I think I've figured it out. I'll venture an explanation.
    Addressing first the :after pseudo-element.
    The hr element is block level. (StackOverflow) The :after pseudo-element matches a virtual last-child of the selected element and is inline by default (MDN - ::after pseudo-element) but in this case displays inline-block.
    Its normal position in the document flow is below the hr and to the left. Because it's a (virtual) last-child of the hr displaying inline, the text-align: center in the hr CSS rule set centers it. Because it also displays block, the position: relative and the top: -0.6em in its own rule set pull it up to overlap the hr. Thus it appears in the center and on top of the hr.
    Addressing second the :before pseudo-element.
    It matches a virtual first-child of the selected element, in this case an image block, and displays inline by default but in this case displays block. Its normal position in the document flow is above the image block. Its default width is 100%.
    Because its width is 100%, there is no issue of centering it itself. (If it had a lesser width, it could be centered by margin: 0 auto. (W3C: Centering Things)) Its content is the inline text and that is centered by the text-align: center declaration in its rule set.
    It's worth noting that the position: relative declaration is superfluous in this instance because there is no positioning declaration in the :before rule set. The (block) pseudo-element remains at its normal position in the document flow.
    After a lot of reading, pondering and ruminating, this is my understanding of what is going on in this instance. If anyone sees something wrong in my analysis or has a comment I'll be interested to see it.
×
×
  • Create New...