How to change "Featured Blog" Button and "Slideshow" Button Styling in Blockshop Theme

Solved
canopy-health
Tourist
4 0 2

Hello,

I have the Blockshop Theme and want to change the button styling at the bottom of the Featured Blog Section and in the Slideshow Section to the following:

:before {
    background-color: #00573d;
    color: #fff;
    font-family: Karla;
    border-radius: 34px;
    font-size: 18px;
}

:after {
    background-color: rgba(0, 87, 61, 0.82);
    color: #fff;
    font-family: Karla;
    border-radius: 34px;
    font-size: 18px;
}

 

Thanks in advance. 

 

KetanKumar
Shopify Partner
17242 1869 6450

@canopy-health 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
canopy-health
Tourist
4 0 2
0 Likes
KetanKumar
Shopify Partner
17242 1869 6450

@canopy-health 

thanks for the details please add this 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme--async.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

.slideshow--button a div, .slideshow--button a {
    background-color: rgba(0, 87, 61, 0.82) !important;
    display: inline-block;
}
.featured-blog--footer a div {
background: rgba(0, 87, 61, 0.82);
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
g33kgirl
Shopify Partner
223 59 71

@canopy-health, may I know what exactly do you want to achieve by using :before and :after pseudo selectors? If you can let us know, it will be easier to help you out.

You can add this at the end of your CSS file (Themes -> Edit code -> Assets -> theme--async.css

.section--slideshow .slider .slide .caption a[data-item="button"] {
  background-color: transparent !important
}

.section--slideshow [data-item="button"] > *, .featured-blog--footer [data-item="button"] > *  {
   color: #fff;
   font-family: Karla;
   border-radius: 34px;
   font-size: 18px;
   background-color: #00573d;
  
}
.section--slideshow [data-item="button"] > *::before, .featured-blog--footer [data-item="button"] > *::before {
    content:""; 
    background-color: #00573d;
}

.section--slideshow [data-item="button"] > *::after, .featured-blog--footer [data-item="button"] > *::after {
   content:"";
   background-color: rgba(0, 87, 61, 0.82);
}

 

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
Do NOT give out your passwords unless absolutely necessary.
0 Likes
canopy-health
Tourist
4 0 2

This worked great. I meant to type "Normal" and "Hover". Do you know how I would style for a hover color of rgba(0, 87, 61, 0.82)?

0 Likes
g33kgirl
Shopify Partner
223 59 71

This is an accepted solution.

@canopy-health, just change the :after code to :hover 

.section--slideshow [data-item="button"] > *:hover, .featured-blog--footer [data-item="button"] > *:hover {
   background-color: rgba(0, 87, 61, 0.82);
}

 

You can also remove the :before code so basically your whole code would look like:

.section--slideshow .slider .slide .caption a[data-item="button"] {
  background-color: transparent !important
}

.section--slideshow [data-item="button"] > *, .featured-blog--footer [data-item="button"] > *  {
   color: #fff;
   font-family: Karla;
   border-radius: 34px;
   font-size: 18px;
   background-color: #00573d;
  
}

.section--slideshow [data-item="button"] > *:hover, .featured-blog--footer [data-item="button"] > *:hover {
   background-color: rgba(0, 87, 61, 0.82);
}
If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
Do NOT give out your passwords unless absolutely necessary.
canopy-health
Tourist
4 0 2

Thanks so much to both answers. They worked great. 5/5