본 사이트는 여러분의 사용자 경험을 개선하기 위해 유지 보수를 진행하는 동안 기능이 제한됩니다. 도움말로 문제가 해결되지 않고 질문을 하고 싶다면 Twitter의 @FirefoxSupport 및 Reddit의 /r/firefox 채널을 활용하세요.

Avatar for Username

Mozilla 도움말 검색

고객 지원 사기를 피하세요. 저희는 여러분께 절대로 전화를 걸거나 문자를 보내거나 개인 정보를 공유하도록 요청하지 않습니다. "악용 사례 신고"옵션을 사용하여 의심스러운 활동을 신고해 주세요.

자세히 살펴보기

이 쓰레드는 보존되었습니다. 만약 도움이 필요하시면 새로운 질문을 올려주세요.

Double icons on Stop & Reload buttons when using custom icons

  • 4 답장
  • 0 이 문제를 만남
  • 1 보기
  • 최종 답변자: Slouch

Slouch
Slouch
more options

When reloading a page, or navigating to a new page, the default Stop icon momentarily appears over my own Reload icon, and the default Reload icon also appears over my Stop icon.

Please see attached image and animation.

Any idea if this is a minor bug?

Below is my code to split the Reload button into Reload & Stop buttons, then to add text to the navigation buttons, and finally to add icons to the navigation buttons.

This anomaly happens whether or not I split the Reload & Stop buttons. With just a single Reload button, I'm also seeing the default Reload icon appear over my own.

Thank you. 

/* ---------- SPLIT RELOAD BUTTON INTO RELOAD & STOP ------------- */

#reload-button, #stop-button {
   display: inherit !important; 
} 

#reload-button > .toolbarbutton-icon {
  -moz-appearance: none !important; 
}



/* ------------ ADD TEXT LABELS TO NAVIGATION TOOLBAR BUTTONS --------------- */

/* Shows both icon and label for toolbarbuttons */

toolbar .toolbarbutton-1[label]{
  flex-direction: column;
  align-items: center !important;
}

toolbar .toolbarbutton-1[label]:not([disabled]):hover{ background-color: var(--toolbarbutton-hover-background) !important; }

