Jump to content

Help needed to customise buttons using a png file

Go to solution Solved by tuanphan,

Recommended Posts

Hi don't think I completely understand what you are trying, but the code below should help you add the arrow in your example above.

You can also find the code with a nice explanation here: https://www.ghostplugins.com/steps/go-arrow-button-style-version-2

Code:
// Go Arrow Button - Button Padding //

.sqs-block-button-element--medium
{
    padding: 20px 30px !important;
    border: 2px solid #000000 !important;
}

// Go Arrow Button - Arrow Icon Style //

.sqs-block-button-element--medium:after {
    content: '➔';
    color: #000000 !important;
    border-left: 2px solid #000000;
    padding-left: 30px;
    margin: 0px 0px 0px 30px;
}

 

Link to comment
On 5/27/2021 at 9:26 AM, Wiehahn said:

Hi don't think I completely understand what you are trying, but the code below should help you add the arrow in your example above.

You can also find the code with a nice explanation here: https://www.ghostplugins.com/steps/go-arrow-button-style-version-2

Code:

// Go Arrow Button - Button Padding //

.sqs-block-button-element--medium
{
    padding: 20px 30px !important;
    border: 2px solid #000000 !important;
}

// Go Arrow Button - Arrow Icon Style //

.sqs-block-button-element--medium:after {
    content: '➔';
    color: #000000 !important;
    border-left: 2px solid #000000;
    padding-left: 30px;
    margin: 0px 0px 0px 30px;
}

 

Wiehahn, thank you so so much! 

The code works perfectly. Just changed out the symbol to one that I prefer and got it exactly as intended. So good. Thanks!

Link to comment

@Zenia Do you need help on these?

Site URL – https://zelutionsagency.com/

1. (Mobile-Homepage) Resize what we do text background?

zelutionsagency.com-01-min.png

2. (Tablet-Homepage) Similar on tablet

zelutionsagency.com-02-min.png

3. (Tablet/Mobile-Overlay) Change logo color?

zelutionsagency.com-03-min.png

4. (Mobile-What we do) Make Explore same line?

zelutionsagency.com-04-min.png

5. (Tablet-Branding) Fix these text?

zelutionsagency.com-05-min.png

6. (Tablet-Content) Similar

zelutionsagency.com-06-min.png

7. (Tablet-Web Design)

zelutionsagency.com-07-min.png

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 6/1/2021 at 4:36 PM, tuanphan said:

@Zenia Do you need help on these?

Site URL – https://zelutionsagency.com/

1. (Mobile-Homepage) Resize what we do text background?

zelutionsagency.com-01-min.png

2. (Tablet-Homepage) Similar on tablet

zelutionsagency.com-02-min.png

3. (Tablet/Mobile-Overlay) Change logo color?

zelutionsagency.com-03-min.png

4. (Mobile-What we do) Make Explore same line?

zelutionsagency.com-04-min.png

5. (Tablet-Branding) Fix these text?

zelutionsagency.com-05-min.png

6. (Tablet-Content) Similar

zelutionsagency.com-06-min.png

7. (Tablet-Web Design)

zelutionsagency.com-07-min.png

 

@tuanphan , thank you for your attention to all these details. All your suggestions are spot on.

Would indeed be happy to get help with this!

Thank you so much! 

Edited by Zenia
wanted to tag tuanphan
Link to comment
  • Solution
On 6/2/2021 at 3:33 PM, Zenia said:

@tuanphan , thank you for your attention to all these details. All your suggestions are spot on.

Would indeed be happy to get help with this!

Thank you so much! 

Q3. It looks like you solved?

Q1, 2, 4. Add to Design > Custom CSS

/* resize what we do */
@media screen and (max-width:991px) {
body.homepage article section:nth-child(n+2) img {
    object-fit: contain !important;
}
}
/* explore same line */
@media screen and (max-width:640px) {
div#page-section-60a8a65851d47a290882a09d .span-11 .col {
    width: 50% !important;
    float: left !important;
}
div#page-section-60a8a65851d47a290882a09d .span-11 .col .button-block a {
    padding-top: 0 !important;
}
}

If it works, let me know, we will check other problems.

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Hi @tuanphan

Both codes works perfectly thanks. Q1,2,3 and 4 i solved.

I haven't been able to fix the logo color for mobile version. Would appreciate your help with this.

Also, would appreciate if you could also please help with resizing background images on the about page and what we do page.

Kindest,
Zenia 

Link to comment
22 hours ago, Zenia said:

Hi @tuanphan

Both codes works perfectly thanks. Q1,2,3 and 4 i solved.

I haven't been able to fix the logo color for mobile version. Would appreciate your help with this.

Also, would appreciate if you could also please help with resizing background images on the about page and what we do page.

Kindest,
Zenia 

Add to Design > Custom CSS

/* resize background image */
@media screen and (max-width:767px) {
/* about */
[data-section-id="60abe38fbd6935109d8bbdc9"] img {
    object-fit: contain !important;
}
/* what we do */
[data-section-id="60a8a588d5bb325fd27f82b8"] img {
    object-fit: contain !important;
}
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
1 hour ago, tuanphan said:

/* resize background image */ @media screen and (max-width:767px) { /* about */ [data-section-id="60abe38fbd6935109d8bbdc9"] img { object-fit: contain !important; } /* what we do */ [data-section-id="60a8a588d5bb325fd27f82b8"] img { object-fit: contain !important; } }

Amazing @tuanphan

Works perfectly. Really appreciate your help, thanks.

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.