specht15

If you still have the problem here’s what I did to get it working…

<a href="https://www.website.com/"><img src="https://domain.com/inactive.png"
class="mouseover"
title="Tooltips Title"
clicksrc="https://www.domain.com/hoverorinactive.png"
oversrc="https://www.domain.com/hover.png" /></a>

same problem

awesome thank you very much.. Too many hours trying to fix other problems makes missing simple mistakes extremely easy

I have the same problem

i managed to get them just below the header but would like them to be actually in the top right of the orange box graphic header. I can’t seem to find where I would need to edit the widget in the custom stylesheet. Or am I need to do something else?

I’m pretty new to coding I was just trying to edit my existing .css because I am very unfamiliar with implementing jQuery in my template. All I see on these demos/tutorials I find are 3 things to edit HTML, .CSS and jQuery but have yet to find the place to actually place this coding. I thought jQuery was automatically in the new WordPress and all the articles and tutorials I’m finding on this topic seem very dated.

https://www.tyssendesign.com.au/shed/examples/animated-nav.htm

https://www.tyssendesign.com.au/articles/css/animated-navigation-items-using-jquery/

^This is the exact effect I want

Is there a decent walk-through or any basic tips that may come up regarding installation on WordPress?

Do you have an example? Are you sure it’s a fade effect? I’ve got the color change but I’d like the soft fade effect. I don’t know what exactly I’d be changing because my menu .css coding is so long…

/* begin Menu */
/* menu structure */

.art-hmenu a, .art-hmenu a:link, .art-hmenu a:visited, .art-hmenu a:hover
{
    outline: none;
}

.art-hmenu, .art-hmenu ul
{
  margin: 0;
  padding: 0;
  border: 0;
  list-style-type: none;
  display: block;
}

.art-hmenu li
{
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
  float: left;
  position: relative;
  z-index: 5;
  background: none;
}

.art-hmenu li:hover
{
  z-index: 10000;
  white-space: normal;
}

.art-hmenu li li
{
  float: none;
}

.art-hmenu ul
{
  visibility: hidden;
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
  background: none;
  min-height: 0;
  background-image: url('images/spacer.gif');
  padding: 10px 30px 30px 30px;
  margin: -10px 0 0 -30px;
}

.art-hmenu li:hover>ul
{
  visibility: visible;
  top: 100%;
}

.art-hmenu li li:hover>ul
{
  top: 0;
  left: 100%;
}

.art-hmenu:after, .art-hmenu ul:after
{
  content: ".";
  height: 0;
  display: block;
  visibility: hidden;
  overflow: hidden;
  clear: both;
}
.art-hmenu{
  min-height: 0;
  position:relative;
  padding: 2px 0 0 0;
}

.art-hmenu ul ul
{
  padding: 30px 30px 30px 10px;
  margin: -30px 0 0 -10px;
}

/* menu structure */

.art-nav
{
   position: relative;
  margin:0 auto;
  min-height: 34px;
  z-index: 100;
    margin-top: 0;
    margin-bottom: 0;
}

.art-nav-outer
{
    position:absolute;
    width:100%;
}

.art-nav-l, .art-nav-r
{
  position: absolute;
  z-index: -1;
  top: 0;
  height: 100%;
  background-image: url('images/nav.png');
}

.art-nav-l
{
  left: 0;
  right: 5px;
}

.art-nav-r
{
  right: 0;
  width: 1045px;
  clip: rect(auto, auto, auto, 1040px);
}

/* end Menu */

/* begin MenuItem */
.art-hmenu a
{
  position: relative;
  display: block;
  overflow: hidden;
  height: 32px;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}

.art-hmenu ul li
{
    margin:0;
    clear: both;
}

.art-hmenu a .r, .art-hmenu a .l
{
  position: absolute;
  display: block;
  top: 0;
  z-index: -1;
  height: 106px;
  background-image: url('images/menuitem.png');
}

.art-hmenu a .l
{
  left: 0;
  right: 4px;
}

.art-hmenu a .r
{
  width: 408px;
  right: 0;
  clip: rect(auto, auto, auto, 404px);
}

.art-hmenu a .t, .art-hmenu ul a, .art-hmenu a:link, .art-hmenu a:visited, .art-hmenu a:hover
{
  text-align: left;
  text-decoration: none;
}

