Return to Support

Image Padding in NEO

Home Forums Graphene Mobile Neo Support Image Padding in NEO

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #9232
    rodeboy
    Participant

    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

    #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.

    #43066
    Syahir Hakim
    Keymaster

    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.

    #43067
    rodeboy
    Participant

    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

    #43068
    Syahir Hakim
    Keymaster

    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;
    }

    #43069
    rodeboy
    Participant

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

    Many thanks, Chris

    #43070
    rodeboy
    Participant

    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

    #43071
    Syahir Hakim
    Keymaster

    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.

    #43072
    rodeboy
    Participant

    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

    #43073
    rodeboy
    Participant

    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

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

You must be logged in to reply to this topic.