CHange of all classes WHAT!?

Seriously guys!! you have to mention in change logs when you change class names of soursly everything. All my customization to this is now a mess.

Everything that was .hm1.x-bar is not e3948483746234 this make me nearly throw the computer into the wall. Guys you HAVE to mention this. I will send my CSS file yo you and expect you to convert it to new format. Why even change class-names.

This is only one of them. I will send the other one once this one is done. Do not share my CSS file public share it in a secure note.

Send it by email attached in secure note

I’m also trying to change a class in the new format due to the fact that we have more items in the navigation and I would like to edit it in global css. The changes does not affect frontend. And yes we know how to flush cache etc.

For smaller laptops like 1280x800 we need to have following setup to align the navigation:

.e3418-5.x-image {
    width: 300px;
    max-width: 300px;
}

.e3418-3.x-menu > li > .x-anchor .x-anchor-content, .e3418-7.x-menu > li > .x-anchor .x-anchor-content {
    padding: 0.5em 0.5em 0.5em 0.5em;
}
.e3418-4.x-bar-container {
    max-width: 300px;
}

Solve it but you have created unique classes for each header (stupid) since you want them to be named the same if it’s the same element. I can edit it in global but I need to do it for every single header which is a mess. You really messed up things with the new update. Ask the community that are a bit more technical than normal users before releasing such things!

Hey @bracas,

We’re very sorry for the issue you have experienced. When suggesting code, all of support staff should have notified or warned users that using dynamic classes such as hm1 would only work for the current setup. Adding an element to a page would actually change that class because it is dynamic. Namespacing might also be changed internally by the development team for development improvement reasons.

Dynamic classes were not designed to be used for custom CSS. They are for the builder’s internal use for styling elements. The builder now has an Element CSS feature so you could add styles to each element regardless of page updates. You can also assign a class to your element and target the class which was supposed to be recommended before the Element CSS was not yet added.

If you’ll be assigning a class to your image which currently has a dynamic class of .e3418-5, just assign a class to it and use the class instead of the dynamic class like .e3418-5.x-image to .my-class.x-image. The same is true with headers and footers. Change .fm5.x-menu with your class .my-class.x-menu

Thank you and again, sorry for the inconvenience.

That have never been informed and that you changed it in the update have never been communicated only that it will be possible and content about it. Not that you´re going to change all existing NO.

When you have a different header per page to have boxed design and header with a header image for each page I would not like to go into all of them and add class or change manually. You would like to change this at one place which I previously easily could. This is a huge issue and you need to cater for this in your support so I suggest you grab a cup of coffee and make sure our navigation is converted to new format. Now the navbar for example is it’s totally wrong on Ipad and iphone according to we customized in global CSS to make it work good for the users on all pages.

We have styling on previous hm1. classes on a lot of pages. It’s a hassle to add unique classes when I don’t know which bar or class it previously was. That is not an option done by us inhouse. But it’s a lot of dev time from us inhouse that is now fucked. And no we won’t roll back you have to solve this for us. And as a lesson you should write in changelogs if this changes and don’y say your colleagues have customized code to help out once in a while with this classes so you are shooting yourself in your foot by saying this should never ever have been used.

I would like to have an converted version by latest tomorrow, guys thanks.

Hi there,

The updates are released so users could try and test them, but it’s not mandatory to update any live site. It’s never recommended to do that. In any web of software development, it’s only normal to test the update and do the maintenance in a separate clone of your site (staging). It’s a common mistake of most users when they hurriedly jump to update without testing it. Users still can use their own current versions.

And the classes are changed because of the new way of implementing CSS, example, you can inspect your section row and simply add this to its CSS

$el.x-bar-container {
    max-width: 300px;
}

or apply this to your Image’s element CSS

$el.x-image {
    width: 300px;
    max-width: 300px;
}

That way, you don’t have to define a class name, the $el will automatically switch to the correct class name of that current element. Unfortunately, we can’t do the CSS conversion here, but you may restore your site to previous copy and have the CSS changed on a staging site.

Thanks!

This Is the type of thing I’ve grow to expect from X theme. I had been with them from the beginning. At one point I had to completely rebuild 27 sites due to changes like this.

X theme only cares about new sales. They refuse to support existing customers or even take them into consideration.

After rebuilding some sites three or four times I finally bit the bullet and rebuilt everything once again just about a year ago using all new plugins and themes. Since then, I’ve not run into anything g like this again.

Run away! Run away fast!

