Wordpress响应小工具容器

时间:2014-10-17 18:12:31

标签: css wordpress responsive-design widget customization

我遇到了一个非常具体的问题,主题开发人员已经走了MIA。

我已经链接了一个关于问题的屏幕截图,我也会尝试在这里尽可能地描述它。如果需要更多信息,请告诉我,我会尽可能多地提供。

Screencap:http://tinypic.com/r/53le1l/8

我正在使用这个主题的相当修改版本,但没有任何东西会对主题的功能产生影响:

http://www.themes.red-sun-design.com/?theme=lemonchili

正如您所看到的 - 主页旨在显示小部件,每个小部件都在自己的容器中,而不是自定义页面布局(我们忽略顶部滑块,因为这不是问题)。无论显示什么内容,主题中包含的小部件都可以正常工作。

主页层结构(从后到前):背景图像 - >侧边栏/菜单&页面背景 - >页面内容(滑块和小部件)

问题是,对于第三方小部件/插件以及几乎任何交互式内容,这些容器无法正确扩展并最终导致大部分内容不可见。

我正在使用插件EventON(www.myeventon.com),如果一个月有2个事件,如screencap所示,它显示正常。 (注意:当点击/选择一个事件时,会弹出一个带有事件信息的灯箱 - 这不是问题)但是如果一个月有2个以上的事件,则该框会调整大小以显示信息,但不会调整大小以适应其他所有内容在页面上。

如果您查看原始主题演示,每个小工具之间的每个小工具都有间距。

当您查看屏幕截图时,您会看到间距消失,并且额外的事件(我假设)显示在eventON小部件下方的小部件下方。

我需要的是使每个容器响应每个容器中显示的内容,而不管页面上的位置如何,同时在每个小部件容器之间保持相同的间距。此外,实际页面背景也需要扩展以满足内容,这似乎不会发生。

我一直试图找到一个星期的解决方案而且完全陷入困境 所有这些都是有意义的 - 如果这令人困惑,或者我没有正确解释,请告诉我。

感谢。

1 个答案:

答案 0 :(得分:0)

模板设计非常僵硬,因为每个内容div部分(小时,最新图像,午餐特别,下一个事件,最新和关于)绝对位于容器div中,据我所知,溢出内容甚至隐藏在主要内容部分的底部。

以红太阳主题为例:你是对的,来自"最新图像"部分(你有你的插件)显示在"下一个事件"部分。

  1. 一个快速解决方案是提供最新图像" div(这是保存你的插件的那个)比"下一个事件"更高的z-index。这样,它将显示在"下一个事件"之上,而不是在它下面。幸运的是插件并没有太多溢出。请记住为列中的所有3个div提供z-index。示例:z-index:10; for"最新图片",z-index:9; for" Next Event"和z-index:8;对于底部"关于"格。

  2. 接下来调整div的高度,以便始终有足够的空间容纳插件。最小宽度可能效果很好。

  3. 然后移动"下一个活动"几个像素向下,所以溢出来自"最新图像"不会重叠它的顶部。你可能不得不移动"关于"也是。

  4. 一旦你向下移动其他2个div,底部div可能会超过容器的底部,其底部内容可能会被隐藏。一种解决方案是通过减小字体大小/填充来降低div的高度......另一种解决方案是增加直接在容器div下面的主div的高度。看起来高度也在html代码中。

  5. 注意:从这一端看来,模板在html代码中保存了div样式,因此您可能需要进行调整(z-index,top positioning)。

  6. 另一种解决方案是将滚动条(添加宽度和溢出:自动;)添加到"最新图像"部分,所以当插件溢出时,会有一个滚动条。但是内容区域会受到滚动条大小的影响。