No announcement yet.

How to override Dynamik Theme styles

  • Filter
  • Time
  • Show
Clear All
new posts

  • How to override Dynamik Theme styles

    I am using Beaver Builder in conjunction with the Dynamik theme.

    Sometimes Dynamik styles take precedence over Beaver Builder styles. There are cases where !important just doesn't cut it.

    For example, in the Services row, I set :hover rules on a parent container to add a border and change the color on hover. I wanted the text color to change as well. Examples at CodePen and Stack Overflow easily accomplish this. However, since Dynamik sets hover on the child elements, I can't seem to find the CSS to override this. I tried every permutation. It just doesn't work.

    How do I override Dynamik styles in these cases? Particularly the global ones like .entry-content h4. That sort of thing. There doesn't seem to be any settings in Dynamik for null values for styles. You are forced to choose a color for most text elements whether you want to or not. Is there a way to tell Dynamik NOT to style certain elements that I want to control in Beaver Builder?

    Thanks for any help.

  • #2
    Where do you put your CSS rules (position of style file is important) and what exactly did you try? I would think that if the CSS is specific enough Dynamik wouldn´t be able to overwrite it....

    There are rare cases though. Use forum search with search term "style trump" and you´ll find code to change the position of the Dynamik style sheet. Note that in this sample, the goal was to make Dynamik overwrite all other plugin styles, which is achieved with the priority in the code.

    You want the opposite so you´d have to play with that priority number. Can´t promise that this wouldn´t have other side-effects though. As far as I know, there´s no way to tell Dynamik to NOT style certain elements as there´s default CSS but I might be wrong. Please contact support staff if you want to make sure.


    • #3

      You have this for the border -

      .fl-module.calloutBdr:hover {
          border-top: 10px solid #fdc068;
          border-bottom: 20px solid #fdc068;
      try adding this for the other elements - the links

      .fl-module.calloutBdr:hover a {
      that should highlight the the title link and the text link when you hover the box anywhere .... is that what you wanted ?


      • #4
        Hi, Andy:

        That worked. I was trying to apply all of the hover styling using one rule. Once I broke it out into multiple rules targeting specific elements with each (I am using both bits of code delineated in your post), it worked. Thanks!