Jump to content

Quick Custom CSS Questions

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://goby-icosahedron-jc2m.squarespace.com/

Hello Friends!

I'm trying to implement my design (attached) to Squarespace in the best way possible and I have a few quick questions.

Here is the link, and password is circle20. I'm on the Business Plan.

Any help would be very much appreciated ūüôā

--

In ‚ÄėUpcoming Events‚Äô;

  • Can I move the date a few pixels away from the event title?

In ‚ÄėRecent Musings‚Äô;

  • Can I set a different button style? (Black text on all white)
  • Can I make two buttons closer to each other?

In ‚ÄėFaura Newsletter‚Äô;

  • Can I align text to left?
  • Can I change the text color from grey to black?
  • Can I move the button down the newsletter and center it?
  • And finally, can I reformat the Sign Up button so that it matches the button at the top (under the cover image)?

Right under the cover image,

  • Can I make the text ('What is Faura?') upside-down (as in the original design) without using an image?

Thank you so much in advance!

All the best,
Ozan

Faura-New2-BB2.jpg

Link to comment
  • Solution

Q1. Add to Home > Design > Custom CSS

div#block-yui_3_17_2_1_1594164210024_4552 time.summary-metadata-item.summary-metadata-item--date {
    margin-top: 5px;
}

Q2. Add to Home > Design > Custom CSS

div#block-yui_3_17_2_1_1594171468145_6775+.row .button-block a {
    background: white;
}

Q3. Add to Home > Design > Custom CSS

  • Can I align text to left?
  • Can I change the text color from grey to black?
  • Can I move the button down the newsletter and center it?
  • And finally, can I reformat the Sign Up button so that it matches the button at the top (under the cover image)?
/* align left input text */
div#block-b0537e9432db29a2d38d input {
    padding-left: 0 !important;
}
/* input color */
div#block-b0537e9432db29a2d38d input::placeholder {
    color: black;
}
/* butotn */
div#block-b0537e9432db29a2d38d .newsletter-form-button {
    background: white !important;
    color: black !important;
    border-color: black !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

@tuanphan I can't thank you enough! I really appreciate every second you spend to help.

I have a few quick points to clarify if you don't mind:
 

  • Should I assume that there is technically no way to put the Newsletter button 'below' the text fields, centered?
     
  • Depending on the screen¬†resolution, two buttons in the Recent Musings section look different. Sometimes they are one-line, sometimes two-lines, and sometimes inconsistent as in the attached image. Is there a way to fix this to one line?
     
  • Is there a way to close the¬†gap between those two buttons?

Screen Shot 2020-07-22 at 11.26.03 AM.jpg

Link to comment

Should I assume that there is technically no way to put the Newsletter button 'below' the text fields, centered?

Can you describe in detail? Button under Last name field?

Depending on the screen resolution, two buttons in the Recent Musings section look different. Sometimes they are one-line, sometimes two-lines, and sometimes inconsistent as in the attached image. Is there a way to fix this to one line?

Add to Home > Design > Custom CSS

/* 2 buttons same line */
div#block-yui_3_17_2_1_1594171468145_6775+.row {
    display: flex;
}

Is there a way to close the gap between those two buttons?

/* receent musing buttons */
div#block-yui_3_17_2_1_1594171468145_6775 + .row .button-block {
    padding: 0 !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

Thank you for all your help @tuanphan!

14 hours ago, tuanphan said:

Should I assume that there is technically no way to put the Newsletter button 'below' the text fields, centered?

Can you describe in detail? Button under Last name field?

Yes. In a second line, centered below the text fields. (You can see my very first attachment to see the original design)

14 hours ago, tuanphan said:

Depending on the screen resolution, two buttons in the Recent Musings section look different. Sometimes they are one-line, sometimes two-lines, and sometimes inconsistent as in the attached image. Is there a way to fix this to one line?

Add to Home > Design > Custom CSS


/* 2 buttons same line */
div#block-yui_3_17_2_1_1594171468145_6775+.row {
    display: flex;
}

Is there a way to close the gap between those two buttons?


/* receent musing buttons */
div#block-yui_3_17_2_1_1594171468145_6775 + .row .button-block {
    padding: 0 !important;
}

These partially worked but the gap still changes depending on the resolution. In a relatively small screen, it looks great. When I extend the browser window, the gap gets bigger and bigger. Is there a way to fix it so that the space always stays the same?

Link to comment
On 7/24/2020 at 3:46 PM, ItsOK said:

Thank you for all your help @tuanphan!

Yes. In a second line, centered below the text fields. (You can see my very first attachment to see the original design)

These partially worked but the gap still changes depending on the resolution. In a relatively small screen, it looks great. When I extend the browser window, the gap gets bigger and bigger. Is there a way to fix it so that the space always stays the same?

Hi @tuanphan,

Would you mind taking a look at these two last things?

Thanks a million!

Link to comment
On 7/30/2020 at 2:18 AM, ItsOK said:

Hi @tuanphan,

Would you mind taking a look at these two last things?

Thanks a million!

Q1. Button under text field, add to Home > Design > Custom CS

/* Signup under text field form block */
div#block-b0537e9432db29a2d38d .newsletter-form-body {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

Q2. These partially worked but the gap still changes depending on the resolution. In a relatively small screen, it looks great. When I extend the browser window, the gap gets bigger and bigger. Is there a way to fix it so that the space always stays the same?

Did you solve?

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 7/31/2020 at 2:20 AM, tuanphan said:

Q1. Button under text field, add to Home > Design > Custom CS


/* Signup under text field form block */
div#block-b0537e9432db29a2d38d .newsletter-form-body {
    display: flex;
    justify-content: center;
    flex-direction: column;
}


Q2. These partially worked but the gap still changes depending on the resolution. In a relatively small screen, it looks great. When I extend the browser window, the gap gets bigger and bigger. Is there a way to fix it so that the space always stays the same?

Did you solve?

Code for Q1 worked perfectly! Thank you so much!

... and no, I couldn't find a solution for Q2.

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.