Wordpress在自定义侧边栏上丢失填充

时间:2014-04-15 11:43:38

标签: css wordpress html widget padding

这是一个奇怪的问题!

我使用自定义侧边栏复制普通默认边栏,只是它为该页面添加了一个相关的谷歌地图窗口小部件,显示该特定事件的位置。

任何其他页面都不需要地图窗口小部件,这就是为什么创建了几乎相同的自定义菜单但是使用了额外的地图窗口小部件。

在第一张图片上你可以看到右边的默认侧边栏还有一些额外的类(.widget) 所有小部件都包含在具有每个div的ID的div中

所以填充是正确的

default GOOD rhs sidebar

在第二张图片上,所有小部件都不再具有div,所以没有地方可以在custom.css上添加自定义类

缺少必要的填充!

BAD custom sidebar

如果课程在那里,这不会有问题!

我想我做了以下事情:

  1. 创建了自定义侧边栏
  2. 添加了小部件
  3. 创建了一个页面,并在创建时替换了默认的rhs侧边栏
  4. 我做错了吗?

    wordpress核心肯定应该添加所有类和div以及各自的id

    =============================================== ======================

    第一次编辑

    我使用了自定义侧边栏和配置的小部件。

    jummah自定义侧边栏的所有元素都是小部件

    widgets on jummah custom sidebar

    这里是html ...

    <div class="sidebar s2">
    <a class="sidebar-toggle" title="Expand Sidebar">
    <div class="sidebar-content">
    <div class="sidebar-top group">
    Jummah, Darutawheed Oxford
    <p>
    <p>
    <p>Barak Allaahu feekum</p>
    <form class="searchform themeform" action="http://darutawheed.co.uk/" method="get">
    Tags
    <div class="tagcloud">
    <div id="calendar_wrap">
    Archives
    <ul>
    </div>
    

    和Jummah侧边栏中生成的css

    .col-3cm .s2 {
    float: right;
    margin-right: -260px;
    position: relative;
    right: -100%;
    }
    .s2 {
    width: 260px;
    z-index: 1;
    }
    .sidebar {
    padding-bottom: 20px;
    position: relative;
    z-index: 2;
    }
    

    ==================================

    它应该是这样看的

    HTML

    <div class="sidebar s2">
    <a class="sidebar-toggle" title="Expand Sidebar">
    <div class="sidebar-content">
    <div class="sidebar-top group">
    <div id="search-2" class="widget widget_search">
    <div id="tag_cloud-3" class="widget widget_tag_cloud">
    <div id="calendar-2" class="widget widget_calendar">
    <div id="archives-2" class="widget widget_archive">
    </div>
    

    CSS

    .sidebar .widget {
        padding: 30px 30px 20px;
    }
    .widget {
        color: #777777;
        font-size: 15px;
        overflow: hidden;
    }
    

    ================================

    我做了一个小实验

    此图片显示使用DEFAULT侧栏的页面

    default sidebar on jummah page

    这是完全打破设计的JUMMAH侧边栏

    jummah page using jummah custom sidebar

    我尝试使用编辑侧边栏BEFORE WIDGET

    添加自定义侧边栏窗口小部件类
    <div class="custom_sidebar_widget">
    

    和WIDGET之后

    </div>
    

    并在custom.css中复制了这样的填充样式

    .custom_sidebar_widget {
    padding: 30px 30px 20px;
    }
    

    但是这只是正确填充了小部件但样式(字体颜色和日历样式都搞砸了)

    主题是没有添加必要的div和类小部件widget_search,widget widget_tag,widget widget_calendar等,所以这打破了设计!!

    我认为我已经涵盖了一切

0 个答案:

没有答案