Joomla Templates Club 406,261 posts

[hjalte1983 Friend hjalte1983Join date: September 2012Posts: 328Downloads:7Uploads:105 Thanks: 101 Thanked: 9 times in 1 posts]

#199645

Hi, I want to change the font size and color of price-new , price-old and the discount
But its like they are all combined in the stylesheet.

I want the price old to be smaller than price new, and make price new another color.

Regards.

---

Attachments:

1. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#542162

So that we can try to best assist you, please provide the url of the site you’re working on,
as well set “Optimize CSS’ to “No” within your Template Manager–General settinges

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#542168

I received your site info … but where can one view the issue you are describing?

Any particular product?

[hjalte1983 Friend hjalte1983Join date: September 2012Posts: 328Downloads:7Uploads:105 Thanks: 101 Thanked: 9 times in 1 posts]

#542197

all products that are on sale, ( special ).

see under outlet

[hjalte1983 Friend hjalte1983Join date: September 2012Posts: 328Downloads:7Uploads:105 Thanks: 101 Thanked: 9 times in 1 posts]

#542313

Hey @tomc do you get what i’m asking or should i elaborate?

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#542325

I believe I understand what you’re trying to accomplish.

Try This . . . . .

STEP ONE:
Within file path —> /components/com_mijoshop/opencart/catalog/view/theme/decor/stylesheet/stylesheet.css
at line 806, remove the “color” property – as follows:


.product-info .price span {
display: block;
}

STEP TWO:
Within file path —> /components/com_mijoshop/opencart/catalog/view/theme/default/stylesheet/stylesheet.css
at line 2109, modify the follwoing CSS rule as follows:


.product-info .price-old {
color: #000
text-decoration: line-through;
}

NOTE: The color black (i.e. #000) is used only as an example.
You can modify to whatever color code you wish.

STEP THREE:
Within file path –> /components/com_mijoshop/opencart/catalog/view/theme/decor/stylesheet/stylesheet.css
at line 30, modify the “color” property to whatever color code you wish:


.price-new {
color: #f0141e
font-family: 'Muli',serif;
font-size: 14px;
font-weight: normal;
}

You can also add other CSS styling to the prices as desired (i.e. bold, size, italic, etc.)

Hope That Helps.

😎

[hjalte1983 Friend hjalte1983Join date: September 2012Posts: 328Downloads:7Uploads:105 Thanks: 101 Thanked: 9 times in 1 posts]

#542374

Hey @tomc yeah helps some, I actually tried some of that, but having trouble getting the price new font size to work.

i changed it to

.price-new {
color: #f0141e;
font-family: 'Muli',serif;
font-size: 35px;
font-weight: normal;
}

I also tried to use font-size: 250% without luck.

Thanks again

[hjalte1983 Friend hjalte1983Join date: September 2012Posts: 328Downloads:7Uploads:105 Thanks: 101 Thanked: 9 times in 1 posts]

#542376

Can you also help me with this margin / border, has been bugging me for a week now..

Would like to have the categories closer to the top products.. so there isnt that much white empty space.

But havn’t been able to find the right code.

---

Attachments:

1. 

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#542399

Open templates/ja_decor/css/custom.css file and add css style below.

.ja-product-grid {
margin-bottom: -60px;
}

It will help decreases empty space in products

1 user says Thank You to Ninja Lead for this useful post

1. hjalte1983

[hjalte1983 Friend hjalte1983Join date: September 2012Posts: 328Downloads:7Uploads:105 Thanks: 101 Thanked: 9 times in 1 posts]

#542575

Thanks Again @ninja Lead could you or @tomc help me with this font-size ? it just wont show as 35px

<em>@hjalte1983 436724 wrote:</em><blockquote>Hey @tomc yeah helps some, I actually tried some of that, but having trouble getting the price new font size to work.

i changed it to

.price-new {
color: #f0141e;
font-family: 'Muli',serif;
font-size: 35px;
font-weight: normal;
}

I also tried to use font-size: 250% without luck.

Thanks again</blockquote>

Ah i just noticed where it changed.

So where can i find the price new inside the product ?

---

Attachments:

1. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#542596

Here’s what you do . . . . . .

Within file path —> /components/com_mijoshop/opencart/catalog/view/theme/decor/stylesheet/stylesheet.css
at line 16, remove all references to “price-new” within the CSS rule.


.box-product .price, .box-product .price-new, .product-grid .price, .product-grid .price-new, .product-info .price, .product-info .price-new, .ja-product-grid .price, .ja-product-grid .price-new {
color: #f0141e
font-family: 'Muli',serif;
font-size: 14px;
font-weight: normal;
}

It should look like this when you’re done:


.box-product .price, .product-grid .price, .product-info .price, .ja-product-grid .price {
color: #f0141e
font-family: 'Muli',serif;
font-size: 14px;
font-weight: normal;
}

THEN, at line 30, modify the “font-size” property to your liking:


.price-new {
color: #f0141e
font-family: 'Muli',serif;
font-size: 12px;
font-weight: normal;
}

Hope That Helps 😎

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#542606

By the way . . . . .

If you want to better control the font styling for individual “price-new” elements throughout your site, you can simply add the classes you deleted from the original CSS rule (above) and add them individually within the same stylesheet.css – for example:


.box-product .price-new {
color: #f0141e
font-family: 'Muli',serif;
font-size: 12px;
font-weight: normal;
}

.product-grid .price-new {
color: #f0141e
font-family: 'Muli',serif;
font-size: 12px;
font-weight: normal;
}

.product-info .price-new {
color: #f0141e
font-family: 'Muli',serif;
font-size: 12px;
font-weight: normal;
}

.ja-product-grid .price-new {
color: #f0141e
font-family: 'Muli',serif;
font-size: 12px;
font-weight: normal;
}

. . . . and then modify each class as you would like (i.e. font, size, color, weight)

Make Sense? 🙂

1 user says Thank You to TomC for this useful post

1. hjalte1983

[hjalte1983 Friend hjalte1983Join date: September 2012Posts: 328Downloads:7Uploads:105 Thanks: 101 Thanked: 9 times in 1 posts]

#542748

yes makes sense, thanks Tom

[hjalte1983 Friend hjalte1983Join date: September 2012Posts: 328Downloads:7Uploads:105 Thanks: 101 Thanked: 9 times in 1 posts]

#547707

<em>@Ninja Lead 436755 wrote:</em><blockquote>Open templates/ja_decor/css/custom.css file and add css style below.

.ja-product-grid {
margin-bottom: -60px;
}

It will help decreases empty space in products</blockquote>

@ninja Lead i’ve been working back and forth with the margins, and its now set to -150 which look good in top.
But i’m having trouble at the bottom:

Also when going responsive it look like this:

Can you help me out,

Regards.

---

Attachments:

1. 
2. 

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#547803

You can try to use the solution below

Open templates/ja_decor/css/custom.css file

find and change

.ja-product-grid {

margin-bottom: -150px;

}

To

.box_oc .featuredproducts > .ja-product-grid {

margin-bottom: -150px;

}

Let me know if it helps

[Author]

Posts