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

lu.diehl

Circle Member
  • Content Count

    127
  • Joined

  • Last visited

  • Days Won

    2

Everything posted by lu.diehl

  1. Hey @tantrum - try adding the code in the response above, if it doesn't work since it is a different template please share a link to your website (and psw if needed)
  2. @Monte63 - sorry for the late response. Let me know if this works: .collection-type-page.has-promoted-gallery.transparent-header .promoted-gallery-wrapper .sqs-gallery-block-slideshow { height: 450px !important; background-color: #FFFFFF; } @media only screen and (max-device-height: 640px) .collection-type-page.has-promoted-gallery.transparent-header #promotedGalleryWrapper .sqs-gallery-block-slideshow, .collection-type-page.has-promoted-gallery.transparent-header .promoted-gallery-wrapper .sqs-gallery-block-slideshow { height: 200px !important; background-color: #FFFFFF; }
  3. Hi @Monte63 - can you share a link (and password if protected) to your website?
  4. Hi @lucia_123, the code you shared looks confusing... which template are you using for your website?
  5. For the <a> another style is using a rule that is more important than what you are writing, in this case you need to add ! important after the color code, which makes it stronger and ignores all the subsequent rules. For the <h1> there's a typo - in color code you should write color without 'u'. However, I recommend you changing your header colors using the native tools instead. Go to Design > Style and change your main colors there 😉 a{ color: red!important; } h1{ color: red; }
  6. Hi @lucia_123, can you share a link to your website and/or share how you are writing your code?
  7. Yes, you can actually change the min-device-width to whatever you want, but for general iPad layouts use 768px. //* For general iPad layouts *// @media only screen and (device-width: 768px) { /* Code goes here */ }
  8. Hi @DaleBoettcherPhoto, the code I wrote before isn't great actually... I would try it differently this time. If you're looking to change it only in one page then add the code below to the page setting > Advanced instead of adding it the general Custom CSS. If you're looking to change it all pages, add it to Design > Custom CSS and remove the <style> tags. <style> @media only screen and (min-device-width: 640px){ .promoted-gallery-wrapper { height: 500px!important; } .sqs-gallery-design-stacked-slide { height: 500px!important; } .sqs-gallery-controls .next, .sqs-gallery-controls .previous{ top: 250px!important; } } </style> Let me know how it looks... if you need further help, please share a link to your website.
  9. Add !important at the end to the color code, it should work. for transparent background: .header-nav-folder-content { background-color: rgba(203,242,246,.6)!important; } for white background: /** SOLID WHITE BACKGROUND **/ .header-nav-folder-content { background-color: #FFFFFF!important; }
  10. I can see you're missing a semicolon ( ; ) in your HTML code after the span style attributes in both blocks. It should read style="color: black;" in the first block and style="color: red;" in the second block. Not sure if this is what is going to fix your problem, I'd have to take a look at your website so if you're still having problems please share a link to your website.
  11. Hi @PMDesigner - I would add PNG images with transparent background with the icons and buttons in white only. Then add a red background to the static images with CSS and a hover effect changing the color. That's super simple to achieve. If you need further help, please share a link to your website and password.
  12. They are both the same exact link. Can you explain further what the issue is and what you want to achieve?
  13. Hi @AThompson_social - I've used this in the past and it worked well for me on Brine template: 1. Add this to Settings > Advanced > header code injection: (Change the scroll height you wish to change the color, here it is set to 400 px) <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(window).on("scroll", function() { if($(window).scrollTop() > 400) { $(".Header").addClass("on-scroll"); } else { $(".Header").removeClass("on-scroll"); } }); </script> 2. Add this to Design > Custom CSS Change the background color you wish to use. If your navbar is transparent at the starting point, then remove the last piece of code (.Site-inner) .Header{ background-color: blue!important; position: fixed!important; transition: 0.2s all linear; -webkit-transition:background-color .4s; -moz-transition:background-color .4s; transition:background-color .4s; } .on-scroll{ background-color: red!important; } .Site-inner{padding-top: 50px;} Let me know how it goes! Your website is pwd protected... if you want further help, please share the password 😉
  14. Hi @coralinart The lines weight look fine on my end, but if you want to make it thicker, increase the border thickness to 2px: body:not(.tweak-transparent-header) .burger-inner::before, body:not(.tweak-transparent-header) .burger-inner::after { background-color: #FFF!important; border: 2px solid #fff; } I don't understand what you mean by only showing the navigation while it's inactive... isn't it what it is doing? Can you clarify?
  15. @New_Designer try looking for the image block ID. The block ID starts with "block-" followed by a set of numbers, for example: id="block-5a6263c01ea450cffcf0" as shown in the image attached. If you need further help, please share a link to your website 😉 If you use the Google Chrome browser there is this really helpful extension called the Squarespace Collection/Block Identifier which saves me time identifying any block ID in Squarespace. It shows the Squarespace page collection ID and permanent block IDs when you enable it. https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde
  16. You add the code to the blog page you want to remove the metadata, and not to the site wide custom CSS. To do so, go to your portfolio page settings, choose Advanced > Page Header Code Injection and add the code between <style> </style> If you want further help, please share a link to your website 🙂
  17. I'm glad you found a solution for the first issue! For the burger menu... If you want to change the background box of the burger menu: .burger { background-color: #FFF!important; } If you want to change the color of the lines: body:not(.tweak-transparent-header) .burger-inner::before, body:not(.tweak-transparent-header) .burger-inner::after { background-color: #FFF!important; }
  18. Copy and paste the code below to your Custom CSS. Change the height value to what you want. Let me know if this works... .collection-type-page.has-promoted-gallery #promotedGalleryWrapper .sqs-block, .collection-type-page.has-promoted-gallery .promoted-gallery-wrapper .sqs-block, { max-height: 500px!important; } .sqs-gallery-design-stacked-slide { height: 500px!important; }
  19. Find the unique page ID of the pages you wish to remove the white background. To find the ID, right-click anywhere on the page and choose "view source". Press Ctrl+F or Cmd+F and in search type "body" to locate your body tag. The ID will show right next to body tag and starts with "collection-...". Copy the whole string as shown below. In the code below I'm using your homepage unique ID. Let me know if it works! #collection-5dd16c5c6be9a958a6e8f080 .header-announcement-bar-wrapper { background-color: transparent; }
  20. Use either this piece of code to your custom CSS. Use the rgba color if you want to add transparency to the background, adjust the alpha value from 0 (transparent) to 1 (opaque). If you want to use a solid color, use the bottom piece of code and replace the #FFFFFF to the hex color you wish to use instead. /** TRANSPARENT BACKGROUND **/ .header-nav-folder-content { background-color: rgba(203,242,246,.6); } /** SOLID WHITE BACKGROUND **/ .header-nav-folder-content { background-color: #FFFFFF; }
  21. hi dario, I'm not 100% sure what you want to achieve - you want to disable mobile style and force desktop menu on mobile view? If that is what you're trying to do, you can change it in "Site Styles > Mobile breakpoint" and force the breakpoint to 0 - just overwrite it by highlighting it and changing it manually to 0, if you use the slide it will only go down to 240px. Let me know if that's what you meant.
×
×
  • Create New...