Jump to content

Caption | changing font size, color

Recommended Posts

On 3/29/2022 at 7:35 PM, JakeLake said:

Preferably bigger, bolder and in gold (and framed?)?

Thank you so much!

Add to Design > Custom CSS

body.homepage p.gallery-caption-content {
    font-size: 30px !important;
    color: #ffc700;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Wonderful ; and if I want the text positioned a bit lower lower? 
Also, the last image (STAR) I have used SHIFT+ENTER for two lines; how do I narrow the height?

Tried adding border without success;

body.homepage p.gallery-caption-content {
    font-size: 17px !important;
    color: #black;
      border: 20px solid #black !important;
}

Edited by JakeLake
add
Link to comment
On 3/31/2022 at 11:30 PM, JakeLake said:

Wonderful ; and if I want the text positioned a bit lower lower? 
Also, the last image (STAR) I have used SHIFT+ENTER for two lines; how do I narrow the height?

Tried adding border without success;

body.homepage p.gallery-caption-content {
    font-size: 17px !important;
    color: #black;
      border: 20px solid #black !important;
}

Black, has no # symbol

use this code

body.homepage p.gallery-caption-content {
    font-size: 17px !important;
    color: black;
    border: 20px solid black !important;
    padding-top: 50px !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
2 hours ago, JakeLake said:

1. I want the text to be bold.
2. I want the border around the text only please?
3. I want the border in gold please?

1. Use this CSS

body.homepage p.gallery-caption-content {
    font-size: 17px !important;
    font-weight: bold;
}

2. 3. Your current code, can't achieve this. Will need adjust lot of current code.

First, edit this code

figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
    pointer-events: none;
}

to this

figcaption.gallery-caption .gallery-caption-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
    pointer-events: none;
}

next, edit this code

.gallery-grid-item:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}

to this code

.gallery-grid-item:hover .gallery-caption-wrapper {
    opacity: 1 !important;
}

Next, add this code to Custom CSS

body.homepage figure figcaption .gallery-caption-wrapper p.gallery-caption-content {
    font-size: 17px !important;
    font-weight: bold;
    color: black !important;
    border: 1px solid gold;
}

Note: I don't know if the code you are using is for which sections of the website, other than the current section on the homepage, adjusting it, could affect them all.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
20 hours ago, JakeLake said:

So Events & festivaler — StarCruiter (squarespace.com) PW still = ANTERO2022

In the picture I want a scaled effect (opacity?) from left to right, - in order to make the overlay text more visible in the left part of the picture?

Skjermbilde 2022-04-04 124010.png

Add to Design > Custom CSS

/* events and festival image */
div#block-6f0990c7c36a0933b9ae figcaption:after {
    content: "";
    background-color: rgba(255,255,255,0.75);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
}
div#block-6f0990c7c36a0933b9ae figcaption {
    position: relative;
}
div#block-6f0990c7c36a0933b9ae figcaption .image-card {
    z-index: 99999999;
}

image.thumb.png.b521a80c0679d4801434b236b3429184.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
19 hours ago, JakeLake said:

WOW - and if I want it to work on all pages?

I tried removing the div#block elements, which resulted in grayscale overriding hover on 1st page....

 

With all pages, use this (not sure if it will cause any problems)

figcaption:after {
    content: "";
    background-color: rgba(255,255,255,0.75);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
}
figcaption {
    position: relative;
}
figcaption .image-card {
    z-index: 99999999;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 4/6/2022 at 4:43 PM, JakeLake said:

Overrode grayscale on first page.....guess I can target every page othervise with #block.
Will that effect loading times?

It won't affect loading time

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.