Parallax widget "top bottom right left mode"

Shapely
1

Hi,

  1. How do i customize background color, font, font-size and font-color for body text/title? Or make it show the same font, size, color as "parallax full/small mode?
  2. At the moment its showing same size as “parallax small mode”, how to make it the same size as “parallax full mode”?
  3. Is it possible to make the corners of the whole widget rounded?

Thanks!

Regards

2

Hi @shakeel,

I hope you are well today and thank you for your questions.

1. How do i customize background color, font, font-size and font-color for body text/title? Or make it show the same font, size, color as “parallax full/small mode?

You have to develop custom CSS code to achieve this and then add that code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other

2. At the moment its showing same size as “parallax small mode”, how to make it the same size as “parallax full mode”?

I am not sure what you meant by this so please describe it a bit more in detail.

3. Is it possible to make the corners of the whole widget rounded?

Yes we can make it by developing custom CSS code. Do you want to make corners of the home pahe widgets rounded?

Best Regards,
Movin

3

Hello Movin,

Thank you for your reply.

  1. I managed to sort most of it out with the following CSS code i found in the forums. It still doesnt change size and font of title. I guess i need to exchange “bg-secondary” in the code to something else, could you please tell what to write instead.

#shapely_home_parallax-2 .bg-secondary {
background: #ffffff;
color: #222e7f;
font-size: 22px;
font-family: “Open Sans”, “Helvetica Neue”, Helvetica, Arial, sans-serif ;
}

  1. I mean the height of the widget when i choose left or right mode. I just tried out same code as above and added “height” and “margin-top” and it works fine :slight_smile:

#shapely_home_parallax-2 .bg-secondary {
height: 700px;
margin-top: 50px;
}

  1. Yes, rounded corners on the widgets on home page and rounded corners of menu in all pages.

Thank you for your support!

Regards

4

Hi - please could you share the CSS code with me that allows me to change the font size of the body font :slight_smile:

Thanks a lot
Chris

5
1. I managed to sort most of it out with the following CSS code i found in the forums. It still doesnt change size and font of title. I guess i need to exchange “bg-secondary” in the code to something else, could you please tell what to write instead.

Could you please share me your site URL where it’s happening so that i can troubleshoot it?

3. Yes, rounded corners on the widgets on home page and rounded corners of menu in all pages.

After sharing your site URL i will help you to achieve it by developing custom CSS code.

6

Hi Chris,

To help us keep support thread separates could you please create your own thread for your question here https://colorlibsupport.com/c/shapely/ instead of replying on others thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.

Thanks,
Movin

7

Hello Movin,

Great thank you! Appreciate it a lot.

My url is www.miltonbaby.se

Regards

8
1. I managed to sort most of it out with the following CSS code i found in the forums. It still doesnt change size and font of title. I guess i need to exchange “bg-secondary” in the code to something else, could you please tell what to write instead.

Please share screenshot of title that you are referring.

3. Yes, rounded corners on the widgets on home page and rounded corners of menu in all pages.

Use below CSS code to make widgets rounded corner and i am not sure how you want menu rounded corner so please share screenshot of it.


body.home #main .col-md-12 > div {
    border-radius: 10%;
    overflow: hidden;
}
9

Hi Movin,

Please share screenshot of title that you are referring.
I managed to sort the title out going through this forum.
Use below CSS code to make widgets rounded corner and i am not sure how you want menu rounded corner so please share screenshot of it.

body.home #main .col-md-12 > div {
border-radius: 10%;
overflow: hidden;
}

Works perfectly as always.
Though, only sections not in “parralax mode” got rounded corners. Any possibility to also make the parralax sections rounded?

Thanks you for your support!
Have a great weekend!

Regards

10

Regarding menu, attached you will find a screenshot of what i mean.

Regards

11

Forgot to attach :slight_smile:

12

Some widgets don’t have rounded corners because they same white background color as your website body color there the rounded corners are not displaying.

To apply some color on these widgets so that rounded corners will be displayed please try using the below CSS code instead of above shared.

body.home #main .col-md-12 > div {
    border-radius: 10%;
    overflow: hidden;
    background: #d1edf2;
}

We have to also apply the background color to menu to make its corners rounded by using the below CSS code.

body nav#site-navigation {
    background: #fff;
    border-radius: 0 0 40px 40px;
}
13
Some widgets don’t have rounded corners because they same white background color as your website body color there the rounded corners are not displaying.

To apply some color on these widgets so that rounded corners will be displayed please try using the below CSS code instead of above shared.

Yes, that make sense. I will try this. Thanks.

We have to also apply the background color to menu to make its corners rounded by using the below CSS code.

body nav#site-navigation {
background: #fff;
border-radius: 0 0 40px 40px;
}

This works fine. The menu is just the way i wanted. But when i enter this CSS code the menu is not half-transparent when i scroll down. I am using the CSS code below to make the menu half-transparent, which you suggested in another thread.

nav#site-navigation {
background: rgba(255, 255, 255, 0.5);
}

Do i need to change this code or could you suggest another one?

Thank you!

Regards

14

Try using the below CSS code to make the menu half transparent on scroll down.


nav#site-navigation.scrolled {
background: rgba(255, 255, 255, 0.5);
}
15

Hi Movin,

Thank you! Works fine as always :slight_smile:

Regards

16

You are most welcome here :slight_smile: