Jump to content

Change the background color of one small section on home page?

Recommended Posts

The home page is www.stonepierpress.org. I was asked to change the color of the background between the 2nd and 3rd lines -- where it has three photos (Environment Prize, News Fellows, Eating and Growing Good Food) -- to tint it slightly. Is it possible to change the background color slightly just between those two lines in that section?

Thanks!

Link to comment
  • Replies 3
  • Views 770
  • Created
  • Last Reply

IDs that start with YUI are not considered reliable.

The following attempts to fill the entire space between the rules, hide the rules, and maintain spacing. I could only test it on Safari.


#featured-pages {
background-color:#ddeeee !important;
top:-26px;
bottom:-26px;
padding-top: 26px;
padding-bottom: 26px;
}
#block-yui_3_17_2_1_1548047166885_128933 {
visibility:hidden;
}
#block-yui_3_17_2_15_1513861642692_12284 {
display:none;
}

alt text

Another version. This one keeps the rules and white margins left/right:


#featured-pages {
background-color:#ddeeee !important;
top:-26px;
bottom:-26px;
padding-top: 25px;
padding-bottom: 25px;
border-top: solid 1px rgba(15, 159, 125, 0.772549);
border-bottom: solid 1px rgba(15, 159, 125, 0.772549);;
margin-left:35px;
margin-right:35px;
}
#featured-pages .Index-page-content {
padding-left:12px !important;
padding-right:12px !important;
}
#block-yui_3_17_2_1_1548047166885_128933 {
visibility:hidden;
}
#block-yui_3_17_2_15_1513861642692_12284 {
display:none;
}

BONUS: Improved (?) text flow in narrow windows:


#featured-pages  p, #featured-pages a, #featured-pages h3 {
       overflow: hidden !important;
}

alt text

backgrn.png.563fba376cbb7dc0e5dc2eee02327cf2.png

screen-shot-2019-07-01-at-60140-pm.png.12c86de3404569a9e0abe8cb7b87ea47.png

Move along. Nothing to see here.

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.