Zenia Posted May 27, 2021 Share Posted May 27, 2021 Site URL: https://zelutionsagency.com/ Hi there, I'm looking to customise my buttons on my website using a png file. (see image below for example) Anyone who can help me with a css code on how to change buttons to a branded / customised png file? See below for website URL and password: URL: https://zelutionsagency.com/ PW: 123456 Thank you for your help! Link to comment
Wiehahn Posted May 27, 2021 Share Posted May 27, 2021 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; } tuanphan 1 Link to comment
Wiehahn Posted May 27, 2021 Share Posted May 27, 2021 The Video above will help you add a specific PNG to your buttons. tuanphan 1 Link to comment
Zenia Posted May 30, 2021 Author Share Posted May 30, 2021 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
tuanphan Posted June 1, 2021 Share Posted June 1, 2021 @Zenia Do you need help on these? Site URL – https://zelutionsagency.com/ 1. (Mobile-Homepage) Resize what we do text background? 2. (Tablet-Homepage) Similar on tablet 3. (Tablet/Mobile-Overlay) Change logo color? 4. (Mobile-What we do) Make Explore same line? 5. (Tablet-Branding) Fix these text? 6. (Tablet-Content) Similar 7. (Tablet-Web Design) 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
Zenia Posted June 2, 2021 Author Share Posted June 2, 2021 (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? 2. (Tablet-Homepage) Similar on tablet 3. (Tablet/Mobile-Overlay) Change logo color? 4. (Mobile-What we do) Make Explore same line? 5. (Tablet-Branding) Fix these text? 6. (Tablet-Content) Similar 7. (Tablet-Web Design) @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 June 3, 2021 by Zenia wanted to tag tuanphan Link to comment
Solution tuanphan Posted June 3, 2021 Solution Share Posted June 3, 2021 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. Zenia 1 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
Zenia Posted June 3, 2021 Author Share Posted June 3, 2021 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
tuanphan Posted June 4, 2021 Share Posted June 4, 2021 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 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
Zenia Posted June 4, 2021 Author Share Posted June 4, 2021 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment