Header image and Custom Intro image « My Site My Way Support

Header image and Custom Intro image

resolved (27 posts) (2 voices)

Jan7077
Member
Two issues.

1. I added an image to the header and don't want it to show through on all the other pages. Issue is circled in red on the right side. You can see the image peering through. How can I remove that? Possibly have the header image show only on the front page? Or other idea?

2. The orange bar across the top. How can I get it above the white content area? I'm assuming it's a z-index issue as I've done it before and it worked, then had to make some changes and now can't get it to work again. I'm sure it's a simple fix, just dumbed out at the moment, I guess. It's an image that I've placed into the Custom Raw HTML as the intro and use it on all pages and blog posts, minus the home page.

http://www.heartofgodeastafrica.org

Thanks so much!
Dana
Attachments
question4.png (69.7 KB, 0 downloads) 5 months old
Posted 5 months ago #
Elliott
Support
Hello Jan7077,

1. You added it to the header? You can surround it with this,
```
<?php if (is_home()) { ?>
your image
<?php } ?>
```
So it only displays on the homepage.

2. It looks like it's inside your intro so you'll need to have your intro display on top of the content,

#intro { position: relative; z-index: 9999; }
Posted 5 months ago #
Jan7077
Member

#1 worked great. #2 not so much so. I mean, it worked, but the entire intro is now over the content area so not going to work. Any other idea?

Also having trouble with menu and slider not working in IE9. I've looked through the forum without much luck.

Posted 5 months ago #
Elliott
Support

I would try taking off the intro background and placing it on the header instead.

The menu and slider seems to work fine for me in IE9. Make sure your not in compatibility mode and clear your browser cache.

Posted 5 months ago #
Jan7077
Member

The slider works for you? Still can't get it to work but if you see it and it functions, I trust you.

Posted 5 months ago #
Elliott
Support

Try reinstalling IE. What operating system are you using?

It's most likely a cache issue so make sure to clear your browser cache and refresh any caching related plugins you might have installed.

Posted 5 months ago #
Jan7077
Member

Using FF and will reinstall IE. Thanks! :)

Posted 5 months ago #
Jan7077
Member

I apologize but the slider is not working in IE8. I have IE8 installed, not IE9. So sorry. What causes this? Any tips for future reference?

Posted 5 months ago #
Elliott
Support
The only thing I noticed in IE8 was that your slider wasn't working. Probably because of this javascript error,
```
SCRIPT5007: Unable to get value of the property 'left': object is null or undefined
scrollable.min.js?ver=2.3, line 14 character 234
```
It's hard to tell what could be causing that due to all of the customizations that have been done.

You only have two slides in your HTML in IE8 so perhaps it's something to do with the third slide. Try switching to the fading slider to see if it does the same.
Posted 5 months ago #
Jan7077
Member

Slider now shows on IE8 by switching to the fading slider but it won't move and the slides are out of order and no titles. Making some progress..

Posted 5 months ago #
Elliott
Support

What customizations have been done? Go ahead and list the files and line numbers here.

Posted 5 months ago #
Jan7077
Member

Here are the customizations in the Custom CSS area..

#content_inner {
text-color:#000;
radius: -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; border: 1px solid #e2e5e5;
padding-right: 20px;
padding-left:20px;
margin-top:-70px;
background-color: #fff;
width: 1000px;
}

#main {padding-right:0px;}

.has_slider #header {height: 182px;}

.jqueryslidemenu {margin-top: 55px;}

#breadcrumbs_inner {margin-left: 50px; margin-top:35px;}

#header_extras + #primary_menu {
top: 100px !important;
padding-bottom:80px;
}

#outro{
background:#transparent;
padding-top:-20px;
}

#outro_inner{padding:5px;}

.is_home #content {display: none;}

#footer_logo {float: right; }

#intro_inner .one_third {width:28%; }

#sidebar .widgettitle {
line-height:30px;
font-size: 26px !important;
}

.left_sidebar #sidebar {width: 260px;}

.left_sidebar #sidebar_inner {padding-right:15px;}

