23 points
Community rank #2628
jacquesc75
SophomoreJust Getting Started
MemberLikes (0)
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( ...) 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.
23 pointsCommunity rank #2628SophomoreJust Getting Started
Member
(joined June 2012)
Likes (0)
... 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.
23 pointsCommunity rank #2628SophomoreJust Getting Started
Member
(joined June 2012)
Likes (0)
... 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.
11696 pointsCommunity rank #2Supreme DeityTrue DEVianLifetime member
Member
(joined April 2009)
Likes (0)
Hiya @jacquesc75,
Welcome to WPMU DEV! Always glad to meet someone new diving right in :)
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.
23 pointsCommunity rank #2628SophomoreJust Getting Started
Member
(joined June 2012)
Likes (0)
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;
}
18998 pointsCommunity rank #1Supreme DeityWPMU DEV StaffLifetime member
Support Chimp
(joined March 2010)
Likes (0)
Those first two images looks like maybe the width is not enough so the words warp onto a new line. But you're trying to get rid of that to just have the graphic?
23 pointsCommunity rank #2628SophomoreJust Getting Started
Member
(joined June 2012)
Likes (0)
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.
23 pointsCommunity rank #2628SophomoreJust Getting Started
Member
(joined June 2012)
Likes (0)
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.
Responses (10)
Member (joined June 2012) Likes (0)
... 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.
Member (joined June 2012) Likes (0)
... 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.
Member (joined April 2009) Likes (0)
Hiya @jacquesc75,
Welcome to WPMU DEV! Always glad to meet someone new diving right in :)
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!
Support Chimp (joined March 2010) Likes (0)
Hey there, just checking in to see how things are going?
If you need any further help then please feel free to reopen the thread or create a new one as needed.
Take care and have a great day/evening.
Member (joined June 2012) Likes (0)
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.
Support Chimp (joined March 2010) Likes (0)
Those first two images looks like maybe the width is not enough so the words warp onto a new line. But you're trying to get rid of that to just have the graphic?
I guess I still don't fully understand perhaps?
Thanks.
Member (joined June 2012) Likes (0)
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?
Support Chimp (joined March 2010) Likes (0)
Any chance you can get a quick online version for us to look at, or make your localhost accessible?
That way we can see whats happen and why something does or does not work perhaps.
Thanks.
Member (joined June 2012) Likes (0)
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.
Support Chimp (joined March 2010) Likes (0)
Excellent, glad you have this one sorted and thanks for updating me! :)
Take care.
Become a member