New to the community? Start here

Custom Styles Sheets Overruled by local? Styles? and links broken under Shopping Cart Pictograms

Hi everyone,

I am very new to all this, just done two courses on html and css and I am not diving into the wonderful world of wordpress.

I am trying to create a site with a framemarket/gridmarket theme, marketpress is running the background, and I am quite successful in styling headers, footers, branding, buttons etc.

I sometimes do run into problems though, and I don’t know where to find the style for a certain element (a button) or how to untangle the deep hierachies of buttons/links/toggles/open/close for the shopping cart symbol as an example.

1)The buttons: a.my_link_buynow, another one is input.mp_button_addcart.

If I style these in the custom.css, there are still some attributes that seem to get set somewhere else, like background and border for instance. According to “firebug” they are set in “/store/products” (http://localhost/store/products) … but what kind of file is that? Or does that mean that they inherit these attributes globally? I just seem to be able to find where they are set.

2) The other exchange is exchanging the shopping cart for a little pictogram. When I put in the url( …:wink: and do the text-indent of -9999em, it’s all fine (done in custom.css again). I can do the …:hover too to highlight the button, but the links underneath are gone and I lose the “view cart” and “hide cart” functionality unless I leave the text-indent off. Then the text gets somewhat squeezed on top of the pictogram, it works, but looks naff.

I would be very grateful for any help with this … and I am sure lots more in the future.

Thanks for your help

Jacques.

Fri, 10 Aug 2012 17:45:49
  • jacquesc75
    • Flash Drive

    … I should add, this is all running under MAMP with wordpress installed locally after initially doing this via hostgator. The local installation and export/import of the database went all fine.

    I am not sure if this info is needed.

    Thanks again.

    J.

  • jacquesc75
    • Flash Drive

    … I have since discovered where the colour for those buttons lives, it is also the default colour for pulldown menues, other buttons like search etc.

    It is infact the “Pick a main color” in gridmarket’s “Theme specific styling” under Appearance/ThemeOptions.

    I am still in the dark as to where I can change these other than in the “Theme specific styling” where they get set in bulk. Not really what I am after.

  • Mason
    • DEV MAN’s Sidekick

    Hiya @jacquesc75,

    Welcome to WPMU DEV! Always glad to meet someone new diving right in :slight_smile:

    According to “firebug” they are set in “/store/products” (http://localhost/store/products) … but what kind of file is that? Or does that mean that they inherit these attributes globally? I just seem to be able to find where they are set.

    Looks like you’ve figured this one out. Theme options are embedded at the top of each page so they are actually loaded after custom.css

    If for some reason you needed to override that you’d want to use the !important property in your CSS.

    On your #2 question in your original post, ya lost me. Since your’e working locally, some annotated screenshots and the code you’re currently using would be helpful in assist on that.

    Thanks!

  • jacquesc75
    • Flash Drive

    Hi again,

    sorry it has taken so long, but other things took priority.

    I can include some simple .css code that I have used to turn the "view cart" into a little pictogram rather than using text, I can also include some screenshots, I hope.

    When marketpress comes out of the box, the functionality of view-cart and hide-cart is under a little box with those names. I wanted to change the view-cart text to a shopping cart pictogram, but retain the functionality of opening a panel and viewing the cart etc. So far I have only used custom.css to add this (I believe ID mp_cartsmall are those ID under the little texts):

    #mp-cartsmall {

    background: url(/wp-content/assets/shopping-cart.png) no-repeat scroll;

    float: right;

    /* text-indent: -9999em; this is commented out for the first 2 scrn-shots, I switched it on for the last one */

    width: 48px;

    height: 47px;

    }

    #mp-cartsmall:hover {

    background: url(/wp-content/assets/shopping-cart-inv.png) no-repeat scroll;

    width: 48px;

    height: 47px;

    }

    Screen shots are below (I hope):

    Let me know if this clarifies things a bit.

    [attachments are only viewable by logged-in members] [attachments are only viewable by logged-in members] [attachments are only viewable by logged-in members]

  • jacquesc75
    • Flash Drive

    Hi Timorthy,

    yes, the image-size is too small at the moment to show “view cart” other than wrapped. It’s the size of the pictogram. But I do indeed want to get rid of the text altogether, maybe make it appear when I hover (I suppose that’ the easy bit, because it just needs to be burned into the shopping-cart-inv.png)

    I am just wondering why I HAVE TO SEE the text in order to retain the functionality. When I do the text-indent to push it off the screen, the functionality also disappears.

    Thanks again

    Jacques

    P.S. Is there more I can send you, files etc?

  • jacquesc75
    • Flash Drive

    Hi Timothy,

    I managed to find out what it was. I had simply replaced the wrong id with the images, once I dived down one further level and swapped the text of the toggle switches with the pictograms, it was working fine.

    Thanks for all the help.

    jacquesc75.