.toggle a, .toggle_accordion a {color: #302004;}

#intro_inner {padding-left:35px; padding-top:100px;}

#intro {padding-top:50px; }

#header {height:150px;}

#slider_module {margin-top:50px;}

.logo {
margin-top:-20px;
margin-left:-40px;
}

***************************************

And the Custom Java:
jQuery('.social_icon a').prop('target', '_blank');

***************************************

Added this to the header.php for the background image

<div id="header_inner">
<script type = 'text/javascript' src = 'http://heartofgodeastafrica.org/wp-content/themes/infocus/lib/scripts/tabs.min.js'></script>

<?php if (is_home()) { ?>

<div style = "position: absolute; top: 200px; left: 620px;"><img src="http://heartofgodeastafrica.org/wp-content/uploads/2011/11/africashape21.png" height="445" width="450" /></div>

<?php } ?>

<?php mysite_header();

?></div>

***************************************

Used this post (http://mysitemyway.com/support/topic/adding-image-to-the-textfield-of-the-home-page-slider?replies=3&message=update-support-forums-topic-status-error) to add images as slide titles.

***************************************

And then there are the custom skin changes for color, patterns, fonts, etc., but that's about it.

Posted 5 months ago #
Elliott
Support

Try taking this customization off, http://mysitemyway.com/support/topic/adding-image-to-the-textfield-of-the-home-page-slider?replies=3&message=update-support-forums-topic-status-error, and switch to one of your default skins to see if that's causing it.

Posted 5 months ago #
Jan7077
Member

Changed skins and no difference. Reverted back to the original custom.js and removed the class= 'nopreload' from the slideshow images. Seems the slides are in the right place now but the page crashes each time before it fully loads.

Posted 5 months ago #
Elliott
Support

Create a copy of your theme settings in Dashboard -> your theme -> Advanced and then reset them to see if it's something with your slider configuration.

Posted 5 months ago #
Jan7077
Member

So copy the Export Options then Reset All Options? If I do that, then I can just replace the Export Options with what I copied and everything will go back the way it was? Very, very scary.

Posted 5 months ago #
Elliott
Support

Yes, if you create a backup then it will save it also. Try that out to see if it's a problem with your slider settings.

Posted 5 months ago #
Jan7077
Member

Have done that. Now what? Seems the slider works fine. Should I start adding things back in one at a time to see if I can replicate the problem?

Posted 5 months ago #
Jan7077
Member

Found the issue. It's the images I was putting in the slide description fields. Everything works as long as those are gone. Client requests those specifically so what do you suggest I try to make it work?

Posted 5 months ago #
Elliott
Support

Try this one more time, http://mysitemyway.com/support/topic/adding-image-to-the-textfield-of-the-home-page-slider#post-23298, and make sure that your setting a class of "nopreload" on each of your images that you use in the slide descriptions.

I think it should be working so try it out with one or two slides at first. If it still does not work then we can also try taking the preloader off the slider.

Posted 5 months ago #
Jan7077
Member

So very close. All slides work but when adding the 16th slide description, all fails with this error...

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; InfoPath.2)
Timestamp: Tue, 6 Dec 2011 22:33:07 UTC

Message: 'position().left' is null or not an object
Line: 14
Char: 234
Code: 0
URI: http://heartofgodeastafrica.org/wp-content/themes/infocus/lib/scripts/scrollable.min.js?ver=2.3

Posted 5 months ago #
Elliott
Support

Not sure what it could be, It must be a limitation with the jQuery tools and IE8. I'll keep looking around for a fix.

Posted 5 months ago #
Jan7077
Member

It's really weird. I assumed the error may have been because there are too many slides as the 16th slide worked fine but when I added the description it broke the slider. So I removed a slide, now having only 15. But that, too, works the same. The 15th slide works fine but when adding the description it breaks the slider again. Weird. So not sure if it's the number of slides. Hmm. Thanks for walking me through this and working to find a fix.. :)

Posted 5 months ago #
Elliott
Support

Couldn't find anything. The images in the slider description issue is already in our feature list so we might have a better solution worked out in the future after our devs take a look.

Posted 5 months ago #
Jan7077
Member

Oky doky. Another option. I'm using the fonts Bebas and Pacifico, both Google fonts, for the descriptive image. If I chose to use text only in the description, how would I format HTML for using those two fonts?

Posted 5 months ago #
Elliott
Support

That could work also. Try adding a class to your text like so,

<span class = "bebas">Here is a bebas font</span>

And then in the WP Google Fonts settings you can set the class to Bebas,

.bebas { font-family: "Bebas"; }

If I remember right that is the code you would need to use.

Posted 5 months ago #
Jan7077
Member

Worked wonderfully! Thanks again (SO MUCH) for your patience and walking me through this. Case closed. :)

Posted 5 months ago #