Andy

[Andy]

PS some other advantages of adding a Cover block to the “Homepage Slider/Hero Section” widget area is that you can adjust the height of the Cover block in the block settings, and you can use a video as the Cover background if you prefer a video to an image background, and if you add more than 1 Cover block they will automatically be displayed as a slider.

[Andy]

The overlap setting has no affect on other pages. It is only applicable to the homepage as this is the only page with the featured services section.

The hompepage has a widget area named “Homepage Slider/Hero Section”.
If you add content (e.g. a Cover block) to this widget area it will override the large header/image/title area of the homepage only.
If you leave this widget area empty it will default to the site-wide large header/image/title area that is displayed on all other pages.

To make this upper area (the large header/image/title area) smaller, you can add this custom CSS at ‘Appearance’ > ‘Customize’ > ‘Additional CSS’:

.entry-header.with-image,
.archive-header.with-image {
  min-height: 20rem;
}

The standard minimum height is 30rem so this code will reduce it to 20rem (approx 320px).
You can use px values instead of rem if you want, for example:

.entry-header.with-image,
.archive-header.with-image {
  min-height: 300px;
}

If you do reduce the height of this area and keep the homepage featured services overlap at 180, then the featured services will overlap the title even more, so if you want to keep a large overlap of the featured services on the homepage, I would recommend adding your own Cover block to the “Homepage Slider/Hero Section” widget area at ‘Appearance’ > ‘Widgets’.

[Andy]

I’m guessing you are referring to the homepage as you mention the featured services being shown too high on the page.

The amount that the featured services overlap with the the large header image area can be changed at ‘Appearance’ > ‘Customize’ > ‘Homepage Settings’ > ‘Featured Services’. Here you will see the ‘Overlap’ setting which is at 180 by default.
Change this to a lower number and it will reduce how much the featured services section is overlapping the large header image area.

[Andy]

Hi solveforce, I can see that you have decided to continue this support query via email, so I’ll go ahead and mark this as resolved and close this topic to new replies.

PS for anyone reading this, the Gravity Forms plugin appears to be the cause of the customizer 404 error.

[Andy]

Do you have an example I can take a look at?

When I view your website, the header text appears to be 30px so I’m not 100% sure which text you want to modify.

There will always be some compromise when using a background image on both desktop and mobile, as the screen/window size ratio are so different.
It may be that if we can adjust the text size to be more suitable, this will help with the background image size, as with smaller text on mobile the background image won’t need to cover the same height of area.

[Andy]

The “Featured Services” should be enabled by default on the homepage.

This can be found in the customizer at ‘Appearance’ > ‘Customize’ > ‘Homepage Settings’.

In the “Homepage Sections” sub-section, you will see options to toggle on/off the homepage sections, as well as the option to drag-drop the different sections into any order you want.
Make sure the “Featured Services” option is checked, and by default your 4 latest posts will be displayed.
You can optionally select a page to use for each of the featured service boxes.
In the “Featured Services” sub-section, check the “Select Pages” option, and then for each of the featured services, you can select one of your pages. The box will then display the page title and excerpt of the selected page, and will link through to that page.
You can also change the icon in the circular box for each of the featured services. There are more than 2000 icons to choose from, and you can use the search function to help find an icon instead of scrolling through all 2000 icons if you prefer.

[Andy]

The large image is a Cover block added to the “Homepage Slider/Hero Section” widget area.

This can be found at ‘Appearance’ > ‘Widgets’ > ‘Homepage Slider/Hero Section’.

To add a Cover block, click the + symbol (Add block) in the widget area, and add a Cover block.

The first line of text in the Cover block is a Paragraph block with the text alignment set to Center and text size set to XXL. You could add a Heading block instead of a Paragraph if you prefer.
The second line of text is also a Paragraph block with the text alignment set to Center and text size set to Large.

After the second line of text is a Buttons block with two buttons.

Additional: if you add more than one Cover block in this widget area, they will automatically be displayed on the front-end as a slider.

• This reply was modified 9 months ago by Andy.

[Andy]

Please let me know when you have something live that I can take a look at, and I’ll be able to help further.

Also please let me know exactly what part of the theme design/layout you want to change/modify, and again I’ll try my best to help.

If you have used the contact form to contact us for a support request for a free theme, then this will be filtered out if you have not purchased a paid version of one of our themes.

Please note on the contact form page where it says If you have a support query for one of our free themes, we ask that you follow the link in the “Support” button on the individual theme page, as your question may help other users who may also have the same or similar issue.

I’m really sorry but we are just not able to offer one-to-one custom support over phone or zoom for a free product. It’s just not sustainable to do this. Hope you understand.

I’ve removed your phone number from your reply.

[Andy]

Hello, is there are any specific aspect of the demo site that you want to replicate?

I ask because out-of-the-box the theme design/layout is exactly the same as the demo site. In the demo site, none of the theme customization settings have been changed from the default options. Only the page/post content is different, and this will always be different in different sites anyway as on your site you would have your own content.

If you want to, you can share the URL of your site, and I’d be happy to take a look and advise further.

With regards to the Starter Sites plugin, I’ll see if we can get the Oskar demo added.

We don’t see any other support topics from yourself either here or on the wordpress.org support forum. In fact you are the very first person to post a support topic for the Oskar theme (with this question here) as it only went live a couple of days ago.

[Andy]

Assuming you’re using the Classic Editor plugin, you will need to filter the Tiny MCE content styles to give it a background color.

The following PHP code can be added to the functions.php file in a child theme, or if you don’t want to use a child theme you can add the PHP code using a plugin such as Code Snippets

function my_tiny_mce_style( $mceInit ) {
    $mceInit['content_style'] .= 'body.mce-content-body{background:#3a424e;}';
    return $mceInit;
}
add_filter( 'tiny_mce_before_init', 'my_tiny_mce_style' );

[Andy]

Hi, this custom CSS will increase the size of top bar text and menu items to the same as the site-wide default text size:

#top-bar {
  font-size: 1em;
}

Or alternatively if you want a specific font size for the top bar, use this custom CSS (change 18px to whatever size you want):

#top-bar {
  font-size: 18px;
}

[Andy]

Thank you for letting me know it worked.

[Andy]

Ahhhh yes I mistakenly thought you were talking about the Classic Widgets plugin to disable the block editor in the widgets area.

Sorry about that, and thanks for updating me.

Glad to hear it is now solved.

[Andy]

When the classic editor is enabled the widget title should have the vertical bars by default, as this is how it worked before the block editor existed.

The screenshot you posted looks like the block editor.
If you could disable the Under Construction temporarily, I would be able to take a look and see which editor is being used.

[Andy]

Hello,

Please try this custom CSS added to Appearance > Customize > Additional CSS:

.post-type-archive-product .woocommerce-products-header__title {
  display: none;
}

[Author]

Posts