XStore banner before breadcrumbs static block issue

This topic has 17 replies, 4 voices, and was last updated 5 years, 9 months ago ago by Rose Tyler

  • Avatar: themadguru
    Robert
    Participant
    November 24, 2019 at 05:44

    Hi

    I am using the new feature which we can use a static block as a banner before the breadcrumbs. This feature is great, so thank you for implementing that. 🙂

    The problem I am having with the static block is that the ‘Row Stretch’ option doesn’t seem to have any effect. I tried ‘default’ and ‘Stretch Row’ settings but the contents for these are stretched to the entire width of the page as if ‘Stretch Row and Content’ option had been chosen instead. I need this feature to act as intended as if it was part of the page, and the margins match the main page margins further down in page content.

    I think that this is probably because the row is not part of the main page content. Is there a solution to fix this, please?

    Regards
    Robert

    16 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    November 24, 2019 at 09:29

    Hello,

    Thanks for the notice, your report was passed to our developers.
    As a temporary solution, you can add a custom class for row in your static block – http://prntscr.com/q19ahz and the next code in Theme Options > Theme custom CSS > Global custom CSS:

    .custom-banner .vc_column_container{
        max-width:1170px;
        margin: auto;
    }
    @media (min-width: 992px) {
        .custom-banner .vc_column_container{
            max-width: 970px;
        }
    }
    @media (min-width: 768px) {
        .custom-banner .vc_column_container{
            width: 750px;
        }
    }

    Change 1170px to width of your site.

    Regards

    Avatar: themadguru
    Robert
    Participant
    November 24, 2019 at 12:21

    Hi Rose

    Thanks for providing that. I copied the css into my Customer CSS. I’m still having a problem.

    The text I put in the static block is so far inwards now, it looks centred when it should be left-aligned to the usual edge of the page. I’m sure this site has the 1170px width, so don’t think that is a problem.

    I’ve included the site credentials in the private area.

    The page I am currently working on is ‘Our Story’. It uses the static block that I labelled, ‘Banner Our Story’. [block id=”9549″]

    If I can fix this page, I can create banners for all the other pages and posts to match it.

    two other things. On the Our Story page, I imported the Our Values section from another demo and changed the text and numbering so far. you will notice that the numbering and text next to the numbers on that page are not distributed vertically evenly. I tried various things, but don’t know what settings I can change to make those numbers line up vertically nicely. Do you have an idea please?

    One last issue is that the banner for the Shop page can only be controlled from the theme options, and selecting a static block from within the Shop page does not place a banner above the Breadcrumbs, as with other pages and posts. Is it possible to place the Shop and product category descriptions above the breadcrumbs, so the Shops pages and category match other pages?

    I am able to use the [block] code in category description text area to create banners, but they appear below the breadcrumbs, as with the Shop page banner.

    Regards
    Robert

    Please contact administrator
    for this information.
    Avatar: themadguru
    Robert
    Participant
    November 24, 2019 at 12:33

    Also, you will notice that I added a thin grey line under the breadcrumb text. It would be nice in future to be able to add borders and control margins of the breadcrumbs from with the theme options, rather than us having to use css to do this. if you view the breadcrumbs on the Our Story page, you will see the line I am referring to. It fits quite well underneath.

    Robert

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    November 24, 2019 at 13:28

    Hello,

    1) Please change the previous code to:

    .custom-banner .vc_column_container{
        max-width: 1170px;
        margin: auto;
    }
    @media only screen and (max-width: 1200px) and (min-width: 992px){ 
        .custom-banner .vc_column_container{
            max-width: 970px;
        }
    }
    @media only screen and (max-width: 991px){ 
        .custom-banner .vc_column_container{
            max-width: 750px;
        }
    }

    2) Please describe the desired result in more details.
    3) I’ve passed your question to our developers. I will let you know once get an answer.
    4) Thanks for the suggestion, it will be discussed.
    If you have any other questions or suggestions, please create a new topic to prevent a mess in this ticket.

    Regards

    Avatar: themadguru
    Robert
    Participant
    November 24, 2019 at 23:01

    Hello Rose

    Thanks for the updated CSS code, which as worked. 🙂

    2) for the numbered section on the Our Story page, the numbers 1 and 2 have nice spacing between them. However, lower down, there is a large gap to number 3. Both 3 and 4 are too close together. Then there is a large gap to numbers 5 and 6 which are also too close together. I hope this makes a bit more sense?

    Noted and understood… I will create separate posts for separate issues.

    Robert

    Please contact administrator
    for this information.
    Avatar: John Holden
    John Holden
    Participant
    November 25, 2019 at 05:25

    Hi,

    It depends on your settings, you can edit here… (Private Content area).

    Regards,
    Hung PD

    Please contact administrator
    for this information.
    Avatar: themadguru
    Robert
    Participant
    November 25, 2019 at 06:33

    Hello Hung The

    Thanks for your response. 🙂 I really appreciate it.

    I saw these settings, but they do not change the space between timeline items further down, only seem to change the top two. You will notice that the vertical gap between items 3 and 4, then gaps between 5 and 6 remains the same. So it follows that the Vertical Items Gap setting does not affect all timeline items. Maybe this is a bug? The change you made did not do anything further down, same as when I tried.

    Please read Private Content area about the last screenshot.

    Regards
    Robert

    Please contact administrator
    for this information.
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    November 25, 2019 at 18:11

    Hello,

    That element is the Massive Addons plugin element. We are not developers of that plugin, so I can’t 100% be sure if that was their feature or bug. I would recommend you to ask plugin author about this to be sure https://codecanyon.net/item/massive-addons-for-visual-composer/14429839/comments

    Regards

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    November 27, 2019 at 09:31

    Hello,

    Fix for the “custom banner above breadcrumbs” on Shop page will be added in the next update of the theme. For categories, we do not plane to add such a feature.

    Regards

    Avatar: themadguru
    Robert
    Participant
    November 27, 2019 at 13:51

    Hi Rose

    Thanks for that. I know that I can use static blocks for description content of Categories. It’s just shows up under the header. I will look for ways to achieve this by way of CSS.

    Please can someone address my other concern in the Private Content area of my last post? Just a privacy issue.

    Regards
    Robert

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    November 27, 2019 at 14:03

    Hello,

    You’re welcome!

    Regards

    Avatar: themadguru
    Robert
    Participant
    February 24, 2020 at 11:17

    Sorry to reopen (necro) this thread. I noticed that the breadcrumbs on the My Account page is different. The default for my breadcrumb titles is ‘Left Inline’. On the ‘My Account’ page, this setting is ignored and the breadcrumb title is centred, not left-aligned.

    Do you know why this is? I checked the setting when editing the page itself and changed that from the default no setting to left inline but it ignores this.

    ** Edit ** Wishlist page breadcrumb is also centred, not left-aligned.

    Robert

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 24, 2020 at 13:49

    Hello,

    My account and Wishlist pages have specific styling in style.css of the theme, it is not a bug. You can use custom CSS to change it.

    Regards

    Avatar: themadguru
    Robert
    Participant
    February 24, 2020 at 14:30

    Hi Rose

    When I look at the code for an ordinary page I see this:

    .bc-type-left2 .breadcrumbs, .bc-type-left2 .woocommerce-breadcrumb, .bc-type-left2 .bbp-breadcrumb {
        display: inline-block;
        width: auto;
        margin-right: 0.285em;
    }

    When I look at the CSS code for Wishlist breadcrumbs, I see this:

    .woocommerce-wishlist .page-heading .breadcrumbs, .woocommerce-account .page-heading .breadcrumbs, .woocommerce-wishlist .page-heading .back-history, .woocommerce-account .page-heading .back-history {
        display: none;
    }

    Should I change it to this maybe?

    .woocommerce-wishlist .page-heading .breadcrumbs, .woocommerce-account .page-heading .breadcrumbs, .woocommerce-wishlist .page-heading .back-history, .woocommerce-account .page-heading .back-history {
        display: inline-block;
        width: auto;
        margin-right: 0.285em;
    }

    Robert

    Avatar: themadguru
    Robert
    Participant
    February 24, 2020 at 14:43

    … I have been playing arround…. I had to also change the title as well as the breadcrumbs, so this is what I came up with:

    /* Change wishlist, account pages so breadcrumbs are inline and left aligned */
    .woocommerce-wishlist .page-heading .breadcrumbs, .woocommerce-account .page-heading .breadcrumbs, .woocommerce-wishlist .page-heading .back-history, .woocommerce-account .page-heading .back-history {
        display: inline-block;
        width: auto;
        margin-right: 0.285em;
    }
    
    .woocommerce-wishlist .page-heading .title, .woocommerce-account .page-heading .title {
        display: inline-block;
        font-size:inherit;
        text-transform: none;
        text-align: left;
    }

    Thanks for your advice. This seems to have worked. If you know of an easier or more efficient solution, then please let me know?

    Robert

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 25, 2020 at 14:18

    Hello,

    I am glad that you sorted out.
    Have a nice day.

    Regards

  • Viewing 17 results - 1 through 17 (of 17 total)

The issue related to '‘XStore banner before breadcrumbs static block issue’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.