Editing css in Elements

Elements
1

Hello,

I purchased the Ascent Elements project.

There is additional css in this project eg the name of a text component states 'go to - CODE CSS ascent-linehover’.

Is it possible to change this css in Elements?

2

@MultiThemes This is a question for you :slight_smile:

3

Just sent an email with a temporary UPG :smiling_face_with_sunglasses:

I’m working on a BIG upgrade, not only for Ascent but for all projects in my store, all components with options panel, a big work, stay tuned!

linehover
linehover400×473 27.7 KB

@Fuellemann thanks a lot!

4

@MultiThemes, users shouldn’t need to be specifying colours in css, is there any reason why you’re not using Theme Colour here?

There’s some more information on component styling for developers here :slight_smile:

5

Hi @dan This is a rare case,I can’t use the standard Tailwind color classes here because the animated element is generated with a ::before pseudo-element, which Tailwind doesn’t support directly. That’s why I had to rely on standard HTML color values.

to change the behavior of the menu I use a simple CSS class, and I work only with a:link and on top of it I build everything with ::before

…to make it flexible I’ve provided both a custom input field (so you can use any color you like) and a predefined list of the most common colors, including the option to add transparency.

Of course, if I find native Tailwind solutions to use ::before and ::after elements using utility classes I will use them but this is a rare case :open_mouth:

1 Like
6

Hi @MultiThemes

Tailwind does support ::before and ::after. You just need to use the before: or after: modifiers:

before:bg-red-500

And if you’d like to expose this as a control, you can combine themeColor with the format property. For example:

{
  "title": "Background",
  "id": "beforeBgColor",
  "format": "before:bg-{{value}}",
  "themeColor": {
    "default": {
      "name": "red",
      "brightness": 500
    }
  }
},

That said, I’m not sure how you’re building your menu effect, but I’d be cautious about relying on the current HTML structure or class names of the Menu component. If those change in the future, your code could break and that’s bad for everyone involved.

I’d really encourage finding solutions that don’t depend on internal implementation details. Think of those class names and structures as an “internal API”, they might change at any time.

If you ever need help when building something custom, please drop us a message and we’ll be happy to help you find a more robust approach :slightly_smiling_face:

1 Like
7

I’m working on 6 complete components (with standard colors) , and the only panel I’ve shown is the one with HTML color :slight_smile:
Thank @ben , I’ll definitely check it out!