Magento 2 : How reduce size of fotoroma gallery icons on product detail page
I would like to reduce size of following icons appearing on detail page, enabled native fotoroma widget.
1. Fotoroma plus icon and minus icon
2. Fotoroma close icon
<var name="magnifier">
<var name="fullscreenzoom">5</var> <!-- Zoom for fullscreen (integer)-->
<var name="top">5</var> <!-- Top position of magnifier -->
<var name="left">780</var> <!-- Left position of magnifier -->
<var name="width">200</var> <!-- Width of magnifier block -->
<var name="height">200</var> <!-- Height of magnifier block -->
<var name="eventType">hover</var> <!-- Action that atcivates zoom (hover/click) -->
<var name="enabled">false</var> <!-- Turn on/off magnifier (true/false) -->
</var>
magento2 product-view gallery-image fotorama icon
edited Aug 16 '18 at 14:52
Vivek Kumar
2,4242629
asked Aug 15 '18 at 19:35
sandipsandip
1,0841721
add a comment |
I would like to reduce size of following icons appearing on detail page, enabled native fotoroma widget.
1. Fotoroma plus icon and minus icon
2. Fotoroma close icon
<var name="magnifier">
<var name="fullscreenzoom">5</var> <!-- Zoom for fullscreen (integer)-->
<var name="top">5</var> <!-- Top position of magnifier -->
<var name="left">780</var> <!-- Left position of magnifier -->
<var name="width">200</var> <!-- Width of magnifier block -->
<var name="height">200</var> <!-- Height of magnifier block -->
<var name="eventType">hover</var> <!-- Action that atcivates zoom (hover/click) -->
<var name="enabled">false</var> <!-- Turn on/off magnifier (true/false) -->
</var>
magento2 product-view gallery-image fotorama icon
edited Aug 16 '18 at 14:52
Vivek Kumar
2,4242629
asked Aug 15 '18 at 19:35
sandipsandip
1,0841721
This is done with less or sass depending on which css preprocessor you use.
– Chris Anderson
Aug 15 '18 at 21:23
1
@sandip please accept the answer if it helped you
– Vivek Kumar
Aug 16 '18 at 14:39
add a comment |
I would like to reduce size of following icons appearing on detail page, enabled native fotoroma widget.
1. Fotoroma plus icon and minus icon
2. Fotoroma close icon
<var name="magnifier">
<var name="fullscreenzoom">5</var> <!-- Zoom for fullscreen (integer)-->
<var name="top">5</var> <!-- Top position of magnifier -->
<var name="left">780</var> <!-- Left position of magnifier -->
<var name="width">200</var> <!-- Width of magnifier block -->
<var name="height">200</var> <!-- Height of magnifier block -->
<var name="eventType">hover</var> <!-- Action that atcivates zoom (hover/click) -->
<var name="enabled">false</var> <!-- Turn on/off magnifier (true/false) -->
</var>
magento2 product-view gallery-image fotorama icon
edited Aug 16 '18 at 14:52
Vivek Kumar
2,4242629
asked Aug 15 '18 at 19:35
sandipsandip
1,0841721
I would like to reduce size of following icons appearing on detail page, enabled native fotoroma widget.
1. Fotoroma plus icon and minus icon
2. Fotoroma close icon
<var name="magnifier">
<var name="fullscreenzoom">5</var> <!-- Zoom for fullscreen (integer)-->
<var name="top">5</var> <!-- Top position of magnifier -->
<var name="left">780</var> <!-- Left position of magnifier -->
<var name="width">200</var> <!-- Width of magnifier block -->
<var name="height">200</var> <!-- Height of magnifier block -->
<var name="eventType">hover</var> <!-- Action that atcivates zoom (hover/click) -->
<var name="enabled">false</var> <!-- Turn on/off magnifier (true/false) -->
</var>
magento2 product-view gallery-image fotorama icon
magento2 product-view gallery-image fotorama icon
edited Aug 16 '18 at 14:52
Vivek Kumar
2,4242629
asked Aug 15 '18 at 19:35
sandipsandip
1,0841721
edited Aug 16 '18 at 14:52
Vivek Kumar
2,4242629
asked Aug 15 '18 at 19:35
sandipsandip
1,0841721
edited Aug 16 '18 at 14:52
Vivek Kumar
2,4242629
edited Aug 16 '18 at 14:52
Vivek Kumar
2,4242629
edited Aug 16 '18 at 14:52
Vivek Kumar
2,4242629
2,4242629
asked Aug 15 '18 at 19:35
sandipsandip
1,0841721
asked Aug 15 '18 at 19:35
sandipsandip
1,0841721
asked Aug 15 '18 at 19:35
sandipsandip
1,0841721
1,0841721
This is done with less or sass depending on which css preprocessor you use.
– Chris Anderson
Aug 15 '18 at 21:23
1
@sandip please accept the answer if it helped you
– Vivek Kumar
Aug 16 '18 at 14:39
add a comment |
This is done with less or sass depending on which css preprocessor you use.
– Chris Anderson
Aug 15 '18 at 21:23
1
@sandip please accept the answer if it helped you
– Vivek Kumar
Aug 16 '18 at 14:39
This is done with less or sass depending on which css preprocessor you use.
– Chris Anderson
Aug 15 '18 at 21:23
This is done with less or sass depending on which css preprocessor you use.
– Chris Anderson
Aug 15 '18 at 21:23
1
1
@sandip please accept the answer if it helped you
– Vivek Kumar
Aug 16 '18 at 14:39
@sandip please accept the answer if it helped you
– Vivek Kumar
Aug 16 '18 at 14:39
add a comment |
1 Answer
1
active
oldest
votes
The icons actually come by cropping a weird background which contain all the icons, located here - pub/static/frontend/Magento/luma/en_US/mage/gallery/gallery.png so you will have to adjust background-size, background-position and width and height of following elements to get your desired size of icons. Adjust your code as follows (done for + icon)
.fotorama__fullscreen .fotorama__zoom-in {
background-position: 0 0 !important;
background-size: 126px;
top: 0;
}
fotorama__zoom-in.zoom-in-loaded {
height: 16%;
width: 4%;
}
answered Aug 15 '18 at 23:38
Vivek KumarVivek Kumar
2,4242629
add a comment |
Your Answer
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "479"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f238499%2fmagento-2-how-reduce-size-of-fotoroma-gallery-icons-on-product-detail-page%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The icons actually come by cropping a weird background which contain all the icons, located here - pub/static/frontend/Magento/luma/en_US/mage/gallery/gallery.png so you will have to adjust background-size, background-position and width and height of following elements to get your desired size of icons. Adjust your code as follows (done for + icon)
.fotorama__fullscreen .fotorama__zoom-in {
background-position: 0 0 !important;
background-size: 126px;
top: 0;
}
fotorama__zoom-in.zoom-in-loaded {
height: 16%;
width: 4%;
}
answered Aug 15 '18 at 23:38
Vivek KumarVivek Kumar
2,4242629
add a comment |
The icons actually come by cropping a weird background which contain all the icons, located here - pub/static/frontend/Magento/luma/en_US/mage/gallery/gallery.png so you will have to adjust background-size, background-position and width and height of following elements to get your desired size of icons. Adjust your code as follows (done for + icon)
.fotorama__fullscreen .fotorama__zoom-in {
background-position: 0 0 !important;
background-size: 126px;
top: 0;
}
fotorama__zoom-in.zoom-in-loaded {
height: 16%;
width: 4%;
}
answered Aug 15 '18 at 23:38
Vivek KumarVivek Kumar
2,4242629
add a comment |
The icons actually come by cropping a weird background which contain all the icons, located here - pub/static/frontend/Magento/luma/en_US/mage/gallery/gallery.png so you will have to adjust background-size, background-position and width and height of following elements to get your desired size of icons. Adjust your code as follows (done for + icon)
.fotorama__fullscreen .fotorama__zoom-in {
background-position: 0 0 !important;
background-size: 126px;
top: 0;
}
fotorama__zoom-in.zoom-in-loaded {
height: 16%;
width: 4%;
}
answered Aug 15 '18 at 23:38
Vivek KumarVivek Kumar
2,4242629
The icons actually come by cropping a weird background which contain all the icons, located here - pub/static/frontend/Magento/luma/en_US/mage/gallery/gallery.png so you will have to adjust background-size, background-position and width and height of following elements to get your desired size of icons. Adjust your code as follows (done for + icon)
.fotorama__fullscreen .fotorama__zoom-in {
background-position: 0 0 !important;
background-size: 126px;
top: 0;
}
fotorama__zoom-in.zoom-in-loaded {
height: 16%;
width: 4%;
}
answered Aug 15 '18 at 23:38
Vivek KumarVivek Kumar
2,4242629
edited 47 secs ago
answered Aug 15 '18 at 23:38
Vivek KumarVivek Kumar
2,4242629
answered Aug 15 '18 at 23:38
Vivek KumarVivek Kumar
2,4242629
answered Aug 15 '18 at 23:38
Vivek KumarVivek Kumar
2,4242629
2,4242629
add a comment |
add a comment |
Thanks for contributing an answer to Magento Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f238499%2fmagento-2-how-reduce-size-of-fotoroma-gallery-icons-on-product-detail-page%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
This is done with less or sass depending on which css preprocessor you use.
– Chris Anderson
Aug 15 '18 at 21:23
1
@sandip please accept the answer if it helped you
– Vivek Kumar
Aug 16 '18 at 14:39