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

OneKindKevin

Member
  • Posts

    15
  • Joined

  • Last visited

Posts posted by OneKindKevin

  1. 11 hours ago, tuanphan said:

    Your page is not fullwidth, so it is difficult to create the background color fullwidth

    Can you describe the element you want to change color + color? I'll check it again.

    I want the section containing the libsyn audio player (code), the video, and the four images linking to podcast players to have the full-bleed background of #161616 for desktop and mobile.

    Screen Shot 2020-05-21 at 1.09.28 PM.png

    Screen Shot 2020-05-21 at 1.10.00 PM.png

  2. On 5/19/2020 at 5:26 AM, tuanphan said:

    Same banner image for all posts, or different banners for different posts?

    I know that I need to write both JavaScript and css, but I am hoping it won’t be that challenging. And since I was able to find the YouTube video referenced earlier doing it for 7.1 I am hoping it won’t be that much different for 7.0. 

    Also CORRECTION. I want the image to be the alternate social media image.

  3. Site URL: https://www.onekindcreative.com/podcast/katrinahopper

    How do I change the background of a section of a blog post (for every blog post). As you see in the attached images, I am wanting to have the top section be black background, and then when I get to the writeup, change the background color to light gray, then switch to white for a callout section. I do not know which or how to reference the same part of every blog post to give it a background of #x color

    Screen Shot 2020-05-18 at 2.04.55 AM.png

    Screen Shot 2020-05-18 at 1.59.18 AM.png

  4. Site URL: https://www.onekindcreative.com/podcast/katrinahopper

     How do I add Banner header image to an individual blog post? I want the header background image to be what I upload to the social media image for each blog post. I came across this on youtube:

     Unfortunately, his code and solution is for squarespace 7.1, and I am on 7.0.

    I attached examples of what I want it to look like for both desktop and mobile. Thank you for helping.

     

    Screen Shot 2020-05-18 at 1.59.18 AM.png

    Screen Shot 2020-05-18 at 2.04.55 AM.png

  5. Site URL: https://www.onekindcreative.com

    I have read through quite a few threads and I haven't found an answer on this one. I am wanting a transparent header (something that 7.1 makes pretty easy). I have tried using code but I haven't been able to get the content to move up to the top of the screen (behind the logo and links). I want this on both web and mobile and all pages. I have also attached two design images of what I am trying to accomplish.

    Screen Shot 2020-05-18 at 9.44.30 AM.png

    Screen Shot 2020-05-18 at 9.44.17 AM.png

  6. I am wondering a similar thing. I am trying to set up my blog posts with sections using different background colors. See the current post at https://onekindcreative.squarespace.com/podcast/katrinahopper. I have attached the design of what I am trying to accomplish. I know there is a lot of customization in the image, but I am specifically wondering how do I make some sections' background black, some sections light gray and some sections white? (I'd want this would be the same on every post) Thank you.

    Screen Shot 2020-05-18 at 1.59.18 AM.png

  7. Site URL: https://www.onekindcreative.com/podcast/emily-jimison-celebrity-makeup-artist-3sf2f-2ga7x-9c42b-g2yyn

    I would like to have the headers of the blog posts on my site be full bleed parallax images called from an upload in the edit post window (like alternate social sharing image *see second attachment*). Is this possible? I would also like to have a gradient overlay on the image, the post titles to be white, and the navigation menu to be transparent. I recognize this is some pretty advanced customization, so I have provided an example of what I would like my blog posts to look like. Thank you for your help!

    Screen Shot 2020-03-05 at 12.23.45 PM.png

    Screen Shot 2020-03-05 at 6.13.12 PM.png

  8. Quote

    @media screen and (max-width:640px) {
       .Index-page-content {
        justify-content: bottom !important;
        padding-bottom: 1% !important;
      }
      #banner {
        background: -moz-linear-gradient(top,  rgba(0,0,0,0) 15%, rgba(233,210,192,1) 100%);
        background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 15%,rgba(233,210,192,1) 100%);
        background: linear-gradient(to bottom,  rgba(0,0,0,0) 15%,rgba(233,210,192,1) 100%);
      }
    }


    Thank you again Brandon! Resolved content positioning issue with the code above.  

    Now I would like the gradient color rgba(233,210,192) to be at full opacity before the bottom of the banner. Somewhere right above the get started button (per the first image). I would also love to get rid of hyphens. I have attached a screenshot of the way the site currently looks on mobile. 

    IMG_0016.PNG

  9. 13 hours ago, brandon said:

    Hi @OneKindKevin. If the gradient is what you're concerned with primarily (as opposed to wanting to use an entirely different photograph on mobile) it looks to me like something that can be accomplished via CSS.

    Something like this, inserted via Custom CSS:

    
    @media screen and (max-width:640px) {
      .Index-page-content {
        justify-content: end !important;
        padding-bottom: 8% !important;
      }
      #banner {
        background: -moz-linear-gradient(top,  rgba(0,0,0,0) 35%, rgba(233,210,192,1) 100%);
        background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 35%,rgba(233,210,192,1) 100%);
        background: linear-gradient(to bottom,  rgba(0,0,0,0) 35%,rgba(233,210,192,1) 100%);
      }
    }

    Do let me know how that works for you.

    -Brandon

    Thank you Brandon! Part of the code is working, part isn't. The gradient worked but .Index-page-content has pushed all the text up. Thoughts on why?

    IMG_5E4582DEBF07-1.jpeg

×
×
  • Create New...