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

Help needed to customise buttons using a png file


Zenia

Question

9 answers to this question

Recommended Posts

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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
  • 0

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
Posted (edited)
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
  • 0

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