Page 1 of 1
how to change font type, color , size
Posted: Fri Nov 10, 2017 5:28 am
by aljaadi.akram
Dear Gents,
how to change font type, size and color of product name on product page.
Re: how to change font type, color , size
Posted: Fri Nov 10, 2017 7:44 am
by pom
The product title on product pages is just an <h1> element.
It's size and colour are set in catalog/view/theme/YOURTHEME/stylesheet/stylesheet.css
The h1 font family seems to be set in bootstrap and set to inherit.
catalog/view/javascript/bootstrap/css/bootstrap.min.css
You could add a class to the element in catalog/view/theme/YOURTHEME/template/product/product.twig and place an overriding class in stylesheet.css
Re: how to change font type, color , size
Posted: Fri Nov 10, 2017 6:46 pm
by aljaadi.akram
Thank you for your reply.... really i got confusion please support me
see for example attached picture i want to change product name Chemex coffee maker - 3 cups .
https://drive.google.com/open?id=1WGgoL ... aLJkZsggu2
i tried to change color on this path public_html/catalog/view/theme/default/stylesheet
this is the orgial code from line 8-11
}
h1, h2, h3, h4, h5, h6 {
color: #444;
}
Then i change it to
}
h2, h3, h4, h5, h6 {
color: #444;
}
}
h1 {
color: #3c798b;
}
after that i cleared Cache and refreshed extension form admin page but nothing has been changed.
Re: how to change font type, color , size
Posted: Sat Nov 11, 2017 1:35 am
by pom
Try clearing your browsers cache as well as the opencart cache if you haven't already.
If you're just developing the site it's easiest to switch the cache off completely in the cog icon in top right of the dashbpard page.
Also, if you use your browser's developer tools it will tell you exactly what css is being used and which files and lines they are. Plus you can live edit in the dev tools to test out things without breaking your site.
Press f12 or right click an element and select "inspect" or "inspect element".
Re: how to change font type, color , size
Posted: Sat Nov 11, 2017 3:15 am
by aljaadi.akram
Thank you for your support. color issue has been fixed.
for font-family i have to langues Arabic and English and i want change font family for Arabic only. can you give me the correct code in the path u mention below ??
The h1 font family seems to be set in bootstrap and set to inherit.
catalog/view/javascript/bootstrap/css/bootstrap.min.css
You could add a class to the element in catalog/view/theme/YOURTHEME/template/product/product.twig and place an overriding class in stylesheet.css
Re: how to change font type, color , size
Posted: Sat Nov 11, 2017 3:39 am
by pom
Changing the bootstrap css would change the font for both languages.
I'm not sure how to change the font for just one language. It would need custom code somewhere.
Re: how to change font type, color , size
Posted: Sat Nov 11, 2017 3:47 am
by aljaadi.akram
Dear Experts,
can anyone support me how to change font-family for product title for one langue only ?