CSS to change color and font size of price

rr007 said 2 years ago:

After months of work setting up my website (it’s not live yet), I’m down to the nitty gritty and finding out that the product style page I selected with 1 large and 4 thumbnail images has a GIGANTIC red, of all things, price!! I am absolutely mortified, as my website is very sophisticated and I would NEVER want the price to be so prominent, and certainly not red.

Can anyone tell me what syntax I could use to change the size and color using CSS? This is a deal breaker for me–I can’t believe someone would have designed it this way.

chrisg said 2 years ago:

@rr007,

Since your site is not live currently, could you provide the specific template you are using for your Quick Shopping Cart site pages?

Christopher G.

chrisg said 2 years ago:

@rr007,

Actually, I have just come across some information thanks to the help from our development team.

You will want to add the following to your advanced CSS in order to override the list price, sale price, adjusted price (when using options with price adjustments), and tiered pricing:

Navigate to “Setup -> Advanced CSS”

/** COPY BELOW THIS LINE **/

.product-page .product-detail .price {
font-size:12pt;
color:black;
}

/** COPY ABOVE THIS LINE **/

To adjust other aspects of the font, see this website:

http://www.w3schools.com/css/css_font.asp

Christopher G.

gb29 said 1 year, 6 months ago:

This was extremely helpful as I was seeking the EXACT same thing.

Thank you.

Is there a way to change the image size of the category thumbnails (TOP LIST Images) that appear on the homepage?

chrisg said 1 year, 6 months ago:

@gb29,

Glad this helped out.

As for your thumbnail images, it is possible to alter the sizes through custom CSS as well. However, this may not work well for your purposes. The actual thumbnail images are sized, so even if you managed to increase them via CSS, it can potentially make your images look grainy (blowing up a little image).

It is usually better to select a new category layout that features larger thumbnails.

Selecting Category Pages in Quick Shopping Cart

Christopher G.

gb29 said 1 year, 6 months ago:

Okay, thank you for responding. I can manage with the images as they are.

Is there a way however to remove the underlining from the hyperlinks? I saw some where online that the following could be use:
a:link {
color:#980849;
text-decoration:underline;
}

However even after I save this in Advanced CSS, nothing changes… should I be pasting this coding somewhere else?

Thanks, GB

chrisg said 1 year, 6 months ago:

@gb29,

The code you provided is typical CSS coding that would be applied through the Advanced CSS section.

Is your Quick Shopping Cart site live? If it is, could you provide the domain name so we can take a closer look and advise how the code may need to be modified to remove the underline on your links?

Christopher G.

gb29 said 1 year, 6 months ago:

Yes the site is live. You mentioned making changes to the CSS, where would I see the default. Initially when I clicked in Advanced CSS there was a blank slate.

My site is shop.gwenbeloti.com The footer links and all hyperlinks have the underline that I’d like to remove…

Thanks

Nate D said 1 year, 6 months ago:

@gb29 – Changing the text-decoration value to none in your CSS code should remove the underlines for links.

text-decoration: none;

gb29 said 1 year, 6 months ago:

Yes that did the trick thank you. I appreciate it as I am a novice to a lot of this. After a good amount of research I’m usually able to figure these things out.

I’m wondering if it’s possible to move the border line in the footer to below the links instead of above?

If not that isn’t so much of a big deal.
My goal is to make my shop look as close to my website http://www.gwenbeloti.com as possible, with regards to the header and footer, and some of the body content.

Where can I find the CSS default coding? There are some other things I’d like to change.

Thanks again.

Nate D said 1 year, 6 months ago:

@gb29 – Okay, I see… This should make your shop footer closely match that of your main site…

For the line to match you’ll need to add this line to the HTML for your Copyright area, add as the first line before the copyright notice:

<img width="950" height="1" src="http://www.gwenbeloti.com/topunderline.jpg&quot; alt="" /><br />

Add this code to the custom CSS area of Quick Shopping Cart:
.navigation2 a {
color: #999999;
font-family: "Arial Narrow";
font-size: 16px;
padding: 0 4px;
}
.sf_region9 {
border-top: medium none;
}

.qsc-site-company-copyright {
color: #999999;
font-family: "Arial Narrow";
font-size: x-small;
}
.sf_footer {
clear: both;
color: #555555;
font-size: 11px;
padding: 20px 0;
}

Nate D said 1 year, 6 months ago:

Again the Community alters the code when it should not. Let’s see if it will let this through:

<img width="950" height="1" src="http://www.gwenbeloti.com/topunderline.jpg&quot; alt="" /><br />

Nate D said 1 year, 6 months ago:

Gosh this Community sux sometimes, huh…

<img width="950" height="1" src="http://www.gwenbeloti.com/topunderline.jpg" alt="" /><br />

gb29 said 1 year, 6 months ago:

I also noticed, that in explorer, the underlining still shows but after the link is clicked… I guess there is no way to adjust this across all browsers?

In firefox that underlining doesn’t show at ell.. Firefox also doesn’t show my correct font….

Nate D said 1 year, 6 months ago:

Apparently there is a known bug in Firefox with the specific Arial fonts (Arial works, but Arial Bold & Narrow have issues), but there is a work around. With the following code IE will see “Arial Narrow” while Firefox would use Arial +condensed resulting in the same font. I was unable to duplicate the issue with the links being underlined, but if you specify the different phases of the link it should fix this.

You can remove this part of the previous code:
.navigation2 a {
color: #999999;
font-family: "Arial Narrow";
font-size: 16px;
padding: 0 4px;
}

Then replace with this new code:
.navigation2 a, .navigation2 a:link, .navigation2 a:visited, .navigation2 a:hover, .navigation2 a:active {
color: #999999;
font-family: "Arial Narrow", Arial;
font-stretch: condensed;
font-size: 16px;
padding: 0 4px;
}