I have 27 bused x theme licenses now.

Hi there,

We are sorry to hear you are not satisfied with our product. As you are one if the old customer you may already know that we had a long run here and we always tried to keep with latest technologies but we always cared about the backward compatibility.

It is true for example if you use the X theme version 4.6.4 now you will have lots of problems to update to version 6.0.4. As it is many versions behind. If you check our changelog for each release we give detailed information on how to update and what effects the update may have. That is why my recommendation is to always keep with the updates by updating the theme to the staging website and make sure that everything is working and keep checking this link:

https://theme.co/changelog/

I am not familiar with the case that you mentioned but I can talk about this thread case. The problem with this thread is that the customization should not be done using the auto-generated classes in the first place. Not the .hm3 old series and not the .e3418-4 new series are safe. Even if in the new version you change the order of the elements the generated class will change. Those classes are for internal use and you should not use for the customization.

Each section or element in our theme has an option to add a class to you. So for example in the Text Element, you can click on the Customize tab and you will see the class option:

Also, please consider that whenever we introduce new elements or feature such as the V2 elements we add necessary articles in our Knowledge Base to be as clear as possible. For example in this particular class based question we added the article below regarding V2 elements:

And finally as my colleague mentioned, the Element CSS can be the ultimate solution for your customization as it will give the ability to export the whole thing as a template block and use it anywhere you want without losing your custom CSS.

I hope I could communicate correctly with this situation. If you need a specific help on your case I suggest that you open up a new thread and rest assured that we are here to help and we will do our best to serve you as you deserve.

Thank you.

I do know that is web standard and how you should do. But I read changelog and you never mentioned that you will change existing classes that’s what piss me of as a customer. Staging fucked up more before which we decided to update themes and plugins 1 month after release when bugs is fixed etc.

Does below code example mean I could change previous let’s say hm2.x-bar-container to $el.x-bar-container then I can simply convert everything and that would be good. And for the future I’ve learned to always use customized classes.

Let me know and I will have a look at the converting part today or tomorrow.

The issue is that it’s a hassle to even find what this custom code was for and back track everything. If you would be smart devs you would have written a code that add_old path to customized class if empty. By that and inform every customizer… by that this issue would never ever be an issue. It’s all about thinking outside the box guys.

Hi there,

Thank you for your feedback. We certainly inform our development team regarding the idea you gave about the back tracking.

At this point, you will need to follow the suggestions I gave regarding the Custom Class or the Element CSS to redo your customization. I totally understand that this will be a cumbersome task to do. We would give you alternatives regarding this if there was one for sure, but unfortunately you will need to complete this one time task and move from auto-generated classes to the method I already mentioned.

Thank you for your understanding.

Far away from optimal but have nothing else to do digging into the code as we speak. But one thing I can’t add class to is a content block which is nto in the header builder os very hard to give it a class. See the print in secure note. I need to control that block but can’t give it a class. Tried to add class to everything but there is not even a content block inside.

Hi there,

The section that you are talking about is an auto-generated markup. You can simply add the unique class to the containing bar. It seems you already added a class called bar1 to that bar. So you can easily add CSS to that tag in question like this:

.bar1 > .x-bar-content {
/* Your CSS code */
}

The > in CSS means the immediate one level child of the parent tag. It will not go deeper for other child elements. For more information: https://www.w3schools.com/css/css_combinators.asp

Thank you.

Thanks!

How do I target the other part of the bar. See secure note:.

I would like to target a specific image could you provide me with code to only rotate following image in CTA and not other images.

Hey There,

How do I target the other part of the bar.

  • You mean the contents of the bar, please collapse the bar element in your developer tools and find the necessary class that you can use for your custom css. One good example if the code in the next line.

I would like to target a specific image could you provide me with code to only rotate following image in CTA and not other images.

  • You will use the custom class or added added to the CTA element. In your case, please use this:
.bc-navbar-cta .x-graphic-image {
  transform: rotate(25deg);
}

We would loved to know if this has work for you. Thank you.

Thanks! But I do still not manage to target the .x-bar-space to lower the height on tablet and mobile.

NVM managed to fix it.

Glad it’s okay now, cheers!

I can tell you that adding custom classes for all elements is not fun. I won’t give you a good rating for the update for sure not sorry guys but you never thought outside the box.

Can you be nice and tell me why the navigation on mobile bounce and isn’t smooth when you scroll down. Check on a real device but simulation in chrome show the same if you do not have an mobile at thand.