toolbar .toolbarbutton-1[label] > .toolbarbutton-icon,
toolbar .toolbarbutton-1[label] > .toolbarbutton-badge-stack{
  padding: var(--toolbarbutton-inner-padding) !important;
  padding-bottom: 0px !important;
  height: calc(var(--toolbarbutton-inner-padding) + 16px) !important;
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

toolbar .toolbarbutton-1[label] > .toolbarbutton-text {
  display: flex !important;
  min-height: 16px !important;
  padding-top: 3px !important;
  padding-bottom: 6px !important;
  background-color: transparent !important;
  overflow: hidden;
  width: 9ch; /* changes space between buttons */
}
toolbar .toolbarbutton-1[label] > .toolbarbutton-text::before{
  margin-inline: auto;
 }
:root:not([uidensity="compact"]) toolbar .toolbarbutton-1[label] > .toolbarbutton-text{ padding: 2px !important; }



/* ------------ ADD CUSTOM ICONS TO NAVIGATION TOOLBAR BUTTONS ----------- */

#back-button {
   list-style-image: url("image/back.png") !important;
   padding-top: 8px !important;
}
#back-button image{
   max-height: 16px !important; 
   max-width: 16px !important;
   padding: 0px !important;
   margin-bottom: 3px !important;
}
#forward-button {
   list-style-image: url("image/forward.png") !important;
   padding-top: 8px !important;
}
#forward-button image{
   max-height: 16px !important; 
   max-width: 16px !important;
   padding: 0px !important;
   margin-bottom: 3px !important;
}
#reload-button {
   list-style-image: url("image/reload.png") !important;
   padding-top: 8px !important;
}
#reload-button image{
   max-height: 16px !important; 
   max-width: 16px !important;
   padding: 0px !important;
   margin-bottom: 3px !important;
}
#stop-button {
   list-style-image: url("image/stop.png") !important;
   padding-top: 8px !important;
}
#stop-button image{
   max-height: 16px !important; 
   max-width: 16px !important;
   padding: 0px !important;
   margin-bottom: 3px !important;
}
#print-button {
   list-style-image: url("image/print.png") !important;
   padding-top: 8px !important;
}
#print-button image{
   max-height: 16px !important; 
   max-width: 16px !important;
   padding: 0px !important;
   margin-bottom: 3px !important;
}
#home-button {
   list-style-image: url("image/home.png") !important;
   padding-top: 8px !important;
}
#home-button image{
   max-height: 16px !important; 
   max-width: 16px !important;
   padding: 0px !important;
   margin-bottom: 3px !important;
}
When reloading a page, or navigating to a new page, the default Stop icon momentarily appears over my own Reload icon, and the default Reload icon also appears over my Stop icon. Please see attached image and animation. Any idea if this is a minor bug? Below is my code to split the Reload button into Reload & Stop buttons, then to add text to the navigation buttons, and finally to add icons to the navigation buttons. This anomaly happens whether or not I split the Reload & Stop buttons. With just a single Reload button, I'm also seeing the default Reload icon appear over my own. Thank you. /* ---------- SPLIT RELOAD BUTTON INTO RELOAD & STOP ------------- */ #reload-button, #stop-button { display: inherit !important; } #reload-button > .toolbarbutton-icon { -moz-appearance: none !important; } /* ------------ ADD TEXT LABELS TO NAVIGATION TOOLBAR BUTTONS --------------- */ /* Shows both icon and label for toolbarbuttons */ toolbar .toolbarbutton-1[label]{ flex-direction: column; align-items: center !important; } toolbar .toolbarbutton-1[label]:not([disabled]):hover{ background-color: var(--toolbarbutton-hover-background) !important; } toolbar .toolbarbutton-1[label] > .toolbarbutton-icon, toolbar .toolbarbutton-1[label] > .toolbarbutton-badge-stack{ padding: var(--toolbarbutton-inner-padding) !important; padding-bottom: 0px !important; height: calc(var(--toolbarbutton-inner-padding) + 16px) !important; border: none !important; background-color: transparent !important; box-shadow: none !important; } toolbar .toolbarbutton-1[label] > .toolbarbutton-text { display: flex !important; min-height: 16px !important; padding-top: 3px !important; padding-bottom: 6px !important; background-color: transparent !important; overflow: hidden; width: 9ch; /* changes space between buttons */ } toolbar .toolbarbutton-1[label] > .toolbarbutton-text::before{ margin-inline: auto; } :root:not([uidensity="compact"]) toolbar .toolbarbutton-1[label] > .toolbarbutton-text{ padding: 2px !important; } /* ------------ ADD CUSTOM ICONS TO NAVIGATION TOOLBAR BUTTONS ----------- */ #back-button { list-style-image: url("image/back.png") !important; padding-top: 8px !important; } #back-button image{ max-height: 16px !important; max-width: 16px !important; padding: 0px !important; margin-bottom: 3px !important; } #forward-button { list-style-image: url("image/forward.png") !important; padding-top: 8px !important; } #forward-button image{ max-height: 16px !important; max-width: 16px !important; padding: 0px !important; margin-bottom: 3px !important; } #reload-button { list-style-image: url("image/reload.png") !important; padding-top: 8px !important; } #reload-button image{ max-height: 16px !important; max-width: 16px !important; padding: 0px !important; margin-bottom: 3px !important; } #stop-button { list-style-image: url("image/stop.png") !important; padding-top: 8px !important; } #stop-button image{ max-height: 16px !important; max-width: 16px !important; padding: 0px !important; margin-bottom: 3px !important; } #print-button { list-style-image: url("image/print.png") !important; padding-top: 8px !important; } #print-button image{ max-height: 16px !important; max-width: 16px !important; padding: 0px !important; margin-bottom: 3px !important; } #home-button { list-style-image: url("image/home.png") !important; padding-top: 8px !important; } #home-button image{ max-height: 16px !important; max-width: 16px !important; padding: 0px !important; margin-bottom: 3px !important; }
첨부된 스크린샷

글쓴이 Slouch 수정일시

선택된 해결법

I tried this, but still see the default icons overlaying mine... 

#reload-button, #stop-button {
   display: flex !important;
   background-image: url("image/home.png") !important;
}


However, the following 2 statements seem to work. Are they acceptable form? 

#stop-reload-button[animate] > #reload-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
   background-image: none !important;
}

#stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
   background-image: none !important;
}
문맥에 따라 이 답변을 읽어주세요 👍 0

모든 댓글 (4)

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

The Stop and Reload buttons use a background-image. 

/* Separate Stop/Reload buttons */
#reload-button, #stop-button {display:flex !important}
Slouch
Slouch 질문자
more options

I made the following change, but I'm still seeing the default icons overlaying mine. 

#reload-button, #stop-button {
   /* display: inherit !important; */
   display: flex !important;
   background-image: none !important;
}
cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

You need to use this rule: 

background-image: url("image/home.png") !important;
Slouch
Slouch 질문자
more options

선택된 해결법

I tried this, but still see the default icons overlaying mine... 

#reload-button, #stop-button {
   display: flex !important;
   background-image: url("image/home.png") !important;
}


However, the following 2 statements seem to work. Are they acceptable form? 

#stop-reload-button[animate] > #reload-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
   background-image: none !important;
}

#stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
   background-image: none !important;
}

글쓴이 Slouch 수정일시