.art-hmenu a .t
{
  color: #0E0902;
  padding: 0 9px;
  margin: 0 4px;
  line-height: 32px;
  text-align: center;
}

.art-hmenu a:hover .l, .art-hmenu a:hover .r
{
  top: -37px;
}

.art-hmenu li:hover>a .l, .art-hmenu li:hover>a .r
{
  top: -37px;
}

.art-hmenu li:hover a .l, .art-hmenu li:hover a .r
{
  top: -37px;
}
.art-hmenu a:hover .t
{
  color: #000000;
}

.art-hmenu li:hover a .t
{
  color: #000000;
}

.art-hmenu li:hover>a .t
{
  color: #000000;
}

.art-hmenu a.active .l, .art-hmenu a.active .r
{
  top: -74px;
}

.art-hmenu a.active .t
{
  color: #F5D7A8;
}
/* end MenuItem */

/* begin MenuSeparator */
.art-hmenu .art-hmenu-li-separator
{
  display: block;
  width: 0;
  height:32px;
}
/* end MenuSeparator */

/* begin MenuSubItem */
.art-hmenu ul a
{
  display: block;
  white-space: nowrap;
  height: 32px;
  width: 180px;
  overflow: hidden;
  background-image: url('images/subitem.png');
  background-position: left top;
  background-repeat: repeat-x;
  border-width: 1px;
  border-style: solid;
  border-color: #F6AC2C;
  text-align: left;
  text-indent: 12px;
  text-decoration: none;
  line-height: 32px;
  color: #F7B84A;
  font-size: 13px;
  margin:0;
  padding:0;
}

.art-nav ul.art-hmenu ul span, .art-nav ul.art-hmenu ul span span
{
  display: inline;
  float: none;
  margin: inherit;
  padding: inherit;
  background-image: none;
  text-align: inherit;
  text-decoration: inherit;
}

.art-hmenu ul a:link, .art-hmenu ul a:visited, .art-hmenu ul a:hover, .art-hmenu ul a:active, .art-nav ul.art-hmenu ul span, .art-nav ul.art-hmenu ul span span
{
  text-align: left;
  text-indent: 12px;
  text-decoration: none;
  line-height: 32px;
  color: #F7B84A;
  font-size: 13px;
  margin:0;
  padding:0;
}

.art-hmenu ul li a:hover
{
  color: #000000;
  border-color: #F9C367;
  background-position: 0 -32px;
}

.art-hmenu ul li:hover>a
{
  color: #000000;
  border-color: #F9C367;
  background-position: 0 -32px;
}

.art-nav .art-hmenu ul li a:hover span, .art-nav .art-hmenu ul li a:hover span span
{
  color: #000000;
}

.art-nav .art-hmenu ul li:hover>a span, .art-nav .art-hmenu ul li:hover>a span span
{
  color: #000000;
}

/* end MenuSubItem */

I appreciate the response Chris

I tried putting
<?php if(function_exists('kc_add_social_share')) kc_add_social_share(); ?>
in my header.php and got the icons to show up at the top but don’t want it to be above the actual header image I’d like it to be inside of it or right below it. There’s got to be a way to do it I just don’t know what or where to enter to get it in the right spot.

OK cool, just making sure that was all. I truly appreciate everything. Have a great weekend!

Yes I do have it displayed in a widget but don’t see the code anywhere in Widgets > Appearence if that’s what you mean. The .css files don’t have any of the shortcode.

I can’t find the shortcode or template tag for the widget anywhere in my Theme templates. Is it in the actual custom stylesheet where I need to find it?

Awesome looks about perfect. Do you mean I should change the name of the slideshow to match its slug? I was also wondering what I need to alter in the code the change the shade of black/gray of the actual shadow i can’t seem to quite get it. Anyways I really appreciate everything man.

OK can’t get anything to show up with corners, shadows/borders. I added the following code to the custom style-sheet I copied into my themes directory. Does the actual Plugin css file need to be deleted after it is copied into my theme?

.meteor-slides .shadow {
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
border: solid 3px #000;
margin: 15;
overflow: hidden;
padding: 15;
position: relative;
z-index: 1;
}

ok 70 looks great and it went through…

ok oddly, when i put it on 85px it works after refreshing, but then when i try to decrease to around 60-45 it disappears entirely…? Sorry for splitting hairs but just trying to do it right, I really appreciate your help