重写Python日历HTMLCalendar C

Question

我想覆盖默认的Python日历CSS。我目前正在使用该类日历.HTMLCalendar并希望覆盖默认的python日历css。在

覆盖默认css的最聪明的方法是什么？任何帮助或建议将不胜感激。在

我想用我的日历css。在

-Keoko公司

下面是我使用的templatetag示例：

  def formatday(self, day, weekday):
       if day != 0:
           cssclass = self.cssclasses[weekday]
           if date.today() == date(self.year, self.month, day):
           cssclass += ' today'
       if day in self.readings:
           cssclass += ' filled'
           body = ['<ul>']
           for reading in self.readings[day]:
              body.append('<li>')
              body.append('<a href="%s">' % reading.get_absolute_url())
              body.append(esc(reading.series.primary_name))
              body.append('</a></li>')
           body.append('</ul>')
           return self.day_cell(cssclass, '<span class="dayNumber">%d</span> %s' %  (day, ''.join(body)))
        return self.day_cell(cssclass, '<span class="dayNumberNoReadings">%d</span>' % (day))
    return self.day_cell('noday', '&nbsp;')

再次感谢。在

Answer 1

从你的代码样本中。假设我们在<；ul>；中添加类名，如下所示：

def formatday(self, day, weekday):
       if day != 0:
           cssclass = self.cssclasses[weekday]
           if date.today() == date(self.year, self.month, day):
           cssclass += ' today'
       if day in self.readings:
           cssclass += ' filled'
           body = ['<ul class="sample">'] //<    -add class
           for reading in self.readings[day]:
              body.append('<li>')
              body.append('<a href="%s">' % reading.get_absolute_url())
              body.append(esc(reading.series.primary_name))
              body.append('</a></li>')
           body.append('</ul>')
           return self.day_cell(cssclass, '<span class="dayNumber">%d</span> %s' %  (day, ''.join(body)))
        return self.day_cell(cssclass, '<span class="dayNumberNoReadings">%d</span>' % (day))
    return self.day_cell('noday', '&nbsp;')

然后，在你的css代码中，你可以简单地写下：

^{pr2}$

Answer 2

ChromeDeveloper工具允许你检查页面元素-只要右键单击并单击inspect，它就会在右边弹出。这样，只需将鼠标悬停在所需的区域上，就可以看到分配给每个表元素的类。在

下面的css是一个示例，css标记应该适合您的日历。在

.filled{
    background-color: pink;
}
.today {
    background-color: #66ccff;
}
.noday{
    background-color: #f0f0f5;
}
.month {
    border:1px solid navy;
    width: 70%;
    text-align: center;
}
.month th {
    text-align: center;
    width:100px;
    height:20px;
}
.month td {
    width: 100px;
    height: 100px;
    vertical-align: top;
    text-align: right;
    border: 1px solid #c6c6ec;
}

然后确保将.css导入到模板中！在

^{pr2}$

Answer 3

在没有看到需要重写的规则的情况下，CSS规则必须比已经存在的规则更具体。有几种方法可以做到这一点，但这取决于已经制定了哪些规则。在

作为入门，请看一下：http://css-tricks.com/specifics-on-css-specificity/。它将为您提供一些关于如何最好地覆盖要更改的样式的指针。在

假设您有以下样式来自所实现的Python日历CSS：

.calendar .day {
    background-color: #ccc;
}

要覆盖此样式，可以执行以下操作：

^{pr2}$

日历为月份输出一个<table>，表上有一个CSS类'month'，而<th>标记是'month'。因此，要覆盖样式，可以执行以下操作：

table.month th.month {
  // your style here
}

但这并不是一个非常有效的选择器，因为在应用样式之前，DOM将搜索所有的表标记。更有效的选择器是将日历包装在带有id的目标div标记中：

#mycalendar .month .month {
  // your style
}

它专门针对id为“mycalendar”的div，因此不必遍历所有标记。在

您必须覆盖来自Python日历CSS代码的CSS的特殊性。上面的示例提供了一个更具体的选择器。这是级联样式表的最基本原则之一（注意“级联”部分的重点）