How to Add the LayerSlider Below the Website’s Header

jameshee · December 26, 2021, 3:21pm

Hello
I am using the Demo Gym template with LayerSlider.
May I know how to place the layerslider above the header?

James Hee

marc_a · December 26, 2021, 5:56pm

Hi James,

Thanks for reaching out!

To add a layer slider above or below the header, just go to the default WordPress editor page and scroll at the bottom part to see the Slider settings.

Hope that helps.

jameshee · December 27, 2021, 8:10am

Thank you for your prompt reply. Issued fixed. Excellent!

Can you also tell me how to enlarge the font size on the TOP BAR content? I cannot find any place to change the font size.

Thank you.

James Hee

tristup · December 27, 2021, 10:24am

Hi James,

Glad that we are able to help with this. To increase the font size of Topbar Content you need add the following custom CSS code into the Theme Options > CSS.

.p-info
{
    font-size:20px;
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

jameshee · December 29, 2021, 2:59pm

Hi

I am working with your demo template - GYM. without any other plugin other than what is recommended.
However, I still cannot solve the issue with the CSS CODE.

Also on the Portfolio replacing video from Youtube is not working. Is there a special way to go about doing it?

Thanks.

James Hee

tristup · December 29, 2021, 3:47pm

Hi James,

You may need to modify the CSS code to increase the font size, like the following.

.x-topbar .p-info
{
    font-size:20px !important;
}

Regarding the Portfolio, the issue you are describing can’t be replicated. I would suggest you please provide any video along with the login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

jameshee · December 30, 2021, 2:32am

Hi

You are superb. this new CODE works perfectly. May I also ask if there is any way to change the font color too?

I managed to get the youtube video to work on the Portfolio.
However, I lose the full page function and the sort function after changing the default custom url slug from classes to video.

Is there a way to get back the default style as like your demo page https://demo.theme.co/gym/video-classes/

I will provide the site id and password via your secure note.

Thank you

James Hee

jameshee · December 30, 2021, 2:37am

Portfolio link is https://newagesingapore.com/video/

ruenel · December 30, 2021, 6:45am

Hello @jameshee,

To change the color of the topbar content, you can go to Cornerstone > Theme Options > Links > Color because the active color of a link is the same color as the topbar content.

You cannot use video as your custom portfolio slug because at the moment, you also have a page entitled “Video”. You will need to go to Pages > All Pages and edit the title and slug of that pages making it into “Videos”.

Best Regards.

jameshee · December 30, 2021, 7:03am

Hello

Thank you for your prompt reply. PORTFOLIO issues solved. Thank you very much.

However unable to locate LINKS> Colour, please see the screenshot below.

James Hee

jameshee · December 30, 2021, 7:31am

Further to the above.

Once click on FILTER BY CATEGORY. All the videos will be filled onto the left. Please see ther link below.

https://newagesingapore.com/videos/

Please advise how these videos can be displayed as per our demo Theme.

Thank you

tristup · December 30, 2021, 10:57am

Hi James,

The Links color option can be found at Theme Options > Header > Links, and you need to change the interaction color. Please remember that will affect the color of menu items too. If you go through the Gym demo, the hover color is red and is adjusted with the background, but in your case, it is dark blue which is the reason behind your problem. Alternatively, you can try changing the background color of the Topbar from Theme Options > Stack.

Screenshot-2021-12-30-160813

Screenshot-2021-12-30-160713

And the issue you are having with the FILTER BY CATEGORY option is a known issue with the latest version of the theme and has already been reported to our issue tracker for further investigation by the development team.

Thanks

jameshee · December 30, 2021, 2:16pm

Hello

Thank you for your prompt reply. Excellent. I am now able to change the colour of the TopBar Background. However, I need the fonts to be white or other colors.

Can you please guide me to change the colour of the fonts on this Topbar?

Thank you.

James Hee

prakash_s · December 30, 2021, 3:35pm

Hello James,

You can use this custom CSS code to change the color of the top bar font.

For the Topbar content color.

.x-topbar .p-info {
color: #ffffff;
}

For the Topbar social icon color

.x-topbar .x-social-global a {
color: #ffffff;
}

Please feel free to change the color code as per your design. The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector or you subscribe to One where customization questions are answered.

Hope it helps.
Thanks

jameshee · December 31, 2021, 1:17am

Excellent it works fine now. Thank you so much.

Can you also provide me the CSS for the Bottom Bar to make the fonts bigger and change the color?

Thank you and wishing you guys in ThemeCo a SUPER HAPPY NEW YEAR.

ruenel · December 31, 2021, 4:21am

Hello @jameshee,

By default in the Ethos stack style, the footer font sizes were being styled using this code:

.x-colophon.bottom {
    font-size: 11px;
}

.x-colophon.bottom .x-social-global a {
    font-size: 18px;
}

Feel free to change the font size value and add the modified code in Cornerstone > Theme Options > CSS.

The code above serves as an example to accomplish what you are trying to achieve on your site. You will be the one to maintain this code to see to it that it will still works even when there are theme and plugin updates.

Best Regards.

jameshee · December 31, 2021, 4:39pm

Hi

I apply the following CSS

.x-colophon.bottom {
font-size: 25px;
}

.x-colophon.bottom {
color: #ffffff;
}

.x-colophon.bottom .x-social-global a {
font-size: 28px;
}

.x-colophon.bottom .x-social-global a {
color: #ffffff;
}

All work fine except the Links colour cannot be changed to white.

Do you what have went wrong?

James Hee

prakash_s · December 31, 2021, 7:27pm

Hello James,

I would suggest you replace this code with the given code below.

.x-colophon.bottom {
color: #ffffff;
}

For the Footer menu

footer.x-colophon.bottom .x-nav li a {
color: rgb(255 255 255);
}

For the Footer Menu separator

footer.x-colophon.bottom .x-nav li:after {
color: rgb(255 255 255);
}

For the Footer content

footer.x-colophon.bottom .x-colophon-content, footer.x-colophon.bottom .x-colophon-content a {
color: rgb(255 255 255);
}

Please feel free to change the color code as per your design. The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector or you subscribe to One where customization questions are answered.

Hope it helps.
Thanks

jameshee · January 2, 2022, 8:39am

Thank you. May I suggest that you included an easier way to make these changes in your future update, like your other demo theme.

May I know how to create a link for a section on a page? I tried using the below and not working?

https://newagesingapore.com/noni-juice/#section-4

Also, may I know if there is a way to make the slider bigger on the page. It appears very small on mobile phone.

https://newagesingapore.com/noni-juice/

Thank you.

James Hee

ruenel · January 3, 2022, 1:18am

Hello James,

If you upgrade to the Pro theme, it features a Footer builder which allows you to easily create a custom footer by simply editing the needed elements into the builder with the styling that does not need any coding. All the styling can be done within the Footer builder.

To create a link for a section on a page, simply edit your page and click the Section element. Find the “Customize” tab and set a unique “section-4” ID.

Kindly let us know how it goes.