在 phpBB 中调整按钮大小
Resize buttons in phpBB
所以我有一个模块,我正在尝试调整模块中使用的按钮的大小,以便它们适合更大的图像。另外,如何缩小图像以适合特定的按钮尺寸?
这是我用于按钮的 css 代码。按钮的图像是通过 thanks-icon 和 removethanks-icon 导入的。这是带有导入 atm 图标的图像:. I want to replace those with my owns buttons which are: for upvote and 用于反对票(重新缩放以便它们适合像 "Locked" 按钮这样的按钮用于帖子。
dl.thanks {
min-height: 35px;
background-position: 10px 50%; /* Position of folder icon */
background-repeat: no-repeat;
}
dl.thanks dt {
padding-left: 45px; /* Space for folder icon */
background-repeat: no-repeat;
background-position: 5px 95%; /* Position of topic icon */
width: 45%;
}
dd.lastpostthanks {
width: auto;
font-size: 1.1em;
}
dd.lastpostthanks span {
display: block;
padding-left: 5px;
}
/* List in forum description */
dl.thanks dt ol,
dl.thanks dt ul {
list-style-position: inside;
margin-left: 1em;
}
dl.thanks dt li {
display: list-item;
list-style-type: inherit;
}
li.header dl.thanks {
min-height: 0;
}
li.header dl.thanks dt {
/* Tweak for headers alignment when folder icon used */
padding-left: 0;
padding-right: 50px;
}
/* Forum list column styles */
dl.thanks {
min-height: 35px;
background-position: 10px 50%; /* Position of folder icon */
background-repeat: no-repeat;
}
dl.thanks dt {
padding-left: 45px; /* Space for folder icon */
background-repeat: no-repeat;
background-position: 5px 95%; /* Position of topic icon */
}
/* Icon images
---------------------------------------- */
.icon-thanks { background-image: url("./images/icon_thanks.gif"); background-repeat: no-repeat; }
.icon-thanks_toplist { background-image: url("./images/icon_thanks_toplist.gif"); background-repeat: no-repeat; }
/* Profile & navigation icons */
.thanks-icon:before
{
width: 60px;
background-position: -3px -1px;
background-image: url("./images/icons_button_likes.png");
}
//.thanks-icon:hover:before{ background-position: -3px -19px; }
.removethanks-icon:before
{
background-position: -18px -2px;
background-image: url("./images/icons_button_likes.png");
}
.removethanks-icon:hover:before {background-position: -18px -20px; }
.thanks_reput_image_back
{
background: url(../../../images/rating/reput_star_back.gif);
background-repeat: repeat-x;
}
.thanks_reput_image
{
background: url(../../../images/rating/reput_star_gold.gif);
background-repeat: repeat-x;
}
谢谢。
您可以添加 background-size:cover;
以将背景图像缩放到尽可能大,以便背景区域
所以我有一个模块,我正在尝试调整模块中使用的按钮的大小,以便它们适合更大的图像。另外,如何缩小图像以适合特定的按钮尺寸?
这是我用于按钮的 css 代码。按钮的图像是通过 thanks-icon 和 removethanks-icon 导入的。这是带有导入 atm 图标的图像:
dl.thanks {
min-height: 35px;
background-position: 10px 50%; /* Position of folder icon */
background-repeat: no-repeat;
}
dl.thanks dt {
padding-left: 45px; /* Space for folder icon */
background-repeat: no-repeat;
background-position: 5px 95%; /* Position of topic icon */
width: 45%;
}
dd.lastpostthanks {
width: auto;
font-size: 1.1em;
}
dd.lastpostthanks span {
display: block;
padding-left: 5px;
}
/* List in forum description */
dl.thanks dt ol,
dl.thanks dt ul {
list-style-position: inside;
margin-left: 1em;
}
dl.thanks dt li {
display: list-item;
list-style-type: inherit;
}
li.header dl.thanks {
min-height: 0;
}
li.header dl.thanks dt {
/* Tweak for headers alignment when folder icon used */
padding-left: 0;
padding-right: 50px;
}
/* Forum list column styles */
dl.thanks {
min-height: 35px;
background-position: 10px 50%; /* Position of folder icon */
background-repeat: no-repeat;
}
dl.thanks dt {
padding-left: 45px; /* Space for folder icon */
background-repeat: no-repeat;
background-position: 5px 95%; /* Position of topic icon */
}
/* Icon images
---------------------------------------- */
.icon-thanks { background-image: url("./images/icon_thanks.gif"); background-repeat: no-repeat; }
.icon-thanks_toplist { background-image: url("./images/icon_thanks_toplist.gif"); background-repeat: no-repeat; }
/* Profile & navigation icons */
.thanks-icon:before
{
width: 60px;
background-position: -3px -1px;
background-image: url("./images/icons_button_likes.png");
}
//.thanks-icon:hover:before{ background-position: -3px -19px; }
.removethanks-icon:before
{
background-position: -18px -2px;
background-image: url("./images/icons_button_likes.png");
}
.removethanks-icon:hover:before {background-position: -18px -20px; }
.thanks_reput_image_back
{
background: url(../../../images/rating/reput_star_back.gif);
background-repeat: repeat-x;
}
.thanks_reput_image
{
background: url(../../../images/rating/reput_star_gold.gif);
background-repeat: repeat-x;
}
谢谢。
您可以添加 background-size:cover;
以将背景图像缩放到尽可能大,以便背景区域