Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Quick Custom CSS Questions


ItsOK
Go to solution Solved by tuanphan,

Question

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 post
  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

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 sc

Posted Images

7 answers to this question

Recommended Posts

  • 1

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;
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 1
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?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0

@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 post
  • 0

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;
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0

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 post
  • 0
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 post
  • 0
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 post

Create an account or sign in to comment

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


√ó
√ó
  • Create New...