更改所有页面上二十七主题的页眉滚动高度

时间:2017-07-30 作者:hessam zare

我在我的Wordpress博客上通过一个子主题编辑了2017主题,我试图调整标题的滚动高度,因为它以前占用了太多的空间。我想要更多的传统头球。

注意,我不想调整或裁剪实际收割台大小,但要裁剪收割台所占垂直高度的大小。在四处搜索时,我通过以下线程找到了一种方法:

How do I change the header image height in Twenty Seventeen?

但是,这只会调整主页上的高度,而不会调整任何其他页面上的高度。我希望所有的页面都一样。(我的参考,我的网站在这里http://chugsforlife.esy.es/ , 如果你在主页上看,页眉高度很好,但转到任何其他页面,它都被可笑地压扁了。)

编辑:这是我最初添加到样式中的代码。我的wordpress子主题的css:

.twentyseventeen-front-page.has-header-image .custom-header-media,


.twentyseventeen-front-page.has-header-image .custom-header-media,
.twentyseventeen-front-page.has-header-video .custom-header-media,
.home.blog.has-header-image .custom-header-media,
.home.blog.has-header-video .custom-header-media {
  height: 1200px;
  height: 60vh;
max-height: 100%;
overflow: hidden;
}


.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media,
.admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media,
.admin-bar.home.blog.has-header-image .custom-header-media,
.admin-bar.home.blog.has-header-video .custom-header-media {
height: calc(60vh - 32px);
}

.has-header-image.twentyseventeen-front-page .custom-header,
.has-header-video.twentyseventeen-front-page .custom-header,
.has-header-image.home.blog .custom-header,
.has-header-video.home.blog .custom-header {
    display: table;
    height: 300px;
    height: 55vh;
    width: 100%;
}

1 个回复
SO网友:rudtek

根据您提到的问题,代码如下:

.twentyseventeen-front-page.has-header-image .custom-header-media,
.twentyseventeen-front-page.has-header-video .custom-header-media,
.home.blog.has-header-image .custom-header-media,
.home.blog.has-header-video .custom-header-media {
  height: 1200px;
  height: 100vh;
  max-height: 100%;
  overflow: hidden;
}
修订:尝试从选择器中删除主页和首页以供您特定使用:您可以使用此选项替换您输入的内容,它也将覆盖首页。

.has-header-image .custom-header-media, blog.has-header-image .custom-header-media {
    height: 1200px;
    height: 70vh;
    max-height: 100%;
    overflow: hidden;
}

.has-header-image .custom-header {
    display: table;
    height: 300px;
    width: 100%;
}

结束

相关推荐

更改所有页面上二十七主题的页眉滚动高度 - 小码农CODE - 行之有效找到问题解决它

更改所有页面上二十七主题的页眉滚动高度

时间:2017-07-30 作者:hessam zare

我在我的Wordpress博客上通过一个子主题编辑了2017主题,我试图调整标题的滚动高度,因为它以前占用了太多的空间。我想要更多的传统头球。

注意,我不想调整或裁剪实际收割台大小,但要裁剪收割台所占垂直高度的大小。在四处搜索时,我通过以下线程找到了一种方法:

How do I change the header image height in Twenty Seventeen?

但是,这只会调整主页上的高度,而不会调整任何其他页面上的高度。我希望所有的页面都一样。(我的参考,我的网站在这里http://chugsforlife.esy.es/ , 如果你在主页上看,页眉高度很好,但转到任何其他页面,它都被可笑地压扁了。)

编辑:这是我最初添加到样式中的代码。我的wordpress子主题的css:

.twentyseventeen-front-page.has-header-image .custom-header-media,


.twentyseventeen-front-page.has-header-image .custom-header-media,
.twentyseventeen-front-page.has-header-video .custom-header-media,
.home.blog.has-header-image .custom-header-media,
.home.blog.has-header-video .custom-header-media {
  height: 1200px;
  height: 60vh;
max-height: 100%;
overflow: hidden;
}


.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media,
.admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media,
.admin-bar.home.blog.has-header-image .custom-header-media,
.admin-bar.home.blog.has-header-video .custom-header-media {
height: calc(60vh - 32px);
}

.has-header-image.twentyseventeen-front-page .custom-header,
.has-header-video.twentyseventeen-front-page .custom-header,
.has-header-image.home.blog .custom-header,
.has-header-video.home.blog .custom-header {
    display: table;
    height: 300px;
    height: 55vh;
    width: 100%;
}

1 个回复
SO网友:rudtek

根据您提到的问题,代码如下:

.twentyseventeen-front-page.has-header-image .custom-header-media,
.twentyseventeen-front-page.has-header-video .custom-header-media,
.home.blog.has-header-image .custom-header-media,
.home.blog.has-header-video .custom-header-media {
  height: 1200px;
  height: 100vh;
  max-height: 100%;
  overflow: hidden;
}
修订:尝试从选择器中删除主页和首页以供您特定使用:您可以使用此选项替换您输入的内容,它也将覆盖首页。

.has-header-image .custom-header-media, blog.has-header-image .custom-header-media {
    height: 1200px;
    height: 70vh;
    max-height: 100%;
    overflow: hidden;
}

.has-header-image .custom-header {
    display: table;
    height: 300px;
    width: 100%;
}

相关推荐