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

Quick Custom CSS Questions

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

Share this post


Link to post

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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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

Share this post


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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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?

Share this post


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!

Share this post


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.

Share this post


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