Textbox colour

jbriginshawphotojbriginshawphoto TorontoRegistered Users Posts: 2 Beginner grinner
Hi there,
This forum was recommended to me by Smugmug support - I had no idea it existed!

I asked them if it was possible to change the colour of a textbox background. Here is my site (it is a work in progress) https://www.jbriginshawphotography.com/

If you scroll down a bit you will see "Capturing Memories for the playful, adventure-seeking, life-loving lovers". I want that whole textbox not to be white like the page colour, but a light grey that makes it stand out from the page. I heard someone here may have some tricks...

Which brings me to my next point - I am a total newb when it comes to coding, and I gather someone here may offer a solution with code. If the solution to my question involves code, I would love a link to an instructional on code with Smugmug and how to add what you are suggesting.

Really, really appreciated! Thank you.

Comments

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,272 Major grins

    Not sure if this is what you're after:

    This will involve code, no way around that. Add this to a CSS block in your home page:

    .sm-page-widget-30753078 .sm-widget-text {
      padding: 2rem;
      background-color: lightgray;
      width: 50%;
    }
    

    I use rem but if you want to use px, go right ahead. Feel free to change the background-color to suit. I also added a width because 100% just looked odd to me.

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,272 Major grins

    @jbriginshawphoto said:
    Which brings me to my next point - I am a total newb when it comes to coding, and I gather someone here may offer a solution with code. If the solution to my question involves code, I would love a link to an instructional on code with Smugmug and how to add what you are suggesting.

    There isn't.

  • jbriginshawphotojbriginshawphoto TorontoRegistered Users Posts: 2 Beginner grinner
    Hey thanks Mike! This is helpful. I was looking to have the grey block match the size of the photo next to it and for there not to be a white space between photo and grey box. Is that hard to tweak from what you have already done (which is appreciated!)
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,272 Major grins

    Not hard it all, but you'll have to use a HTML/CSS block in place of that image and the CSS I posted earlier. This is based on a tutorial I did here: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Services-Page-with-Image-Description-and-More-Horizontal

    Like I said, you'll need place ONE HTML/CSS Block and add this:

    HTML

    <section class="section">
      <img src="https://photos.smugmug.com/WeddingsFull/Sarah-Phil/n-DH3r6t/i-tgDCcnq/0/68f939fe/S/i-tgDCcnq-S.jpg" alt="Alt Text Here" width="400" height="267" />
      <div class="section__wrap">
        <h3 class="section__title">Capturing Memories</h3>
        <div class="section__details"><p>for the playful, adventure-seeking, life-loving lovers</p></div>    
      </div>
    </section>
    

    CSS

    /**
    * Image with Description
    *****************************************************/
    .section {
      display: flex;
      max-width: 950px;
      margin: 0 auto 2rem;
      padding: 1rem;
      background: #f7f7f7;
      border: 1px solid #e3e3e3;
    }
    
    .section img {
      margin: 0 1rem 0 0;
      max-width: 100%;
      height: 100%;
    }
    
    .section__wrap {
      display: flex;
      flex-direction: column;
      align-content: center;
      margin: auto;
    }
    
    .section__title {
      font-size: 1.25rem;
      color: #000;
      margin-bottom: 1rem;
    }
    
    .section__details {
      font-size: 1rem;
    }
    
    @media (max-width: 736px) {
    
      .section,
      .section__wrap {
        display: block;
        text-align: center;
        width: auto;
      }
    
      .section__wrap {flex-flow: column nowrap;}
    
      .section img {margin: 0 auto 1em;}
    
    }
    

    I've already added your photo, but feel free to change the photo and the width/height in the <img> section. I also added padding: 1rem, but if you don't want "space with color" remove it. Same thing with the border: 1px solid #e3e3e3;. The text will change to the bottom when the screen size is smaller than 736px for mobile.

Sign In or Register to comment.