Breadcrumb at same level, title center below

This topic has 13 replies, 3 voices, and was last updated 6 years, 6 months ago ago by Olga Barlow

  • Avatar: Valy
    Valy
    Participant
    April 23, 2018 at 13:11

    Hi!

    My site is under constructions but need some help, this is my 1-st post. So here it is…

    1) I cannot manage to make breadcrumb on the same level and title below, centered. This is a good
    option for long titles.

    Example 1 – my settings now. BAD, BAD, BAD!
    https://prnt.sc/j8ylei

    Example 2 – what I need.
    https://prnt.sc/j8yluh

    And I need these settings on all pages, posts or Woocommerce product pages, etc – EVERYWHERE. Of course, need to be responsive.

    2) How can I add other social icons? I want to add colored icons and much bigger than those
    in black. Something like https://prnt.sc/j8yn7o

    3) Sorry if this is too much, but how in the hell can I add my own sidebar to the right
    for single products??? https://prnt.sc/j8yoq1
    If I edit the prod page, I have “Disable sidebar” but would be nice to have “Choose sidebar”!

    Thanks!

    12 Answers
    Avatar: Valy
    Valy
    Participant
    April 23, 2018 at 13:50

    OK,

    I solve problem #3. It was toooo easy!

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    April 23, 2018 at 15:29

    Hello,

    Thank you for purchasing our theme and for reaching us.
    1. Please provide us with your website URL so we can take a closer look.
    2. Where exactly you want to add these icons?
    3. I am glad that you sorted out.
    Please read more in our documentation – https://www.8theme.com/documentation/xstore/support/widgets-custom-widget-areas/

    Regards

    Avatar: Valy
    Valy
    Participant
    April 23, 2018 at 17:17

    Hi Rose,

    At this moment, the site is on my computer under easywplocalhost – kinda XAMPP. So what I can give for topic #1 are just the settings I use. I was able to implement some css on POSTS and manage to make the breadcrumbs and title center as it is on https://prnt.sc/j8yluh

    Code I added in “Additional CSS”:

    .a-center .breadcrumbs .back-history{
    	top:12px;
    }
    .a-center .title span {
    	position:relative;
    	display:inline-block;
    	bottom:-12px;
    	width: 900px;
    }
    .page-heading .a-center h1{
    	text-align:center !important;
    	position:relative;
    	bottom:-12px;
    }
    

    But I don’t know how to make it responsive or if it’s correct from HTML/CSS point of view. Plus, I need this on all PAGES (doesn’t work on BRANDS) and PRODUCTS (this is where I have problems, don’t know what to edit – my WP skills are limited).

    2. Where exactly you want to add these icons?

    Every where are now on the site. I am working on this now.

    Thx!

    Avatar: Valy
    Valy
    Participant
    April 23, 2018 at 17:36

    For social, I need to do this: https://prnt.sc/j92x2b. Much better is colors, via SocialWarfare plugin.

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    April 24, 2018 at 11:17

    Hello,

    1) Please, export options (Theme Options > Import/Export > Options > download export file) and share us with link to this file. We’ll import your options and after that will be able to send you the correct one to fix the problem that you have.

    2) If you want to replace existing share icons for the post/product you can use either that third-party plugin and disable our share icons (Theme Options > General > Share buttons) or you can customize then using custom CSS to change the styles.

    Regards

    Avatar: Valy
    Valy
    Participant
    May 9, 2018 at 17:05

    Hi!

    I’m back, the site is up, in raw version. Can you help setup in center?

    Like: https://prnt.sc/j8yluh

    Please, contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    May 10, 2018 at 09:18

    Hello,

    Please add this code in Theme Options > Styling > Custom css:

    .page-heading .title {
        text-align:  center !important;
        margin-top: 20px;
    }
    .page-heading .back-history {
        margin-top: -50px;
    }

    Let us know result.
    “Header overlaps the content” option can be disabled in Theme Options > General > Header Settings.

    Regards

    Avatar: Valy
    Valy
    Participant
    May 10, 2018 at 15:57

    No, its not working well, but succeed to get a code using YellowPencil plugin. Now it’s what I need. Where to put the code if i update the theme in future so i cannot lose my settings in this case? One last things:

    1) how to update fontawesome with new codes on the entire theme? for example:
    old code: fa fa-twitter ; new code: fab fa-twitter

    2) even i install the theme from zero and made no modifications, on product
    pages “Additional custom blocks” goes up of “Related Products”, instead of
    below. Send you a link in private. that’s weird…

    v.

    Please, contact administrator
    for this information.
    Avatar: Valy
    Valy
    Participant
    May 10, 2018 at 16:31

    true link in private

    Please, contact administrator
    for this information.
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    May 11, 2018 at 08:53

    Hello,

    If you use custom CSS code place it in child theme style.css to avoid problems after theme update.

    1) It requires more changes than just replace classes. Should be also updated FontAwesome files that are included in our theme and all the classes of the FontAwesome icons that were used in theme. Sorry, but at this moment our theme comes with FontAwesome 4.7.

    2) “Additional custom blocks” block that you can use for the advanced product description. That’s why it is placed above the Related products. If you want to move it below the related products you need to change few lines. Copy xstore/woocommerce/content-single-product.php file into child theme and move the related product code above the additional block code in http://prntscr.com/jggc4j

    Regards

    Avatar: Valy
    Valy
    Participant
    May 11, 2018 at 14:20

    Ok, I understand. I add this line in header.php and works:

    <link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.0.13/css/all.css&#8221; integrity=”sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp” crossorigin=”anonymous”>

    Do I need to also copy the new header.php into child theme to save it for future updates?

    Tips for custom blocks works grt, thx for support!!

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    May 11, 2018 at 14:27

    Hello,

    We plan to exclude FontAwesom icons at all in next update and replace them with our icons. So, if you want to use FA in future all the changes you need to do in child theme files.

    Regards

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

You must be logged in to reply to this topic.Log in/Sign up

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