0

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

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

我想使用我的日历 css。

-Keoko

这是我正在使用的模板标签示例：

  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;')

再次感谢。

4

3 回答 3

0

From your sample codes. Let's say we add class name in < ul > like this:

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;')

Then, in your css codes, you can simply write:

<style>
.sample {
    background:red;
    font-weight: bold;
}
</style>
于 2013-03-07T18:25:24.730 回答
0

如果没有确切地看到您需要覆盖的规则，您的 CSS 规则必须比已经存在的规则更具体。有几种方法可以做到这一点，但这取决于已经制定了哪些规则。

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

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

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

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

table.calendar .day  // or

.calendar td.day  // or

table.calendar td.day

日历为月份输出 a <table>，表格上的 CSS 类为“月”，<th>标签为“月”。因此，要覆盖样式，您可以执行以下操作：

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

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

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

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

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

于 2013-03-07T15:45:16.327 回答
0

Chrome 开发人员工具允许您检查页面元素 - 只需右键单击并单击检查，它就会在右侧弹出。这样，您只需将鼠标悬停在您想要的区域上即可查看分配给每个表格元素的类。

下面的 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 导入模板！

<link rel='stylesheet' href="location-of-your-css-here" type='text/css' media='all'/>
于 2017-02-10T15:02:07.413 回答