Jump to content

Image Block: How do I add Custom CSS to change image-caption text attributes?

Recommended Posts

I am using the Five template for my website, primarily because I wanted 3 columns in my blog. However, the text attributes for image captions are hard coded (weirdly enough) to be all uppercase and the text color is a dark gray.

Problem is the background on my canvas is dark gray, so the image caption doesn't read very well, AND I don't like all uppercase.

Now, I know how to go in and add custom css code, but I don't know what code I need to put in in order to change the image caption text color and have it be capitalized (rather than all uppercase).

Thanks for any help!

Link to comment
  • Replies 9
  • Views 23.3k
  • Created
  • Last Reply

OK, So I dug around for a bit and figured out how to get into the css and play with the text attributes. I added the following code to Custom CSS.

.sqs-block-image .image-caption p {  font-size: 16px;   font-family: "futura-pt";  text-transform: none;  letter-spacing: 1.3pt;  font-weight: 400;  font-style: normal;  color: #ebebeb;  line-height: 0.00em;}

Link to comment

This code fixed part of the problem in that it changed the color of the image caption, but the font size remains too small and changing the font-size in the code has NO effect, even though color and text-transform attributes respond.

It seems that the image caption's text size is being inherited from some other part of the code.

Can anyone tell me what I'm doing wrong?

Link to comment

Ok! I FIXED IT! yay!!!!

Here's how I did it. Apparently I had to override the font-size attribute by adding "!important"

Here's the code:

.sqs-block-image .image-caption p {
 font-size: .75em !important;
 font-family: Muli, Helvetica, Arial, sans-serif;
 text-transform: none;
 letter-spacing: .5pt;
 font-weight: 100;
 font-style: normal;
 color: #ebebeb;
 margin-top: 1em;

Link to comment
  • 1 month later...
  • 2 months later...
  • 4 years later...
  • 1 month later...
  • 6 months later...
  • 2 months later...


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

This topic is now 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.