Textbox colour

jbriginshawphoto

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.

Hikin' Mike

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' Mike

@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.

jbriginshawphoto

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' Mike

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.