Jump to content

Custom CSS not showing

Go to solution Solved by rwp,

Recommended Posts

Site URL: http://www.theteagroup.org/

My custom CSS modifications seem to work just fine when I'm in the editor, but disappear otherwise. They don't show when I first open the squarespace editor (but they pop up when I open the custom CSS window) and they don't show in the live site. Am I doing something wrong?

 

//HOME TOP
#block-yui_3_17_2_1_1594315778391_107782{
  background-color: #2ba9e1;
  padding: 50px;
  box-shadow: 20px 20px 0px 0px #feda12;
  h1{
    color: #ffffff;
  }
  body{
        color: #ffffff;
  }
  }

//MINDFULNESS BLOCK
#block-yui_3_17_2_1_1588640146898_4376,#block-5eb0b983c1797117b8377ae4 
{
 
  background: rgba(43, 169, 225, 0.75);
  padding: 50px;
  border-left: 20px solid #feda12;
  margin: 20px;
}

Screen Shot 2020-07-09 at 2.33.22 PM.png

Screen Shot 2020-07-09 at 2.33.39 PM.png

Link to comment
  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

Ok, I swapped out the // for regular css comments. It didn't fix the problem but that's good to know. (My CSS is REALLY rusty)

Update: I created the styled text on the right using a markdown box instead of text box. I can certainly do the rest this way, but it seems a little redundant so I'd like to figure out the CSS problem. There's some other custom CSS on another page that worked just fine under the Editor, but still isn't showing on the site.

 

Screen Shot 2020-07-09 at 3.34.59 PM.png

Link to comment

I know my formatting might be terrible, but I'm not sure the proper way to do it.

On the services page, I wanted to change the color of the picture block text background for each of the three items.

On the home page, I want to make certain blocks of text have that formatting (yellow line and blue background).

I've been referencing the item I want to change by using the selector I located in the browser - is there a better way to do this?

/*COLORS
Dark Blue (Social Con): #2364a5
Teal (Found Heal): #339899
Magenta (Prof Dev): #ad3683
*/
/*SERVICES PAGE*/
/*changes color of picture block 1*/
.Index-page:nth-of-type(2) .sqs-block-image .design-layout-collage .image-card {
 background:  #ad3683 //pink
}
/*changes color of picture block 2*/
.Index-page:nth-of-type(3) .sqs-block-image .design-layout-collage .image-card {
 background:#2364a5 //dark blue
}
/*changes color of picture block 3*
.Index-page:nth-of-type(4) .sqs-block-image .design-layout-collage .image-card {
 background: #339899; //teal
}

/*HOME LANDING/TOP*/
#block-yui_3_17_2_1_1594315778391_107782{
  background-color: #2ba9e1;
  padding: 50px;
  box-shadow: 20px 20px 0px 0px #feda12;
  h1{
    color: #ffffff;
  }
  body{
        color: #ffffff;
  }
  }

/*SERVICES SECTION*/
#block-yui_3_17_2_1_1594312120971_13945{ a { color: #ad3683;
   }
}
/*ONLINE CONNECTIONS SECTION*/
#block-yui_3_17_2_1_1594319586457_41553,#block-yui_3_17_2_1_1588640146898_4376,#block-5eb0b983c1797117b8377ae4,
{
 
  background: rgba(43, 169, 225, 0.75);
  padding: 50px;
  border-left: 20px solid #feda12;
  margin: 10px;
}
#block-yui_3_17_2_1_1594319586457_41553{
  width: 100%;
  align: center;
  margin: 10px;
}
/*RESOURCES+BLOG SECTION*/

#block-yui_3_17_2_1_1594326822227_8132,
#block-yui_3_17_2_1_1594326822227_6533,
#block-yui_3_17_2_1_1588107847569_10266,
#block-yui_3_17_2_1_1588107847569_4178
{
  background: rgba(43, 169, 225, 0.75);
  padding: 30px 0px 0px 30px;
  border-left: 20px solid #feda12;
  margin-right: 10px;
  margin-left: 10px;
}

Edited by NoelleTEAgroup
clarification
Link to comment
  • Solution
/* COLORS
Dark Blue (Social Con): #2364a5
Teal (Found Heal): #339899
Magenta (Prof Dev): #ad3683
*/

/* SERVICES PAGE
changes color of picture block 1 */
.Index-page:nth-of-type(2) .sqs-block-image .design-layout-collage .image-card {
  background: #ad3683; /* pink */
}

/* changes color of picture block 2 */
.Index-page:nth-of-type(3) .sqs-block-image .design-layout-collage .image-card {
  background: #2364a5; /* dark blue */
}

/* changes color of picture block 3 */
.Index-page:nth-of-type(4) .sqs-block-image .design-layout-collage .image-card {
  background: #339899; /* teal */
}

/* HOME LANDING/TOP */
#block-yui_3_17_2_1_1594315778391_107782 {
  background-color: #2ba9e1;
  padding: 50px;
  box-shadow: 20px 20px 0px 0px #feda12;

  h1 {
    color: #ffffff;
  }

  body {
    color: #ffffff;
  }
}

/* SERVICES SECTION */
#block-yui_3_17_2_1_1594312120971_13945 a {
  color: #ad3683;
}

/* ONLINE CONNECTIONS SECTION */
#block-yui_3_17_2_1_1594319586457_41553,
#block-yui_3_17_2_1_1588640146898_4376,
#block-5eb0b983c1797117b8377ae4,
  {
  background: rgba(43, 169, 225, 0.75);
  padding: 50px;
  border-left: 20px solid #feda12;
  margin: 10px;
}

#block-yui_3_17_2_1_1594319586457_41553 {
  width: 100%;
  text-align: center;
  margin: 10px;
}

/* RESOURCES+BLOG SECTION */

#block-yui_3_17_2_1_1594326822227_8132,
#block-yui_3_17_2_1_1594326822227_6533,
#block-yui_3_17_2_1_1588107847569_10266,
#block-yui_3_17_2_1_1588107847569_4178 {
  background: rgba(43, 169, 225, 0.75);
  padding: 30px 0px 0px 30px;
  border-left: 20px solid #feda12;
  margin-right: 10px;
  margin-left: 10px;
}

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

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