[rodeboy]

rodeboy

#9232

On the home page of http://www.mattfurness.co.uk I have some padding around the main image. This is principally for the desktop version. Is there a way to code things so that the padding does not apply to mobile version in Graphene Mobile NEO?

Hope that’s clear!

Many thanks,

Chris

[Kenneth John Odle]

Kenneth John Odle

#43065

You can create a child theme for Neo and apply the changes to the CSS there.

All of my websites, whether desktop or mobile, always start with a child theme. It is the solution to many problems.

[Syahir Hakim]

Syahir Hakim

#43066

You can also use the Custom CSS feature in GM Neo Options page. Any CSS codes inserted there will only be applied when Neo is being used.

[rodeboy]

rodeboy

#43067

Thanks Kenneth and Syahir for your time.

So Syahir you are saying that I can remove the inline padding coding and put something into the main Graphene Custom CSS to pad the image. Or is it better to leave the inline coding and remove the padding instruction within the Neo Custom CSS.

Could I ask on this occasion that you provide me with the specific best coding for my image please? I’m still learning how to utilise the vast info available within firebug to transfer this to coding on the site!

Sorry to take up more of your time. It is greatly appreciated.

Chris

[Syahir Hakim]

Syahir Hakim

#43068

Better to remove the inline padding and only add using Graphene’s Custom CSS feature. This CSS code would do:

.home .wp-image-126 {

padding: 0 80px;

}

[rodeboy]

rodeboy

#43069

Works a treat Syahir, you’re a star as always!

Many thanks, Chris

[rodeboy]

rodeboy

#43070

Sorry to re-open this one Syahir, but it is regarding the same site if that’s okay, which I have nearly completed.

I would like to have an image appear on hover over the main nav bar items. The site is (deliberately) simple but this would give it a little more movement I believe.

I have tried the following which did not work. The image is just one I have loaded up and can obviously change as necessary. Similarly I have just practised on the ‘Biography’ page, which I can change for each of the pages in the nav bar.

#header-menu > li.page-item-108:hover > a {

background: url(http://www.mattfurness.co.uk/wp-content/uploads/2014/08/Matt-in-the-studio-2. jpg) no-repeat !important;

}

I think I’m going in the right direction, but obviously not there yet!

Thanks as always,

Chris

[Syahir Hakim]

Syahir Hakim

#43071

Try this:

#header-menu > li#menu-item-108:hover > a {

background: url(http://www.mattfurness.co.uk/wp-content/uploads/2014/08/Matt-in-the-studio-2.jpg) no-repeat !important;

}

That image is pretty big for that space though.

[rodeboy]

rodeboy

#43072

Thank you Syahir. I accept what you say about that particular image. I can re-size and change url’s as required, no problem.

What I was thinking more of (and I’m sorry I didn’t make it clear) was for a panel to open underneath the menu item, on hover with the image shown, rather than just within the menu box – rather like a secondary menu but just the image. I guess I’m going down the wrong road with “background” reference. Can this be done or am I looking at a plugin to acheive this? If so, any recommendations?

By the way, I’m quietly pleased that my attempt at the coding was fairly close. Just one word out – I’m getting there slowly (with your help!)

Chris

[rodeboy]

rodeboy

#43073

Syahir, I have created something that gives the home page a little action using the Menu Image plugin. So don’t worry with this now.

Thanks for your time,

Chris