Custom Style for Web

1

Hi -

I’m pretty new on frappe / erpnext. I’m wondering how to define a theme, particularly carousel in full width as seen on this website: http://www.hcapita.com/home.

I’ve seen a lot of post about similar situations, but not clear how to steep by steep define a custom style.

Regards,

2

@iramireze, Welcome to ERPNext…
You can manage this by adding Web Pages and Website Settings. Also define styles of webpage through Website Theme.
Refer following links -
https://frappe.github.io/erpnext/user/manual/en/website/web-page.html
https://frappe.github.io/erpnext/user/manual/en/website/setup/website-settings.html

Regards,
Priya Shitole
New Indictrans Technologies Pvt.Ltd.

3

Dear Priya -

Thank you for your quick and kindly response.

I’m looking for a “code” to have a full width slideshow on my website. Can you help me with that?

Regards,

4

Hey,

the problem is, that the carousel container is a child of the webpage-content container, which defines the boundaries. If you don’t want to change the sources, there is a css hack to break out of the container. You can achieve this by specifying custom css on the specific webpage and overriding the carousel class similar to this:

.carousel {
margin:0 -100%; /* old browsers fallback */
margin:0 calc(50% - 50vw);
background-color:rgba(255,0,255,0.5)
}

source: html - Break element out of container - Stack Overflow

2 Likes