Andy

[Andy]

Hi Laurie

This is the same issue as detailed here.

Please update Trusted Pro to version 1.2.1

[Andy]

That WooCommerce Product Bundles plugin looks like it is inserting an image gallery in the product summary area (where price, add to cart etc. is).

I don’t understand why it does this, but anyway the plugin has some CSS styling that is applying a negative left margin of 100px (margin-left: -100px) to it’s own gallery images making them appear partly over the top of the standard product gallery, again I don’t know why the plugin does this.

To remove the images negative left margin, add this to Additional CSS:

.bundled_product_summary .bundled_product_images {
    margin-left: 0;
}

[Andy]

The issue raised in this topic are now fixed in latest release.

Please update to version 1.2.1 and all should be working correctly.

[Andy]

Hello Kirsty

Sorry for taking so long to answer your query. We didn’t see your post until just now!

You will need to also add the following to remove cart & login from individual blog posts:

.single-post .top-login,
.single-post .top-cart {
    display: none;
}

[Andy]

I can see on your site that you have added your own additional css to change the height of the header and the top padding of the title area like so:

@media screen and (min-width: 1025px){
    .main-header{
        height: 450px;
    }
    .header-title{
        padding-top: 90px;
    }
}

simply change the top padding, try different values until you get it how you like e.g.

@media screen and (min-width: 1025px){
    .main-header{
        height: 450px;
    }
    .header-title{
        padding-top: 120px;
    }
}

[Andy]

If you are using your own image instead of the preinstalled icons, then the color of the image cannot be changed by the theme. The image that you upload will need to be in the color that you want to use.

There is no recommended size for your own image, but it is recommended that it is of equal height and width e.g. 100×100, 300×300 etc.

[Andy]

This is the standard css styling for the color around the icon:

.header-title .fa,
.header-title .main-title-img{
    box-shadow: 0px 0px 0px 3px rgba(255,255,255,0.45);
}

It uses rgba color so rgba(255,255,255,0.45) is white with a 0.45 opacity so that it appears to let the background color through slightly and with a lighter shade.

change the rgba(255,255,255,0.45) part to any color

as well as rgba the color can be defined as rgb or hexadecimal
e.g. rgba(11,72,158,1), rgb(11,72,158) and #0b489e are all the same blue color.

[Andy]

The standard width of #site-branding is 20% so if you want to change it to 30% you will need to also change the widths of #site-description and #top-info

At that screen width the standard width of #top-info is 73% with a 7% right margin to leave room for the mobile menu hamburger icon.
(20% + 73% + 7% = 100%)

so to change #site-branding to 30% the #top-info (and #site-description) would need to be changed to 63%
(30% + 63% + 7% = 100%)

[Andy]

Yes you can upload your own image to replace the icon.

Appearance > Customize > Static Homepage Options > Featured Services

Below the icon selector there is an option to add an image instead.

Add your own image like we have done in our demo.

[Andy]

The additional css that you have added is messing up the header, specifically this part:

@media screen and (min-width: 768px){
    #site-branding {
        width: 30%;

Remove the ‘width: 30%’ and it should be OK.

[Andy]

OK, change it to this so that it is only applied above mobile view

@media screen and (min-width: 769px){
    .featured-post{
        margin-bottom: 20px;
    }
}

[Andy]

Have you added your own CSS to alter the layout of any part of the header area?

The reason I ask is because in the 1920px screenshot the tagline (site description) looks out of alignment.

Is this on a live site that I can take a look at?

Also, in the Theme Options what setting have you selected for the ‘Masthead Navigation Responsive Break-Point’?

[Andy]

Can you please try this in Customize > Additional CSS:

.featured-post{
    margin-bottom: 20px;
}

[Andy]

You just need to add this to exclude products where the ‘product_visibility’ taxonomy is set to ‘exclude-from-search’:

$query->set( 'tax_query', array(
    array(
    'taxonomy' => 'product_visibility',
    'field'    => 'name',
    'terms'    => 'exclude-from-search',
    'operator' => 'NOT IN',
    )
) );

So the full code using the previous example would be:

function trusted_custom_search_filter( $query ) {
    if ( $query->is_search ) {
        $query->set( 'post_type', array( 'recipe', 'post', 'product' ) );
        $query->set( 'tax_query', array(
            array(
            'taxonomy' => 'product_visibility',
            'field'    => 'name',
            'terms'    => 'exclude-from-search',
            'operator' => 'NOT IN',
            )
        ) );
    }
    return $query;
}
add_filter( 'pre_get_posts', 'trusted_custom_search_filter' );

[Andy]

So I can see if it is a theme issue, would I be able to take a look at the site please?

If it is the site I think, it is hidden behind a maintenance/coming soon type plugin so I cannot see the product in question.

[Author]

Posts