Image Padding in NEO

  • rodeboy


    On the home page of 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,



    Kenneth John Odle


    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


    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.



    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.



    Syahir Hakim


    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;



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

    Many thanks, Chris



    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 > > a {
    background: url( jpg) no-repeat !important;

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

    Thanks as always,



    Syahir Hakim


    Try this:

    #header-menu > li#menu-item-108:hover > a {
    background: url( no-repeat !important;

    That image is pretty big for that space though.



    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!)




    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,


Viewing 10 posts - 1 through 10 (of 10 total)

  • You must be logged in to reply to this topic.