So I just purchased the theme after realizing my old theme was not being updated anymore as they close their company.
I'm trying to reproduce the home page I had with my old theme by making a full screen slider with blog posts that I can chose (not the latest articles). But it seems there's no option to do that in the Customization space.
And I would also like to remove the white header and make it transparent to only have the menu above the slider as you can see in the attached screen shot.
So it works but it's not looking good and the photos are cut and I want them full and the slider to be full screen, which means from top to bottom, not just from left to right.
See again the 2 attached screen shots to see what I mean.
2/ The spacing of elements in single posts is fixed by default, so we don’t offer built-in options to modify it. However, you can override it using custom CSS. Here's an example for adjusting the featured image:
I just added the code but I still have a few issues. First, there's a thin line (the bottom line of the header I guess) that keeps appearing, is there a way to remove it so it only appears like there's no header when on the slider just like on the screenshot I attached ? And then, when I scroll down, the menu stays on top on the content (see attached screenshot). So is there a way to make it static on top on the homepage and make it white background (as original) when scrolling down the home page ? (see attached again).
Also, the slider is still not full screen (from top to bottom screen) with full images (as shown in previous attached screen shot).. is there a way to make it full screen without losing the size of the images ?
And finally, is it possible to put the menu centered just like on the screen shot I sent you before ?
Thank you so much !! It's almost there, now it looks exactly how I want for the slider and header ! :D. Just, now I have the menu not showing when I scroll down, it stays at the top without following the scroll down (maybe I had the wrong definition of "static" but what I meant is to keep the menu/white header as it is originally (with the white bar) when scrolling down, so no matter how far down people are going, they can still see the menu on top of the page, am I making any sense.. ? haha
And also, is there a way to make the menu really centered (as shown on the 1st attached screen shot) as now it is more on the left than centered, and with the search button on the far right of the header next to the social icons as shown on 2nd attached screenshot, because now it's in the middle between the menu and the social icons, it doesn't look right haha.
Thank you so much for your help !! Now it works great 🙌🙏
Could you also help me with my second question please ? About the menu being centered and the search button on the far right of the header, next to the social icons exactly like here:
1/ Oh okay.. so is there a way to put the search icon next to the menu ? Just next to "A propos".
2/ I already went to this setting to change the order of sliders but there is not the option I'm looking for which is to chose the posts I want to display. As I mentioned, I tried with the Post ID order but it doesn't change the order compared to the Post Date, so is there a way to add the posts IDs somewhere to chose the posts I want to display ?
The post ID is managed by WordPress and cannot be modified. We offer several ordering options, but if none of them fit your requirements, you might consider using the Order by Date option instead.
Oh.. you should consider to add it to theme's settings, it would be nice to have the option to chose which posts to put in the sliders. I had this in my old theme, with the option to add the post ID in the customization settings to chose which ones to display + the order we wanted.
Could you please help me with my first question on my previous reply.. ? Thank you for your time and help.
1/ You can create a slider using the Penci Block, then insert it via shortcode in Appearance → Customize → Featured Slider → General → Revolution Slider Shortcode.
For Google Fonts, you need to include the font URL by copying the code from https://fonts.google.com. For example, if your site doesn’t already load the Roboto font, you can include this code in your CSS:
Hi,
So I just purchased the theme after realizing my old theme was not being updated anymore as they close their company.
I'm trying to reproduce the home page I had with my old theme by making a full screen slider with blog posts that I can chose (not the latest articles). But it seems there's no option to do that in the Customization space.
And I would also like to remove the white header and make it transparent to only have the menu above the slider as you can see in the attached screen shot.
How can I do that ?
Thank you very much for your help 🙏
Attached files: Capture d’écran 2025-07-14 à 17.56.20.png
Hi,
Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:
.featuredsl-customizer { --pcctain: 100%; }Regards,
PenciDesign.
Hi,
Thank you for your reply and for your help.
So it works but it's not looking good and the photos are cut and I want them full and the slider to be full screen, which means from top to bottom, not just from left to right.
See again the 2 attached screen shots to see what I mean.
Plus, do you have any solution for the header.. ?
Thank you very much
Attached files: Capture d’écran 2025-07-16 à 14.41.42.png
Capture d’écran 2025-07-16 à 14.41.50.png
I also have an other question: how to change the size of the spaces between items in single posts (between titles, line spaces, photos etc..) ?
Thank you 🙏
Hi,
1/ If you want the main header content to overlap the featured slider, please go to Appearance → Customize → Custom CSS, and add the following code:
body.home .penci-header-wrap { position: fixed; top: 0; left: 0; right: 0; } body.home .penci-header-wrap #navigation { background: transparent; border-color: rgba(255,255,255,0.1); } body.home .penci-header-wrap #navigation .menu > li > a { color: #fff; }2/ The spacing of elements in single posts is fixed by default, so we don’t offer built-in options to modify it. However, you can override it using custom CSS. Here's an example for adjusting the featured image:
.container-single .post-image { margin-top: 30px; margin-bottom: 30px; }Regards,
PenciDesign.
Thank you very much for your help !
I just added the code but I still have a few issues. First, there's a thin line (the bottom line of the header I guess) that keeps appearing, is there a way to remove it so it only appears like there's no header when on the slider just like on the screenshot I attached ? And then, when I scroll down, the menu stays on top on the content (see attached screenshot). So is there a way to make it static on top on the homepage and make it white background (as original) when scrolling down the home page ? (see attached again).
Also, the slider is still not full screen (from top to bottom screen) with full images (as shown in previous attached screen shot).. is there a way to make it full screen without losing the size of the images ?
And finally, is it possible to put the menu centered just like on the screen shot I sent you before ?
Thank you again for your help ! 🙏
Attached files: issue with header.png
white header when scrolling down.png
Hi,
Here is the update CSS code:
body.home .penci-header-wrap { position: absolute; top: 0; left: 0; right: 0; } body.home .is-sticky { display: none; } body.home .penci-header-wrap #navigation { background: transparent; border-color: transparent; } body.home .penci-header-wrap #navigation .container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } body.home .penci-header-wrap #navigation .container > * { margin-left: 0; margin-right: 0; } body.home .main-nav-social a, body.home .penci-header-wrap #navigation .container > * > a { color: #fff; } body.home .penci-header-wrap #navigation .menu > li > a { color: #fff; } body.home .penci-owl-featured-area .penci-image-holder { min-height: calc(100vh + 60px); } body.home #navigation-sticky-wrapper { }Regards,
PenciDesign.
Thank you so much !! It's almost there, now it looks exactly how I want for the slider and header ! :D. Just, now I have the menu not showing when I scroll down, it stays at the top without following the scroll down (maybe I had the wrong definition of "static" but what I meant is to keep the menu/white header as it is originally (with the white bar) when scrolling down, so no matter how far down people are going, they can still see the menu on top of the page, am I making any sense.. ? haha
And also, is there a way to make the menu really centered (as shown on the 1st attached screen shot) as now it is more on the left than centered, and with the search button on the far right of the header next to the social icons as shown on 2nd attached screenshot, because now it's in the middle between the menu and the social icons, it doesn't look right haha.
Thank you again for your help ! 🙏
Oups, forgot the attached files, here you go :)
Attached files: 2.png
1.png
Hi,
Here is the update CSS code:
body.home .penci-header-wrap { position: absolute; top: 0; left: 0; right: 0; } body.home .is-sticky { display: block; } body.home .penci-header-wrap .is-sticky #navigation { background: #fff; } body.home .penci-header-wrap .sticky-wrapper:not(.is-sticky) #navigation { background: transparent; border-color: transparent; } body.home .penci-header-wrap #navigation .container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } body.home .penci-header-wrap #navigation .container > * { margin-left: 0; margin-right: 0; } body.home .penci-header-wrap #navigation .main-nav-social a, body.home .penci-header-wrap #navigation .container > * > a, body.home .penci-header-wrap #navigation .menu > li > a { color: #fff; } body.home .penci-header-wrap .is-sticky #navigation .main-nav-social a, body.home .penci-header-wrap .is-sticky #navigation .container > * > a, body.home .penci-header-wrap .is-sticky #navigation .menu > li > a { color: #000; } body.home .penci-owl-featured-area .penci-image-holder { min-height: calc(100vh + 60px); }Regards,
PenciDesign.
Thank you so much for your help !! Now it works great 🙌🙏
Could you also help me with my second question please ? About the menu being centered and the search button on the far right of the header, next to the social icons exactly like here:
Attached files: 2.png
Also, I have an other question: how to change the featured posts order in the sliders ?
I tried to select "Order by post ID" in Cutomization but where do I add these posts ID to chose which post to display and the order I want ?
Thank you
Hi,
1/ If you want to display the search icon, the menu cannot be center-aligned as you prefer.
2/ Please go to Appearance → Customize → Featured Slider → General → Order By on Featured Slider, and change the order using that option.
Regards,
PenciDesign.
Thank you for your reply,
1/ Oh okay.. so is there a way to put the search icon next to the menu ? Just next to "A propos".
2/ I already went to this setting to change the order of sliders but there is not the option I'm looking for which is to chose the posts I want to display. As I mentioned, I tried with the Post ID order but it doesn't change the order compared to the Post Date, so is there a way to add the posts IDs somewhere to chose the posts I want to display ?
Thank you
Hi,
The post ID is managed by WordPress and cannot be modified. We offer several ordering options, but if none of them fit your requirements, you might consider using the Order by Date option instead.
Regards,
PenciDesign.
Oh.. you should consider to add it to theme's settings, it would be nice to have the option to chose which posts to put in the sliders. I had this in my old theme, with the option to add the post ID in the customization settings to chose which ones to display + the order we wanted.
Could you please help me with my first question on my previous reply.. ? Thank you for your time and help.
Hi,
1/ You can manually select the posts by creating a page using the Elementor page builder.
2/ Unfortunately, the CSS solution doesn’t meet your requirements. In this case, you may consider building the header layout using the Penci Header Builder, which might better suit your needs: https://soledad.pencidesign.net/soledad-document/#header-footer-builder
Regards,
PenciDesign.
Hi,
1/ Thank you, I will try. Do I have to create the full homepage or can I just do a slider and add directly to my homepage in the customization tab?
2/ Same question here, can I build it in Penci Header Builder and then add it directly to my homepage or do I have to recreate my full homepage.. ?
Also I have an other question, is there a way to change the font of the featured boxes ? I can't find it anywhere..
Thank you for your precious help !
Hi,
1/ You can create a slider using the Penci Block, then insert it via shortcode in Appearance → Customize → Featured Slider → General → Revolution Slider Shortcode.
2/ You can create a header layout using the Penci Header Builder, then assign it to the homepage via Appearance → Customize → Logo & Header → Header Builder → Header Builder for Homepage. Here is a document: https://soledad.pencidesign.net/soledad-document/#header-footer-builder
3/ Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:
ul.homepage-featured-boxes { --pchead-font: 'Roboto'; }Replace Roboto with the font family name you want to use.
Regards,
PenciDesign.
Okay I will try like that. Thank you so much for your help 🙏
3/ I tried to write font names that I like but they don't show, do I have to add only fonts already inside the theme ?
Hi,
For Google Fonts, you need to include the font URL by copying the code from https://fonts.google.com.
For example, if your site doesn’t already load the Roboto font, you can include this code in your CSS:
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');Here is the full code:
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'); ul.homepage-featured-boxes { --pchead-font: 'Roboto'; }Regards,
PenciDesign.