Add background color to button on Collabs page

Add background color to button on Collabs page

room1021
Tourist
10 0 1

Hi! Does anyone know how to add a background color to the APPLY NOW and the LOG IN buttons on this page? Additionally, how to change the width of the blurb in the middle so that it matches the width of the rest of the page? Thank you!

 

https://room1021.com/pages/collab

Replies 2 (2)

Vinsinfo
Shopify Partner
485 165 167

@room1021 Please follow the below steps to add background color to the mentioned buttons and to increase the width of the description section. Let us know whether it is helpful for you.

 
1. From admin, go to "Online Store" -> "Themes".
2. Click the action button from the current theme and select "Edit code".
3. Search and locate the "application-page.css" file or some common CSS file like "theme.css". Add the below given CSS code at the bottom of the respective "application-page.css" file or common CSS file "theme.css".
 

 

.collabs-page__intro {
    width: 100% !important;
}

.collabs-page__cta .collabs-page__cta-main {
    background-color: #FFE4C4 !important;
}

.collabs-page__cta .collabs-page__cta-login-link {
    background-color: #FFE4C4 !important;
    padding: 14px 55px;
    display: inline-block;
}

 

 
4. Final results will be like,
Vinsinfo_0-1738042426758.png

 

 
FYI: If you need any assistance in locating and adding the given CSS code, don't hesitate to reach us. We're happy to help you. If this not what your expecting, kindly let us know your requirement in detail to assist you.
 
Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support

Sangeetanahar75
Tourist
16 1 7

hello @room1021 


Go to online store ----> themes ----> actions ----> edit code ---->base,css> ...add the code end of the file

.collabs-page__cta a {
    background-color: aliceblue;
}
.collabs-page__cta-login-section a {
    padding: 16px 55px;
    background-color: aliceblue;
}
.collabs-page__cta-login-section p {

    margin-bottom: 20px;
}
.collabs-page__cta-login-section a:hover {
    background-color: #ffcdb0;
}

If this was helpful, hit the like button and accept the solution.
Thanks

Was I helpful?  

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront

Contact here


Email me -Sangeetarahuldhiman;gmail.com - Skype: live:.cid.819bad8ddb52736c -Whatsapp: +917009811712
BEST CUSTOMER ACCOUNTS APP WITH CUSTOM WISHLIST OPTION 
TRY OUR APP :

PWC: Customer Accounts & Pages