Custom CSS with new platform

RiyazAhamed

I was trying to run custom CSS snippets seen in this forum with the new platform, and found that some of them do not run. Almost half of the CSS code which was running perfectly with Foodomaa Ver 3.5 or older does not run with the new Foodomaa hosted service platform. This may be because of the changes made in the CSS components used with the new platform. I expect other users that are moved to the new platform would have also noticed this issue.

I wish there should be a new thread that can be used to update with custom CSS that are completely compatible with the new platform. Also, all existing custom CSS threads that are not compatible with the new platform have to be marked as 'valid for deprecated versions'.

expecting the community's opinion.

Saurabh

RiyazAhamed

Yes, because the structure and class names have changed in the new platform.
But the new platform provided a much better hold of CSS classes. So it becomes easier to customize with custom CSS code.

Also, whenever we get some suggestions from the community on "how to do this with custom CSS" we check if that's possible, if not, we add the custom CSS class name to that particular block so that it can be customized easily.

RiyazAhamed

Saurabh

It would be better if you publish a CSS reference document for this, especially when the custom CSS is encouraged to be used.

Saurabh

RiyazAhamed what do you mean by CSS reference document?

RiyazAhamed

Saurabh
I mean a reference document for helping developers to know the structures and classnames used, without inspecting the code in browser.

Abiz009

how to change this Order, complete, etc button colour?
Css please @Saurabh

Abiz009

Abiz009 @Saurabh please send this css Code

Saurabh

RiyazAhamed thousands of class names, it's not possible do document it. Cannot be done.

The best way is to inspect the element and customise it.
It's easier and faster to do it by inspecting elements and changing the css on the css tab and copy/paste the changed code.

Saurabh

Abiz009

.badge-color-1 {
    color: #fff !important;
    background-color: #000 !important;
}

Class names are:
badge-color-1, badge-color-2, badge-color-3........till badge-color-11

GinniBazaar

Please css code zone hide. User use gps

Roger

@Saurabh Can we write a simple custom message below the COD section in the customer app for payment-related information using CSS?

Saurabh

Roger You can fully customize the Checkout page (Payment selection page) with Custom HTML or CSS

Goto Admin Dashboard > Settings > All Settings > Translations > Edit
Then find "Checkout custom message on idle"

Message written in this section will be shown at the bottom of the checkout page (after all the payment methods are listed)
If you have only COD payment option, this message will appear just below COD method.

Abiz009

@Saurabh Sir kindly Add "Add Item options in Store owner app" It will be very helpful