Sharing some custom CSS possibilities

Saurabh

Hey guys, I was just playing around to customize the layout with CSS.
This is just to show the customizability of Foodomaa ✌

Feel free to customize the code to your needs. 🎉 AND use at your own will/risk 😅

P.S no this is not coming in any update, I am just sharing this so that some of you may get some ideas on how to use custom CSS for customizations.

Here's the current Item Page:

Here's the modified one with some Custom CSS.

CSS Code:

.Collapsible__contentOuter {
	direction: rtl;
}
.Collapsible__contentOuter .category-list-item {
	margin-bottom: 3rem !important;
}
.Collapsible__contentOuter .item-actions.pull-right.pb-0 {
	float: left !important;
	position: fixed;
	top: 68px;
	right: 6px;
}
.Collapsible__contentOuter .category-list-item .flex-item-image {
	width: 110px;
	border-radius: 0.375rem;
}
.Collapsible__contentOuter .category-list-item .btn-group.btn-group-sm {
	box-shadow: 0px 2px 8px 0px #e0e0e0;
	direction: ltr !important;
}
.Collapsible__contentOuter .category-list-item .customizable-item-text {
	display: none !important;
}
.Collapsible__contentOuter .category-list-item .flex-item-name {
	direction: ltr;
}
.Collapsible__contentOuter .category-list-item .flex-item-name .item-name {
	font-weight: 600;
	font-size: 1.1rem;
}
.Collapsible__contentOuter .category-list-item .flex-item-name .item-price > span {
    font-size: 1rem;
}
.Collapsible__contentOuter .category-list-item .item-badge {
	border-radius: 0 !important;
}
.Collapsible__contentOuter .category-list-item .quantity-badge-list {
	left: -110px;
	border-radius: 0;
	line-height: 16px;
	font-size: 10px;
	font-weight: 600;
}
.Collapsible__contentOuter .category-list-item > div a {
	font-weight: 600;
	color: #000;
}

Edit: The +/- Icons are breaking when the item image is missing. If anyone is able to solve this with just custom CSS, kindly share it so it would help others.
(It can be done with the new :has() selector of CSS, but sadly browsers do not support it yet.)

Note:

If you can find great design ideas from any popular websites, share the website URL or screenshots, I will try to recreate them with custom CSS and custom HTML blocks.
I am trying to make this a daily routine to share these types of codes 😊😊

[deleted]

Saurabh 💓 woweeee!!

NikhilJain

Saurabh amazing ❤️

PratikArora

Saurabh Noicee

surya90

Saurabh finally, with this, the image can be to the left, hehe

many thanks and awesome

send us link where we can share u some tips for kind of sharing like this css

let us keep u motivating for more contributing.. hehe

Ram

Very nice 👍

Saurabh

surya90 You can share all the links here itself. I will review and build them (with some special touch) and create posts if interesting.

JosueMolina

EatiKo.com icons footter

Saurabh

JosueMolina that's not at all appealing to the eyes.
And when I said share reference from other websites, I mean other big brands not the one who are already using Foodomaa.

abgaadelivery

Saurabh

is it possible to add delivery time apprx like this,
Link here

Saurabh

This post is for CSS design ideas.

The image you shared looks awesome, but thing that you have marked and asking for is not CSS thing.

LioniEspumoni

Hello, why the web front page of foodomaa is on a smartphone shape. I think that is better a full web site style like

Saurabh

[deleted]

LioniEspumoni Hey man... Can you do one thing? Can you check your traffic devices on google analytics? Maybe this will automatically answer your question... 😃

josan420

I have css for menu categories title. This css highlight the categories title with color chaging wave.

If someone is interested:

☝️From this to this 👇

/*menu category title change*/ .Collapsible__trigger { height: 60px; display: block; text-decoration: none; position: relative; padding: 1.5rem 1rem; background: #f8f9fa; color: #5b5b5b; margin-bottom: 0.5rem; font-weight: 400; white-space: pre-wrap; font-size: 1.75rem; border-radius: 20px; margin-left: 2%; margin-right: 2%; margin-top: 2%; background: -o-linear-gradient( 135deg, rgba(9 230 152), rgba(252, 252, 252), rgba(9 230 152), rgba(252, 252, 252) ); background: linear-gradient( -45deg, #ffe1f9, #fff6d6, #def9ff, #ffe5e5 ); background-size: 500% 500%; -webkit-animation: Gradient 10s ease infinite; animation: Gradient 10s cubic-bezier(0.47, 0, 0.75, 0.72) infinite; line-height: 1; }

PratikArora

josan420 How to change the color of Menu ?

WelintondaSilva

josan420 Would there be any CS to customize mine by changing the background color and rounding the fields as you did in this one?

WelintondaSilva

josan420 Would there be any CS to customize these rectangles with rounded edges?

josan420

PratikArora currently its Gradient wave that automatically changes color.

WelintondaSilva

@Saurabh
Is it possible to create a css with the message that the customer has reached the add-on or additional limit?

josan420

WelintondaSilva css is just style. not possible to do anything else

ClashTeam

could put a gray background instead of that frame

alabtechnosoft

@Saurabh brother, can we make the home page design like this which is more attractive also have offer on home page itself.

Saurabh

alabtechnosoft custom html block for restaurant list is already in doing list on roadmap.

With that you will be able to add custom html blocks below the restaurant description (similar to the screenshot you have shared)