Jump to content

thesoulfulentrepreneur

Circle Member
  • Posts

    71
  • Joined

  • Last visited

Posts posted by thesoulfulentrepreneur

  1. Hello @tuanphan - I'm back, sometime later, with another dilemma related to these gold frames. This time, it's with the first testimonial block which you will find here.

    I am able to add the gold border, however, when I add the padding value - the result looks like this: 

    image.thumb.png.2c0832f11f4f8230dc9f2ea50ebc37ae.png

    This is the code without the padding value: 

    #collection-6452ac9c917bdf36311b4be3 {
    .user-items-list-carousel__slide {
        flex-direction: row !important; }
    .user-items-list-carousel__media-container {
        width: 30% !important;
      margin-right: 50px; }
      
    .user-items-list-carousel__media {
        width: 100% !important;
      }  
    }
    section[data-section-id="6452aca66bb4183fdbf6d4da"] .user-items-list-carousel__media-inner {
        overflow: visible !important;
        border: 1px solid #d1a556;
    }

    Do you have any idea what we might be missing? 

    Thank you!

  2. On 11/10/2022 at 8:31 PM, tuanphan said:

    I think you should use a normal image, then we will use CSS to make curve on top left top right corners.

    I did an example with image at bottom of page'

    image.thumb.png.5298adbf8894d6892e62cbf5496d1cfd.png

    div#block-efff2a01b90cc35816e9 .image-block-wrapper {
        border: 1px solid #d1a556;
        padding: 10px;
        border-top-left-radius: 300px;
        border-top-right-radius: 300px;
    }
    div#block-efff2a01b90cc35816e9 img {
        border-top-left-radius: 300px;
        border-top-right-radius: 300px;
    }

     

    Thank you very much @tuanphan - I so greatly appreciate your support. I had to add !important to the border property but, it did the trick! 🙂 

  3. @tuanphan thank you - that worked 🙂 

    The good news, mostly everything has been addressed. Just this remains:

    Circular Boders 

    Is it possible to apply the frames with padding to images in testimonial slider blocks? For an example, please refer to the home page, under the 'our clients' block.

    I tried the following code:

    Quote

     

    .user-items-list-carousel__media-inner {

        border: 1px solid black;

    }

     

    However, the issue arises with padding: since we use the Fluid editor to crop the images in Squarespace, so the original images are actually square.

    Is there a code solution for this or would it be better for us to upload the images as circles? 

    Arch Borders

    On a somewhat similar note, is it possible to add gold frames to arch shaped images? For example, like the first image on this page.

    Thank you!

  4. @tuanphan thank you 🙂 generally speaking, this solved almost all issues. I noticed one small thing. 

    On the tools page: https://www.thesoulful.squarespace.com/tools, I applied the following code to remove the frames from the logos:

    Quote

    section[data-section-id="6324cd0347714e92a18a1541"] .fluid-image-container {
        border: none !important;
    }

    Prior to doing so, I noticed that the Flodesk logo is cut off, along the bottom. I believe it's due to this code, from the solution above:

    Quote

    .image-block .content-fill, .image-block .content-fit, .content-fit img {
        width: calc(~"100% - 20px") !important;
        height: calc(~"100% - 20px") !important;
        top: 10px !important;
        left: 10px !important;
    }

    because when I remove it, it's fine.

    Any thoughts on what to do here? Would it be easiest if we just manipulate the img file to add more white space around it? 

  5. @tuanphan ah ok, thank you - that makes sense in cases where I want to remove frames from all images in a section. 

    With the top section images, I'm referring to the first image on this page, for example: https://thesoulful.squarespace.com/pre-made-brands-websites (there are a few other pages, like this, where the top image already has a custom frame that's more complex than just a border). Another example of a 'specific' image that I may want to remove a frame from is the scrolling desktop mockups that you see in the 'our identities' section. 

    So in those situations, what's the best way to target a single image? Would it be like this (this is for the first image on the above referenced page)?

    #block-632883d2f88d78b13986a0e0 .fluid-image-container {
        border: none !important;
    }

     

  6. @tuanphan thank you very much. i have added it. the good news, it seems to solve one part of the problem noted above.

    the other, about how to not target some images, still remains. here are a couple of examples:

    - the logos on this page: https://thesoulful.squarespace.com/tools.

    - the header images on pages like this: https://thesoulful.squarespace.com/about

    is there any way to exclude images? 

  7. Site URL: https://www.thesoulful.squarespace.com

    Hello!

    Site URL: https://www.thesoulful.squarespace.com 
    Pass: livesoulfully

    I am interested in using CSS to apply borders to the images on a website as efficiently as possible.

    I referenced the solutions in this thread, however, none seemed to do the trick: 

    I got seemingly close with this:

    .sqs-block-image {
        border: 1px solid #d1a556 !important;
        padding: 10px !important;
    }

    However, two issues arise:

    1. There are several images I do not wish to target. I assume that requires us to get more specific with targeting, like using the section ID, like this (this is for the home header):

    section[data-section-id="6328d3a483fd37bbf384a8f6"] .sqs-block-image {
        border: 1px solid #d1a556 !important;
      padding: 10px !important;
    }

    2. In some cases, the padding doesn't apply evenly, for example, there may be more/less padding on the top/bottom of the image depending on the screen width. I have attached some examples for visual reference. I tried to solve this by switching the design setting of the image block from 'fit' to 'fill', but that introduces other proportion-related issues across screen sizes, which I'd like to avoid.

    Does anyone have any thoughts as to how to implement? 

    Thanks in advance!

    Screen Shot 2022-10-17 at 1.17.49 PM.png

    Screen Shot 2022-10-17 at 1.18.06 PM.png

  8. Hi @tuanphan - I recently updated this site to the fluid engine and, unfortunately the code no longer works. 

    To access the page, the URL is: https://thesoulful.squarespace.com/. Pass: livesoulfully.

    I tried to update the section/block IDs but, no luck. 

    Example:

    section[data-section-id="6329d15529842ea4bc52ac3a"] {
    .image-block a {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        transition: all 0.3s;
    }
    .image-block a {
        transition: all 0.3s;
    }
    .image-block:hover img {
        opacity: 0;
    }}
    
    div#block-6329d1552b4ffbc375724bdf:hover a {
        background-image: url(https://static1.squarespace.com/static/6226283dbb8c047be0806024/t/62c46b18d7ade732c875219b/1658252999585/COVER_portfolio_yaxkin.jpg);
    }

    Does it have something to do with the image block classes changing on the Fluid Engine? 

    Thanks!

  9. Site URL: https://www.thegroundedspirit.co/connect

    Hi! I'm woking on a Squarespace website and for whatever reason, the font weight on the contact page does not align with the rest of the website. It is heavier for h4, p2 and button styles than on the rest of the site and I cannot figure out why. All I can see is that on initial page load, it is fine, but then it changes. I have attached an example of the h4/p2 style on the sessions page versus the connect page. Does anyone have any ideas on why this may be happening? Thanks in advance!

    Screen Shot 2022-07-04 at 1.35.55 PM.png

    Sessions Page.png

  10. @tuanphan yes! that did the trick 🙂 thank you!!

    so if I want to apply the same for the section beneath the 'highlighted' clients, is it correct to update the first portion of the code as follows (in addition to customizing the rest of the code for each unique image)?

     

    div#page-section-6229356fbf842170a3f16127, div#page-section-627e96382f00f74bc41b4500 {
    .image-block a {
    	    background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    	transition: all 0.3s;
    }

     

  11. Hi @bangank36 - sorry for incredibly prolonged reply. We put that project on pause and I wasn't able to test it out.

    We have restarted and decided to change the implementation approach. We are no longer using a blog page. Instead, we simply added each image to a regular page as an image block and linked it to the corresponding portfolio page.

    While what you have shared above seems like it should work - for whatever reason, I cannot seem to get the correct ID/class combo to get the 'after' image to appear. 

    The updated link to the page is here (pass: soulfullife). 

    Thanks in advance for your guidance! I truly appreciate it.

  12. Site URL: https://www.thesoulfulentrepreneur.ca/clients

    Hello,

    I know that it is possible to change an image on hover using custom code blocks; however, is it possible to do so for blog cover images? The page I'm interested in doing this for is here. Ideally, I'd love to change each image to an image of the client upon hover. 

    If not, I realize that a workaround would be to set up a new page with custom code where each image is added as a code block and links to the corresponding blog page. However, I thought I'd investigate whether the above approach is possible before doing so.

    Thanks in advance for your help!

  13. @tuanphan back with a follow-up question. do you have any idea why the vertical line in the 'my approach' section of the 'coaching' page does not appear in the same position as the 'conscious coaching' section on the home page? I suspect it's because the structure of the elements in the block is different than all of the other sections I have added the vertical line to so where I added the code in the block is different. However, I figured I'd ask in case you have any comments. Is the only way to make the position match to add custom code for this section?

    The URL and pass have remained the same.

    The code I have added for this is:

    Code Block:

    <div class="vl-right"></div>

    CSS: 

    .vl-right {
      border-right: 1px solid #000000; 
      height: 800px; 
      position: absolute;
      left: 110%;
    }

    [data-section-id="60d0e85e724ba127a9a08e7b"] .content-wrapper  {
        padding-top: 0 !important;
    }

    Thanks in advance!

×
×
  • Create New...

Squarespace Webinars

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

Hire a Designer

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