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:
I have an other question. I'm trying to change the colors of my search and social icons on my main homepage header and put them in white just like the menu. But I want to keep them black on my sticky header (because the background is white so I cannot have them white of course). The problem is, when I change the color to white for the main header, it also changes it on the sticky one when the settings are obviously different as it is two different headers. (Why can I change the colors of the menu and have it white for the main header and black for the sticky, but not for the search and social icons..?)
Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:
.main-builder-header .pc-builder-element.penci-top-search .search-click,
.main-builder-header .penci-builder-element.desktop-social .inner-header-social a,
.main-builder-header .penci-builder-element.desktop-social .inner-header-social a i {
color:#fff;
}
Is there a way to add a code line to remove the white color for the general header in posts and pages as now they are white on white background on this specific header as you can see on the attached file.
I'm sorry I think you got confused with my explanation.
What I meant is that on the top right of my normal header on posts/pages, the social icons don't appear anymore because they are white color on white background, from the first setting I asked you to change (putting them in white on the main header of homepage, but the settings change the colors to white for all headers). So I was asking if there was a possibility to make them black again on this specific main header on pages/posts to see them again.
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.
Hi,
Sorry for late reply, I only now take the time to fix these issues.
Thank you for your help.
So I added the CSS code with my font and it's working good. But is there a way to space the letters between them as in the screenshot attached ?
Thank you again for your help !
Attached files: 1.png
Hi,
Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:
ul.homepage-featured-boxes .penci-fea-in h4 > span { letter-spacing: 0.15em }Regards,
PenciDesign.
Thank you for your help !
I have an other question. I'm trying to change the colors of my search and social icons on my main homepage header and put them in white just like the menu. But I want to keep them black on my sticky header (because the background is white so I cannot have them white of course). The problem is, when I change the color to white for the main header, it also changes it on the sticky one when the settings are obviously different as it is two different headers. (Why can I change the colors of the menu and have it white for the main header and black for the sticky, but not for the search and social icons..?)
Thank you.
Hi,
Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:
.main-builder-header .pc-builder-element.penci-top-search .search-click, .main-builder-header .penci-builder-element.desktop-social .inner-header-social a, .main-builder-header .penci-builder-element.desktop-social .inner-header-social a i { color:#fff; }Regards,
PenciDesign.
Great, thank you so much !!
Is there a way to add a code line to remove the white color for the general header in posts and pages as now they are white on white background on this specific header as you can see on the attached file.
Thank you,
Attached files: Capture d’écran 2025-10-25 à 17.46.28.png
Hi,
Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:
body:not(.home) { --pchd-mg: 0; }Regards,
PenciDesign.
Thank you very much, but it doesn't seem to work.. They are still white on the main header on pages/posts :/
Hi,
I’ve checked your site, and the white space between the header and the main content has been removed. Please clear your browser cache and check again.
Regards,
PenciDesign.
I'm sorry I think you got confused with my explanation.
What I meant is that on the top right of my normal header on posts/pages, the social icons don't appear anymore because they are white color on white background, from the first setting I asked you to change (putting them in white on the main header of homepage, but the settings change the colors to white for all headers). So I was asking if there was a possibility to make them black again on this specific main header on pages/posts to see them again.
Thank you
Hi,
Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:
body:not(.home) .main-builder-header .pc-builder-element.penci-top-search .search-click, body:not(.home) .main-builder-header .penci-builder-element.desktop-social .inner-header-social a, body:not(.home) .main-builder-header .penci-builder-element.desktop-social .inner-header-social a i { color: #000; }Regards,
PenciDesign.
Awesome, now everything's perfect, thank you so much !! 🙏
Hi,
Thank you!
If you’re satisfied with our support, could you take a moment to rate us on ThemeForest? Your feedback means a lot to us.
If you have any other questions, please feel free to let me know.
Regards,
PenciDesign.