Is there a way to put in image in the header slider?

Hello I’m trying to insert an image (Logo) into the header slider. Right now where it says “Cesari Direct”. I have tried using HTML in the customization screen to no luck.

http://www.cesaridirect.com/

Best

Stan

Dear Stan,

Thank you for reaching out to us here.

In order to achieve that objective, could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

.text-slider .maintitle{
  padding-top: 150px;
  background-image: url('http://www.cesaridirect.com/wp-content/uploads/2015/12/TRANSPARENT-CESARI-LOGO.png');
  background-repeat: no-repeat;
  background-size: 150px;
  background-position: top center;
}

You would make adjustment accordingly.

I hope this reply helps.

Regards,
Kharis

Hello, is there a way to use an image in the slider without applying text after it? I just want my logo to appear in the middle of the slider.

Much appreciated,

Vikki

Hello Vikki,

I would like to apologize in advance for the delayed reply.

Please try to do the following steps:

  1. Go to Appearance > Customize > Header area > Header Slider > leave empty the all slide title and subtitle input fields
  2. Install and activate the Header and Footer Scripts plugin
  3. Go To Settings > Header and Footer Scripts panel
  4. Paste the following code into the “Scripts in header:” box

<style type="text/css">
.slide-logo-wrap{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  text-align: center;
}

.slide-logo{
  display: table;
  position: relative;
  width: 100%;
  height: 100%;
}

.slide-logo div{
  display: table-cell;
  vertical-align: middle;
  position: relative;
}

.slide-logo a{
  padding: 10px 20px;
}
</style>

  1. Paste the following code into the “Scripts in footer:” box

<script type="text/javascript">
(function($){
      
  if( $('.header-slider').length ){

    var siteURL  = 'http://yoursite.com';
    var siteName = 'Your Site Name';
    var logoImg  = 'http://yoursite.com/path/to/your/logo.jpg';
    var logoObj  = '<div class="slide-logo-wrap"><div class="slide-logo"><div><a href="'+siteURL+'"><img src="'+logoImg+'" alt="'+siteName+'" /></a></div></div></div>';

    $('.header-slider').append(logoObj);
    
  }

})(jQuery);
</script>


Adjust the variables’ values to meet your need.

  1. Save settings

Regards,
Kharis

Thank you Kharis!

It worked perfectly, greatly appreciated!

Dear Vikki,

No problem! I am glad to know that the code work for you. I am marking this thread as resolved. So, please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

If you don’t mind, could you please rate our Sydney theme here? We would highly appreciate it if you do so.

Have a nice day!

Regards,
Kharis

Hello,
Im trying to implement this on my companies new site and for some reason the CSS isn’t taking. I tried reinstalling the simple Custom CSS plug in. I’ve copy and pasted the CSS and jsut updated the image, but to no avail

The logo image I am trying to use is

http://cesarimedia.com/wp-content/uploads/2016/09/Cesari-Header-logo.png

My website is www.cesarimedia.com

Update,
It is showing up on mobile. I’ve tried resizing the image and that hasn’t worked either.

Hello there,

It is displaying fine viewed from here on my browser. Please try to clear your web browser’s cache and try again.

Regards,
Kharis

Hi there!

I am trying to add my logo onto my home slider as well as have a tagline below.
I used the code you provided Kharis but my logo ends up taking up the entire page almost.
How do i resize the logo image?

This is what it looks like right now…

But i am wanting it to look similar to this…
https://www.motionsickness.co.nz/#1

Any help would be greatly appreciated!!

@caitlinprocter - I just resized my image file.

@Kharis Sulisti yono - How do I control the position? If I want it centered horizontally, but higher vertically?

Hello @ktrides2,

Please share a link to your site, so I can see your current setup. Inspecting it directly will help me better find the exact code solution.

Regards,
Kharis

I am trying to put a logo across the slider of a theme that my boss likes for our company. The temp site is here as it looks now:
http://cdandpdev.cdandp.com
I have installed the plug in and I believe I got the variables right, maybe I missed something? I would really appreciate any suggestions. Thank you!

SO, I got another solution to work on that URL, (http://cdandpdev.cdandp.com) but I would still like to get Header and Footer Script to work with that other theme, so I have tried it again on another install here: http://cdandpdevb.cdandp.com and it still would not show up. I wonder what setting I might have missed? Any suggestions would be helpful and appreciated.

Hello there,

Since you’ve been running a theme that isn’t authored by us, you won’t get any solution here. This support forum is specifically aimed for our themes. From your the source code of the main stylesheet, it says that the author is http://templatetoaster.com which has its own support channel. Yo should consult to its author here http://templatetoaster.com/support.

Regards,
Kharis

@Kharis Here you go: http://dev.hhcarch.com/
I want HHC above, architecture, planning, interiors.
Thanks for looking int to it!

Hello there,

To do that, in this custom jQuery code



(function($){
      
  if( $('.header-slider').length ){

    var siteURL  = 'http://hhcarch.com';
    var siteName = 'Horton, Harley & Carter, Inc.';
    var logoImg  = 'http://dev.hhcarch.com/wp-content/uploads/2017/09/HHC-logo2.png';
    var logoObj  = '<div class="slide-logo-wrap"><div class="slide-logo"><div><a href="'+siteURL+'"><img src="'+logoImg+'" alt="'+siteName+'" /></a></div></div></div>';

    $('.header-slider').append(logoObj);
    
  }

})(jQuery);


Replace this line:


$('.header-slider').append(logoObj);

to:


$('.header-slider .text-slider').prepend(logoObj);

Then add this extra custom CSS code to Appearance > Customize > Additional CSS.


.text-slider-stopped .text-slider {
  padding-top: 200px;
}

You should flush cache (if applied), otherwise code change and addition won’t take any effect.

Regards,
Kharis

Awesome, thanks Kharis!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis