CMS Development

SH82
Member

How to change css pseudo propery in module

SOLVE

I have premade module where i need to change background gradient by content creator by  targeting .classname__image::after element. i able to change element from " .classname__image" element but cannt target any pseduo element.

 

how can i creat multiple gradient color and content creator just click checkbox and color change.

 

 

.classname__image {
  text-align: right;
}


.classname__image::after {
  background:linear-gradient(256.1deg,rgba(56,158,60,.76) 15.56%,rgba(38,91,55,.79) 78.17%);
}

 

 

0 Upvotes
1 Accepted solution
Anton
Solution
Key Advisor | Diamond Partner
Key Advisor | Diamond Partner

How to change css pseudo propery in module

SOLVE

Hi @SH82

have you tried it like this

.classname__image:after { {# just one colon instead of two #}
  background:linear-gradient(256.1deg,rgba(56,158,60,.76) 15.56%,rgba(38,91,55,.79) 78.17%);
}

 

For the second question: Are we talking about custom modules?

If so you could

- create different classes for each gradient like

.gradient1{
{# code for the first gradient #}
}
.gradient2{
{# code for the second gradient #}
}
.gradient3{
{# code for the third gradient #}
}

in a/your CSS file

- create a select option in the custom module and set the class names as the select value

- finaly place the code in the desired <div> like

<div class="some-class {{module.gradient_selector}}">
...
</div>

 

 

best, 

Anton




check
Did my post help answer your query? Help the Community by marking it as a solution



View solution in original post

3 Replies 3
Anton
Solution
Key Advisor | Diamond Partner
Key Advisor | Diamond Partner

How to change css pseudo propery in module

SOLVE

Hi @SH82

have you tried it like this

.classname__image:after { {# just one colon instead of two #}
  background:linear-gradient(256.1deg,rgba(56,158,60,.76) 15.56%,rgba(38,91,55,.79) 78.17%);
}

 

For the second question: Are we talking about custom modules?

If so you could

- create different classes for each gradient like

.gradient1{
{# code for the first gradient #}
}
.gradient2{
{# code for the second gradient #}
}
.gradient3{
{# code for the third gradient #}
}

in a/your CSS file

- create a select option in the custom module and set the class names as the select value

- finaly place the code in the desired <div> like

<div class="some-class {{module.gradient_selector}}">
...
</div>

 

 

best, 

Anton




check
Did my post help answer your query? Help the Community by marking it as a solution



Jaycee_Lewis
Community Manager
Community Manager

How to change css pseudo propery in module

SOLVE

Thanks for the in-depth reply and for the examples, @Anton  🙌 – Jaycee

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot

Jaycee_Lewis
Community Manager
Community Manager

How to change css pseudo propery in module

SOLVE

Hi, @SH82 thanks for the code snippet! Let's see if any of our smart cookies here in the community can assist. Hey, @Anton and @amwilie do you have any ideas for @SH82?

 

Thank you very much 🧡  – Jaycee

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot

0 Upvotes