改变搜索栏位置-哥本哈根主题
回答我想改变搜索栏的位置,从主页的中心到右上部分,左边的用户配置文件。
有一个关于如何将搜索栏移动到徽标的左上方,右上方的公会,但是遵循说明它不起作用。我也和Zendesk的人确认了这一点亚博
提前感谢。
-
首先将搜索帮助器添加到header.hbs的导航类中
您可能需要进行一些样式更改,以使其与其他控件以您希望的方式对齐,但这是位置。
好运!
-
你好,艾米
谢谢你的评论。你能更具体地说明说明吗?
我假设我从一个位置删除,并将这些代码行添加到另一个位置。
如前所述,我想把搜索栏放在主页用户配置文件的左侧。
再次感谢
-
这些说明将把搜索栏放置在每个页面的标题部分,而不仅仅是主页。在主页和其他页面上设置不同的位置需要编写更多的代码。这个解决方案更简单。
1.从主页删除搜索:
Home_page开放。并删除或注释下面的代码:
{{!——< h2类= " visibility-hidden " > {{t '搜索'}}< / h2 >
< svg xmlns = "http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="search-icon" aria-hidden="true">
< / svg >
{{搜索提交=false即时=设置。Instant_search class='search - search-full'}}-}}2.从文章页面(以及章节和分类页面)删除搜索
article_page开放。并删除或注释掉下面的代码
{{!——
< svg xmlns = "http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="search-icon">
< / svg >
{{搜索范围=设置。scoped_kb_search提交= false}}
< / div >——}}3.将搜索添加到页眉
开放的头。并在
你好,艾米
这些说明奏效了。
我确实翻阅了其他一些页面,删除了你在第1点提到的代码部分的引用,但这是意料之中的。
谢谢你的帮助,向你致敬:-)
很高兴听到这个消息!:)
亲爱的艾米
抱歉,如果错误的线程,所以请移动,如果需要。
我希望能够减少顶部的主页图像的宽度,并保持中央(css类。Hero -英雄组件)。
我试着将宽度从100减小到50%,图像从左边减小,没有按比例位于页面的中心。
你是否有任何指示,以减少图像的大小,但保持它在页面的中央?
谢谢
尝试设置
margin-right: 25%
margin-left: 25%
宽度为50%
很好,非常感谢艾米。
你好
无论如何,我可以阻止现在重新定位的搜索栏侵占个人资料名称时(使小)调整页面的大小。
提前感谢
在style。css的Header部分下,你有这个吗?
@media (max-width: 768px) {
.nav-wrapper .hide-on-mobile {
边界:0;
剪辑:rect(0 0 0 0);
-webkit-clip-path:插图(50%);
clip-path:插图(50%);
身高:1 px;
保证金:1 px;
溢出:隐藏;
填充:0;
位置:绝对的;
宽度:1 px;
空白:nowrap;}
}你好,艾米
感谢您的回复,回答您的问题;是的,我有相同的代码段。
而不是移动搜索栏的标题,无论如何,我可以改变搜索栏的位置?
是的,这绝对是可能的,但这取决于您的页面上还有什么其他内容。我建议大家仔细阅读CSS盒模型看看为您的帮助中心完成此任务的最佳方法!
你好,
我能够让搜索栏显示在标题中基于代码艾米Gracer提供。我遇到的唯一问题是,通过添加步骤#4:
4.打开styles.css并修改.search-container类,如下所示
.search-container {
位置:绝对的;
右:200 px;
宽度:33%;
padding-right: 25 px;搜索栏阻止了提交按钮,所以我跳过了这部分,结果如下:
代码如下:
没有这段代码:
嗨Ulises,
是的,这绝对是可能的,我认为您需要调整代码以使其适应您的帮助中心。
不幸的是,这是范围从Zendesk支亚博持.
我建议检查和使用自定义代码中的值。
更多信息:CSS高度和宽度示例
好运!
请登录留下评论。
15个评论