Jump to content

Inspirerd

Circle Member
 View Profile  See their activity

  • Posts

    35

  • Joined

  • Last visited

 Content Type 

Everything posted by Inspirerd

  1. Inspirerd
    Hi @melaniejaane! I found in the jQuery documentation that it says that the `:last` selector selects the last matched element. I think that means the last instance that matches the selector, and thus only one item. I was going to recommend the `last-child` selector, but just in case the `last-child` is hidden, here is a better solution. This selects the last one for the tag section of each summary item (actually the last tag of each tag section). <script> $(function () { $('.summary-metadata-item--tags').each(function() { $(this).children('a:visible:last').addClass('mk-last-visible') }) }); </script> Hope this helps!
  2. Inspirerd
    Hey @TonyGoedde! Could you share a link to your website so I can debug why the code didn’t make any changes?
  3. Inspirerd
    @JZoeller Here you go! Feel free to increase the padding on the buttons (`.header-nav-item`) or ask me to, if you want them bigger. (The first padding `10px` is vertical and the second `20px` is horizontal.) @media screen and (min-width: 768px) { .header-nav-item { border: solid 1px var(--navigationLinkColor); border-bottom: 0; padding: 10px 20px; position: relative; } .header-nav-item--active.header-nav-item--active.header-nav-item--active>a { background-image: none; } .header-nav-item--active::before, .header-nav-item--active::after { content: ""; position: absolute; bottom: 0; border-bottom: solid 1px var(--navigationLinkColor); width: 100000px; width: 100vw; } .header-nav-item--active::before { right: 100%; } .header-nav-item--active::after { left: 100%; } .header-title-nav-wrapper { align-items: flex-end; } .header-announcement-bar-wrapper.header-announcement-bar-wrapper { padding-bottom: 0; } .header-title-logo { padding-bottom: 0.6vw; } }
  4. Inspirerd
    Hey @JZoeller! Here is the first draft to show you the concept. Feel free to nitpick and tell me all the adjustments you want (should the line touch the image, should there be more space between the logo and the line, should the links have bigger boxes?) Make sure to take a look at how it behaves when you scroll the page. Here is the code (it only applies this style to desktop/not to mobile). @media screen and (min-width: 768px) { .header-nav-item { border: solid 1px var(--navigationLinkColor); border-bottom: 0; padding: 10px 20px; position: relative; } .header-nav-item--active.header-nav-item--active.header-nav-item--active > a { background-image: none; } .header-nav-item--active::before, .header-nav-item--active::after { content: ""; position: absolute; bottom: 0; border-bottom: solid 1px var(--navigationLinkColor); width: 100000px; width: 100vw; } .header-nav-item--active::before { right: 100%; } .header-nav-item--active::after { left: 100%; } .header-title-nav-wrapper { align-items: flex-end; } }
  5. Inspirerd
    Hey @JZoeller! Wow that looks cool! I’m willing to take a stab at it. Could you share a link to your website so I can make code for your template/style? (If it’s password protected, please include your password.)
  6. Inspirerd
    @Mandy_miisprint Yes, I see the other website you linked doesn't have a problem. Maybe there is a way you can fix that on SalonSpy in a dashboard or maybe you need to contact their support. Let me know how it goes and then we can move on to the next part.
  7. Inspirerd
    @Mandy_miisprint Okay, I am inspecting the code in that script. I believe I see a line that causes the widget to not show up if there are no reviews (it says the review count is 1827, but then shows no reviews in the script). Could that be what is happening?
  8. Inspirerd
    Hi @Mandy_miisprint! Before we can get to the full width part, we need to figure out why it isn't showing up. It seems that the script is not loading like it does on the other website you linked. Is there something missing from the installation instructions (I couldn't find the installation instructions on Google)? Or is there something you have to enable in a dashboard or something first?
  9. Inspirerd
    Sorry about that. Your code is correct. I also updated the original answer I gave.
  10. Inspirerd
    Hey @collgrimes! I believe this should work: #siteWrapper .sqs-block-button a, #siteWrapper [class*='button'], #siteWrapper [class*='btn'] { font-family: 'NYRO' !important; letter-spacing: -.2rem; } What I did was nest the selector under an ancestor of #siteWrapper which is the id of the container of the website (first descendent of body). This is because your selector was altering the Squarespace editor buttons. This change makes it only select things within your Squarespace website. Hope this helps!
  11. Inspirerd
    Hey @BradleyK! Give this a try: .marquee-block, .marquee-block p, .marquee-block h1 { font-weight: bold; font-style: italic; /* If you want 50% black as in gray. */ /* This does not lighten delimeter/divider */ color: hsl(0deg 0% 50%); } /* OR if you want 50% transparent (use only one or you will have 25% black) */ .marquee-block { /* This does lighten delimeter/divider */ opacity: 0.5; } (In case you weren't sure how to add custom CSS: https://support.squarespace.com/hc/en-us/articles/206545567-Using-the-CSS-Editor) Hope this helps!
  12. Inspirerd
    Hey @LindsEli! It seems your button has a transparent background. I am not sure if that is the result of your theme styles or custom css and if there is a way to adjust that there to fix it. If you want to go the code override route, here is some code that should fix it, but make sure it doesn't negatively affect other pages. button.newsletter-form-button.sqs-button-element--primary.sqs-button-element--primary.sqs-button-element--primary.sqs-button-element--primary.sqs-button-element--primary { background-color: white !important; } button.newsletter-form-button.sqs-button-element--primary.sqs-button-element--primary.sqs-button-element--primary.sqs-button-element--primary.sqs-button-element--primary:hover { color: black !important; } (In case you weren't sure how to add custom CSS: https://support.squarespace.com/hc/en-us/articles/206545567-Using-the-CSS-Editor) The repetitiveness/length of the selectors are to override the other class which already has high specificity/priority. You can change the color from black to whatever you want. That is the color of the button text when you hover over it. Regarding the pop up suggestion you made. I couldn't find an easy way to do it with the newsletter block. But I know you can do that with the form block by adding a form, then on the design tab of the block options, toggling "Lightbox". Hope that helps!
  13. Inspirerd
    Hey @Nzilani! Since that is likely just CSS, you can just add it to the CSS editor. Or yes, you can host it and link to it. If you add the CSS directly, make sure to add the contents of the file (not the name of the file/link). (In case you weren't sure how to add custom CSS: https://support.squarespace.com/hc/en-us/articles/206545567-Using-the-CSS-Editor)
  14. Inspirerd
    Hey @mcafee.michelle! The screenshot you attached is broken for me, but I took a stab at it anyway. Regarding the first issue, there seems to be a syntax error in your CSS code. The CSS code you added, specifically the code for the title is prefixed by some malformed style properties that aren't inside a selector grouping. When I removed that and just kept the code for the title style, it worked. .header-display-desktop { flex-direction: column } Regarding the second issue. I am not sure if there isn't an option in the editor. But in case there isn't, here is some code that should fix it, but double check to make sure it doesn't mess up any other pages. .page-section.background-width--inset:not(.content-collection):not(.gallery-section):not(.user-items-list-section) { padding-bottom: 0; } .background-width--inset:not(.content-collection):not(.gallery-section):not(.user-items-list-section) .section-background { bottom: 0; } Let me know how that goes.
  15. Inspirerd
    @bengroner Glad @melody495 and I could help! And no worries about the solution thing!
  16. Inspirerd
    Hey @BrockDunnet! I am not quite sure if it can be done in the editor (that is to say, I am not confident it can't be done in the editor), but here is some code that achieves that. .user-items-list-carousel .mobile-arrows { display: none; } (In case you weren't sure how to add custom CSS: https://support.squarespace.com/hc/en-us/articles/206545567-Using-the-CSS-Editor)
  17. Inspirerd
    Glad I could help!
  18. Inspirerd
    Hey @bengroner! Thanks for the link. It should work for your website. @melody495 was correct with their instructions. You want to use Custom CSS when you get there and you can copy and paste the code I provided. (You only need to type it in yourself if the copy and paste doesn't work.) @melody495 I think your suggestion is with the 7.1 editor (based on the brush icon in the top right). I didn't realize how in-depth the 7.1 style options were - I will keep that in mind. I believe that since @bengroner is using the Foster template, he must be on the 7.0 editor. Also, I think (but I could be wrong), based on this answer (linked below), one of my own websites, and the Foster demo I used, that Code Injection and Javascript requires a Business plan or higher, but CSS and Custom CSS works even on the personal plan.
  19. Inspirerd
    Hey @bengroner! I wasn't sure if you were open to a code solution or if you were trying to stay away from one. Here is a code snippet that should work. I created a demo website with the Foster template, but make sure it works as you expect on yours, or if you could, share a link to your website. .summary-excerpt { color: hsla(0, 0%, 32%, .6); } (In case it's helpful, here is how you can add CSS: https://support.squarespace.com/hc/en-us/articles/206545567-Using-the-CSS-Editor) Hope this helps! Let me know if that answers what you wanted.
  20. Inspirerd
    Hey @PUMCSBH! Here you go! let elementsArray = document.querySelector(".sqs-slide-layer.layer-front"); if (elementsArray) { elementsArray.style.cursor = "pointer"; elementsArray.addEventListener("click", function (event) { let targetElement = event.target; while (targetElement) { if (targetElement.tagName === 'A') { // It's a link, allow the default behavior return; } targetElement = targetElement.parentElement; } window.location.href = 'home'; }); } You don't need the code you mentioned. This adds a listener for a click on the slide but checks to make sure the click event didn't happen inside a link element. Hope this helps!
  21. Inspirerd
    Hey @mcafee.michelle! Do you have a link to a preview of the website (it can be password-protected)? Also I am not quite sure I understand what you are saying regarding the second issue.
  22. Inspirerd
    Thank! I think this should do it! Let me know what you think. a.sqs-block-image-link { border: none; } (Just in case you are wondering how to add custom css: https://support.squarespace.com/hc/en-us/articles/206545567-Using-the-CSS-Editor) Hope that helps!
  23. Inspirerd
    Hey @lunakito! Could you provide a link to your website or a preview? It will help me figure out the appropriate code for your version/template.
  24. Inspirerd
    Hey @TonyGoedde! For the header, you have multiple options. The first option is just the title like you showed in the screenshot. If you want the title and date, use the second option. I added padding again if you want it left-aligned, so it doesn't touch the edge. The last `text-align` line makes it centered like in the screenshot, but you can remove that line, if you want to keep it aligned to the left. /* For only the title */ h1.entry-title { background: gainsboro; } /* For the title and the date */ .post header { background: gainsboro; padding: 15px; /* text-align only if you want it centered */ text-align: center; } Regarding the header. There are a number of pieces, so only include what you need. There is the navigation background. There there are three different types of orange modifiers, with the third option being what is in the screenshot. The last piece is for your navigation, if you want to change the background or the active box for mobile. /* Navigation background */ div#navigation-top { background: gainsboro; } /* Option 1: For small orange box; */ div#navigation-top li.active-link { background: orange; } /* Option 2: For orange text; */ div#navigation-top li.active-link a { color: orange !important; } /* Option 3: For full height orange background box; */ div#navigation-top { overflow: hidden; } div#navigation-top li.active-link { position: relative; } div#navigation-top li.active-link:before { position: absolute; top: -100px; bottom: -100px; content: ""; background: orange; width: 100%; z-index: 1; } div#navigation-top li.active-link a { position: relative; z-index: 2; } /* For mobile navigation */ #mobile-navigation { background: gainsboro; } #mobile-navigation li.active-link { background: orange; }
  25. Inspirerd
    Hi @TonyGoedde! FIVE is a theme I haven't used, but I pulled up the demo to figure out some code to get your started. #sidebar-one-blocks { background: lightgray; padding: 20px } Add the above block to your CSS: https://support.squarespace.com/hc/en-us/articles/206545567-Using-the-CSS-Editor You don't have to include the padding line, but it might look nicer if you don't want the text touching the edges of the background. You can change lightgray to the color code you wanted. Note that this will likely affect the sidebar on the blog page and the individual posts page. We can figure out an adjustment if that wasn't what you were hoping for. I am not quite sure what you meant regarding the header title block. If you could explain more or point out exactly what you are hoping for, I may be able to help more. Also if you have a link to the website, that would make it easier as well. Hope this helps!
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources