Docs

[jeffprewitt]

Is there a way to add a widget area or something to the top right of my site? I am needing to achieve the following:

– Quickly and easily insert an image that links to a page. The image and link need to be able to change often so accessing code every time is not ideal.
– Constrain the size of the image automatically so even if a larger image is selected it will fit in the area I have set

I am trying to create a call-to-action button of sorts that I could feature on some (or all) pages and can change often as promotions are changed.

Thanks!

[Lely]

Hi There,

Thanks for posting in. Your screenshot doesn’t upload so I can’t see at the moment the think you want to achieve. You might want to decrease the size of the screenshot and upload again. But then based on your description, you might want to use Topbar content area. Go to Appearance > Customize > Header> Set Topbar to On and then add the content on Topbar Content Textarea. Do let us know if this works for you.

Cheers!

[jeffprewitt]

Sorry here is another screenshot that has been scaled down.

[Christopher]

Hi there,

Did you follow our previous replay? Lely provided you with solution. Please follow that and let us know how it goes.

Thanks.

[jeffprewitt]

Thanks for the idea. I don’t like the top bar content area because it moves the rest of the site down. For example, if I make the image I am using 50px tall then there ends up being a 50px tall white bar above my top menu. However the header widget area is a potential solution. Currently it gives me a triangle in the top right corner, which with the help of CSS I have been able to float down and left 15px to get it into the spot I would like it to be.

However, I don’t love that it is just the triangle. Is there a way to remove the triangle and instead put an image in its place? Also is there a way to make it so that when it is clicked the widget area doesn’t slide down from the top of the screen, and instead it just takes you to a new page?

[Rue Nel]

Hello There,

Thank you for the clarifications. The triangle is for the top widget area. It will be used to open and close that top widget area.

If you want to add a custom image on the right side of your logo, we can add custom function to insert it. Because what you are trying to accomplish requires a template customization, we would like to suggest that you use 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.

After the child theme is set up, please add the following code in your child theme’s functions.php file

// Displaying custom image on the right of the logo
// =============================================================================
function add_custom_image(){ ?>
  
  <div class="custom-image">
    <a href="http://google.com" target="_blank"><img src="//placehold.it/240x80/ffee00" alt="Custom Logo Image"></a>
  </div>

<?php }
add_action('x_after_view_global__brand', 'add_custom_image');

We would loved to know if this has work for you. Thank you.

[jeffprewitt]

Thanks for the idea. Unfortunately its not putting it in the correct spot. On the home page it is putting it to the bottom left of the logo, and on the interior pages it is putting it to the top left. Any ideas?

[Rue Nel]

Hello There,

Sorry if it wasn’t aligned properly. You still need to add a custom css to properly position it. please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(min-width: 768px){
  .x-navbar .x-container.max.width{
    width: 98%;
    max-width: 100%;
  }

  .custom-image {
    position: absolute;
    top: 15px;
    right: 0;
  }
}

By the way, I was trying to edit the code but then there was a typo error which resulted to a Parse error. Please update the code in your child theme’s functions.php file. You can make use of this code:

<?php

// =============================================================================
// FUNCTIONS.PHP
// -----------------------------------------------------------------------------
// Overwrite or add your own custom functions to X in this file.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Enqueue Parent Stylesheet
//   02. Additional Functions
// =============================================================================

// Enqueue Parent Stylesheet
// =============================================================================

add_filter( 'x_enqueue_parent_stylesheet', '__return_true' );

// Additional Functions
// =============================================================================

// Custom Typekit
// =============================================================================
add_action('wp_head','custom_typekit_head');

function custom_typekit_head() { ?>
  <script src="https://use.typekit.net/ysz8aqi.js"></script>
  <script>try{Typekit.load({ async: true });}catch(e){}</script>

<?php }
// =============================================================================

// Displaying custom image on the right of the logo
// =============================================================================
function add_custom_image(){ ?>
  
  <div class="custom-image">
    <a href="http://google.com" target="_blank"><img src="//placehold.it/240x80/ffee00" alt="Custom Logo Image"></a>
  </div>

<?php }
add_action('x_after_view_global__brand', 'add_custom_image');
// =============================================================================

If nothing else works, would you mind providing us the ftp login credentials so we can fix it?

To do this, you can make a post with the following info:
– FTP Hostname
– FTP Username
– FTP Password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Hope this helps.

[jeffprewitt]

Thanks for the help!

[Prasant Rai]

You are most welcome. 🙂

[jeffprewitt]

Is there a way to change the triangle that shows up as the button to open the header widget area? I see that I can change the color and the hover color, but can I instead put an image in its place?

[Paul R]

Hi,

Yes there is a way.

You can add this under Custom > Edit Global CSS in the Customizer.

.x-btn-widgetbar {
    border: 0;
    max-width: 40px;
    content: url('image.jpg');
    background: transparent;
}

Change image.jpg wuth the url of your image.

Hope that helps.

[jeffprewitt]

Thanks Paul!

[Nabeel A]

Glad we could help.

Cheers!

[Author]

Posts