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


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by alxfyv

  1. I posted this question on StackOverflow and received the following answer from Brandon. You can't add server-side code. Server-side code is handled by a server, not by a browser, and includes: PHP Ruby Ruby on Rails SQL 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. Site URL: https://familyhistoryconferencenwa.org The Current Situation My Squarespace website uses client-side, custom JavaScript and JQuery injected into the Head section of a page as well as the Amazon Web Services Command Line Interface SDK. The custom JS, the JQuery and JS Libraries, and the SDK are loaded into the page Head each time the page is loaded. That Is Objectionable The SDK uses two predetermined, static, handshake credentials to connect to the AWS server. They are stored in a file, "credentials," in a hidden directory, .aws, created by the SDK when it first loads. At that point, however, they have no values. I've been setting them in client-side/browser-side source code. The Situation Exposes Supposedly Secret AWS Login Credentials To A Potential Hack I have been setting their values programmatically when the page loads by executing a CLI "updateConfig" command in the custom JS. The credential values are thus in a plain-text config file client-side. As such, they are not so secret. Any site visitor who loads the page in his browser could use the browser's developer tools to view the source code and, potentially, discover the supposedly secret credentials thus compromising the security of the AWS account. One Ought Not Put The Secret Credentials In Client-side JS AWS wants me not to put the credentials in client-side source code. I think the preferred method is to instantiate the SDK on the server-side and set the credentials one time only. Thereafter, the hidden .aws directory and the credentials file persist server-side at the root level of the website's Home Directory. The Problem So the problem is how to load the SDK in the server-side Home Directory where it will persist over the site's lifetime. The Question Two questions are 1) On a Squarespace website, can one load the SDK server-side at the root level on the site's Home Directory. Can it be done in Developer Mode? How? 2) Is my understanding incorrect? Is there a way to do everything client-side/browser-side and yet maintain the secrecy of the security codes?
  3. @adeuitch: So as not to hijack @sira's question with material not directly responsive to it, if you will pose a separate question of your own and leave a comment here with the question title and url, I will try to help. Try to decide on what effect you want for your site and pose your question as how to get that. Don't forget to give your template name and site url. As examples of the kind of hover effects that can be achieved, see Hover.css and CSS Image Hover Effects.
  4. @castigliano: Hi Christine, So as not to hijack this question, and to keep it a clean thread, would you please post your issue as a separate question? Then leave a comment here with the url to and title of your question. I will try to help. Thanks for your understanding. -Steve
  5. 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
  6. To help with code specific to your site and limited to affecting only the links you want to affect, one needs the site url. Consider editing your question (click on the small cogwheel icon to the right of the question title) to give this.
  7. To help, one needs the site url. Consider editing your question (click on the small cogwheel icon to the right of the question title) to give this.
  8. It's my pleasure. :-) The pen was not a lot of work. I already had the base code which I developed when I needed an <iframe> for my site. All I did was fork it and change a few lines. I've given an answer below with the code so you don't have to use the pen. Use the code below and it should be fine. Let me know one way or the other. -Steve
  9. 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
  10. I converted your "answer" to a comment which is where these remarks should go. I replied to that comment which is what you are reading now. I checked it out on my iPhone and iPad Air and it seems to be fine. Your are right though that it's not behaving correctly on the desktop/laptop. Let me investigate some and I will get back to you. In the meantime, just double check that you have the HTML correct in the embed block and the CSS correct in the Custom CSS. My suspicion is that there is something in the CSS that needs adjusting. -Steve
  11. Do not set attributes in the <iframe> tag, especially width and height. Do it in CSS. All that's needed in the <iframe> tag is the src= attribute. You will find all the HTML and CSS needed to have a responsive <iframe> in the pen Responsive Iframe - REF on CodePen. See the comments (comments button on the lower left) for further explanation. The <iframe> is responsive in that at narrower window sizes it scrolls horizontally. Put the HTML in an embed block. Put the CSS in Design > Custom CSS. Keep or discard the CSS general styles setting border, box-shadow, padding, etc. If you have questions, leave a comment. In any event, please let me know whether it works and satisfies your needs. -Steve
  12. @jaydev: I too have Bedford. I adapted @BrandonW's code to work with Bedford. You may see it at this /test page. If it satisfies your needs, post an independant question specific to Bedford and mention me by my @_username reference. I'll answer with the adapted code. (Don't forget to give the url to your site in the question.) -Steve
  13. OK. Redesign is always an option. :-) You should have said something. We could try writing a rule just for mobile sizes. If you do come back to it and want some help or input, just leave a comment here and use my username. Good luck.
  14. I checked the site. When I first landed on the Cover Page, the buttons were there and looked good. But when I reloaded the page the subscribe button was gone. Can't get it back no matter what I do. If you can get the Enter button on the left and the Subscribe on the right, I think I can get them to align nicely in a column using the CSS Flex Box technology. But for the Enter button to be on top in the column, it has to be on the left in the row. Let me know if I can help.
  15. Can you get the Subscribe button on the right and the Enter Site button on the left? If you can, do so. Let me know either way. I'm sure there's nothing glitchy about your site. We'll get it working. Keep a separate browser tab open and navigated to your site as a visitor -- not logged in. When you want to test whether a change has worked, switch to that tab and reload the page. Be sure to click Apply and Save everywhere. In the meantime, I edited the answer. Try it as the page is right now.
  16. My mistake. You said Cover Page and I know better, just had a senior moment. :-) I edited the answer. To be used in Page Header Code Injection, the CSS needs to be wrapped in <style></style> tags. But I see you've inserted a third button. Can you put the Enter Site and EJ's Blog buttons on the left and the Subscribe button on the right? If so, I think I can give you a look you will like using Flex Box.
  17. You might try this in Settings > Advanced > Page Header Code Injection for the Cover Page: <style> /* ** reposition the newsletter form ** subscribe link on the landing page ** down and right */ [data-slice-id="575b233d4d088eebd1fbb631"] { position: absolute; top: 200px; left: 335px; ) </style> Let me know how it works. -Steve
  18. My pleasure. You might want to consider putting the JQuery in a code block in the footer (at the end of the page) rather than in Page Header Code Injection (at the beginning of the page). At the beginning, it gets executed even if the browser isn't finished loading the DOM. It may not make a difference in your case, if nothing is executed automatically but instead awaits a user action. Sometimes, though, it does.
  19. 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
  20. 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.
  21. I tested 9 fonts in a markdown block. Of the 9, 3 worked (Georgia, Trebuchet MS, and Times New Roman) and 6 did not (Bebas Neue, Alternate Gothic No. 3D, Alegreya SC, Old Standard TT, Libre Baskerville, and Graduate). I submitted a ticket to Customer Support. We'll see what they say.
  22. I edited your question 1. to correct a syntax error in your CSS (substituted 'Bebas Neue' for Bebas Neue), and 2. to substitute < for the < character so that your code would show up in the question as code rather than being executed by the markdown processor as HTML code, and 3. to enclose the code in <pre><code></code></pre> tags to make it appear as a code block in the question. I tried the corrected CSS in a text markdown block to see if it would work as corrected. It did not.
  23. In this case the CSS selector .collection-type-template-page selects the home page. To get the CSS to apply to all the pages, omit that selector. The first line of the CSS rule should be simply #outerWrapper {. Try that and see if it does what you want. Let me know.
  24. 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.
  • Create New...