Navigation
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • #865108
    ArcaneE
    Participant

    Hi,

    The website i’m building is: http://www.institutquebecoisdesynergologie.com.

    I would like to edit my header so it looks like https://www.institut-synergologie.eu

    Social icons on the left, adding flags and links on the right. Is it possible to do so?

    Thanks,

    Nathalie

    #865490
    Lely
    Moderator

    Hi Nathalie,

    Thank you for giving us your site URL.
    Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

    Then copy the file _topbar.php from wp-content\themes\x\framework\views\global to wp-content\themes\x-child\framework\views\global. Open the copied file and replace the entire code with the following:

    
    <?php
    
    // =============================================================================
    // VIEWS/GLOBAL/_TOPBAR.PHP
    // -----------------------------------------------------------------------------
    // Includes topbar output.
    // =============================================================================
    
    ?>
    
    <?php if ( x_get_option( 'x_topbar_display' ) == '1' ) : ?>
    
      <div class="x-topbar">
        <div class="x-topbar-inner x-container max width">
          <?php x_social_global(); ?>
          <?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?>
          <p class="p-info"><?php echo x_get_option( 'x_topbar_content' ); ?></p>
          <?php endif; ?>
    
        </div>
      </div>
    
    <?php endif; ?>
    

    Then please add the following CSS on Appearance > Customize > Custom CSS:

    .x-topbar .x-social-global{
      float:left;
    }
    .x-topbar .p-info {
        float: right;
    }
    

    Hope this helps.

    #865829
    ArcaneE
    Participant

    Wow! That was fast, Thanks!

    I’m setting up the child theme as we speak. Once it’s done, how do I add flags and links to a website to them?

    Thanks again,

    Nathalie

    #865839
    ArcaneE
    Participant

    Is it possible to simply add them in the header text box and link them to another URL?
    Thanks 🙂

    #866128
    Darshana
    Moderator

    Hi there,

    I’m sorry, but what did you mean by header text box? If you wouldn’t mind providing us with a little more clarification, we’ll be happy to provide you with a response once we have a better understanding of the situation.

    Thanks!

    #880201
    ArcaneE
    Participant

    Ok. So I have decided to stick to the general theme (not the child theme) and leave the social media icons on the right.

    On the left, where it says “Les écoles de synergologie dans le monde”, I would like to add small flags icons for different countries with a link to their website.

    Also, I have another question; I have been looking everywhere and tried many different css but I cannot remove the spacing between text elements in a column in section 1 (at the bottom of the home page, right on top of the footer, where it says “Qu’est-ce que la synergologie).

    Thanks!
    Nathalie 🙂

    #881136
    Jade
    Moderator

    Hi Nathalie,

    You will need to have images for the flags then upload it in your files the add this in your Topbar Content:

    Les écoles de synergologie dans le monde <span><a href="LinkToThePage" target="_blank"><img src="imageLink"></a></span><span><a href="LinkToThePage" target="_blank"><img src="imageLink"></a></span><span><a href="LinkToThePage" target="_blank"><img src="imageLink"></a></span>

    Then please add this in your CSS customizer:

    
    #x-section-3 .cs-ta-center p {
        margin-bottom: 15px;
    }

    Hope this helps.

  • <script> jQuery(function($){ $("#no-reply-865108 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>