Changing some of the Button's Colors

[surrfman]

With 2.3.1 and J-query is it possible to change the color on just some buttons? I have the left column full of buttons matching the color of buttons found on other pages withing the store. I'd like to keep the left column the color they currently display, while changing the various buttons on other pages deeper into store. Also see there is a newer version of jquery. Would it be preudent to upgrade from my current version, or just too much trouble on a modified store? Where does one find the code to change a button's size?

 

Thanks a bunch,

 

Timmy C

[multimixer]

You can take a look here , topic is about modifying the "add to cart" button on the product info page.

 

You can do the same with all buttons in the left column, you can target them in your css as #columnLeft button{...... or be more specific as needed.

[surrfman]

I think I understand.. will do the research letr this evening. Had a huge load of stuff dumped in my lap today!

 

Thanks a bunch,

 

Timmy C

[Guest]

Hi George,

 

You probably don't know, but you've been very helpful today! You just happened to be the one posting all the answers I was looking for. Now, at the end of my day, I find you here again, when I'm looking for the exact place where the tag for ColumnLeft is. I created a new tag for just the headings of boxes on left column, and I want to find the right place to add the tag--I have tried the bm language files but had no luck.

 

Could you direct me to where these tags would be?

 

Thanks a lot!

Verónica

[multimixer]

Veronica,

 

No, I didn't know that, but glad to hear :)

 

It is not very clear what you mean with your question about where to place the "tag for columnLeft"

 

"columnLeft", same as "columnRight" are css ids, each one applied to a <div> that wrap the whole left (or right) column. This happens in file includes/template_bottom.php and look like this

<div id="columnLeft" class="grid_<?php echo $oscTemplate->getGridColumnWidth(); ?> pull_<?php echo $oscTemplate->getGridContentWidth(); ?>">

 

There is nothing to do from this side, all you need to do is to go to your stylesheet.css file and start targeting elements within the left (or right) column using that ids eg

 

#columnLeft .ui-widget-header{..... will target all ui-widget-header classes (used for infobox headings) within column left

#columnLeft .ui-widget-content{ will do the same with infobox contents, since they all have class ui-widget-content attached etc

 

You can post that rules anywhere into your stylesheet.css file, just keep in mind that the latest rule goes over the previous, that's why it's called "Cascading Style Sheet"

 

I don't know exactly what you want to do, if above is not clear, then maybe you can explain a bit more?

[burt]

You can also still use the old style buttons as 2.2 has it in 2.3.1.

 

A typical example would be if you wanted some big graphical button on the product_info page instead of the small javascript made button.

[Guest]

Thank you, both!!!

I created a NEW rule for just the headings of boxes in the left column. I think knowing where the rule is applied helps, as I will add my new rule. I'll find out next...

(If you're interested, this is what's happening: I want my a:hover to be red on links on the columns (which it is) but I do not like it to be red on title, since the background is blue (I want it yellow, which would not work on the white bg for the other links.)

 

THANKS!

[multimixer]

Now I can't understand what you mean with "where the rule is applied".

 

There are 2 "parts" of the story, the html and the css, second is used to style the first, it uses for this various selectors

 

What I understood you need is following: In left column, the links in hover state to be

- yellow if link is in infobox heading

- red if the link is in infobox content

 

To do so, add following to the bottom of your stylesheet.css file

#columnLeft .ui-widget-header a:hover{color:#00ff00}
#columnLeft .ui-widget-content a:hover{color:#ff0000}

[Guest]

This is great, George! I was aware of how to use CSS on HTML, which was why I wanted to call the right rule from the CSS.

 

I would have never thought of using the ui-widget function, though! THANKS!!!! Always fun to learn something new. :-)

[Guest]

It did not work. Sorry.

I originally had added

#columnLeft a:hover {
 color: #d71921;
}

so the left column would work as I wanted (I do have a different color for a:hover everywhere else)

 

And even after replacing this bit of coding with the ui widget coding you suggest, it is not working.

 

I was thinking that something else in my CSS would be overwriting the header coding, but then that would mean that my other "a:hover" function for just the left column shouldn't work either.

 

I'll be looking into it, but if you have an idea of why I'm not able to change the header only, let me know.

 

THANKS SO MUCH!

Verónica

 

PS FYI, I do have a pretty modified shop... one of the last things I was doing was changing it to be fluid with your great blog instructions!

[multimixer]

Veronica,

 

I'm sorry, but what I posted above is working, unless of course, you are right, there os some other rule overwriting this.

 

You could try to add a !important to the rule, I don't know.

 

Could you post or pm your sites url? It's hard to guess without seeing the site (+ also courious to see what you do with my "instructions :) )