覆盖Python日历HTMLCalendar CSS

问题描述：

我想重写默认的Python日历CSS。我目前正在使用类calendar.HTMLCalendar，并希望覆盖默认的Python日历css。覆盖Python日历HTMLCalendar 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;')

感谢。

你有样品代码？ – catherine 2013-03-07 14:44:39

答

如果没有完全看到您需要覆盖的规则，那么您的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

日历输出该月份的月份为<table>，表格中的“月份”为CSS类别，<th>标签的月份为“月份”。因此，覆盖的风格，你可以这样做：

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

但是，这不是一个非常有效的选择，因为在DOM中搜索所有的表标签可以应用该样式之前。一个更有效的选择是用包裹在日历的目标div标签的id：

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

这在所有专门针对有“mycalendar”的ID的DIV，因此它不具有循环的标签。

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

你好布兰登 - 我不太清楚你的意思是已经存在的规则。以下是从我的模板标签中提取的示例代码： – keoko 2013-03-07 17:28:57

我编辑了我的答案来演示重写样式。 – Brandon 2013-03-07 17:44:45

谢谢布兰登。我想我知道如何在当天添加CSS。这个月怎么样？请参阅下面的详细信息： – keoko 2013-03-07 20:25:27

答

从您的示例代码。比方说，我们在< 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代码，你可以简单的写：

<style> 
.sample { 
    background:red; 
    font-weight: bold; 
} 
</style>

谢谢凯瑟琳。它似乎工作。我将如何使用表格和行来包装内容。 – keoko 2013-03-07 19:05:18

我认为它已经包装在表格中，我看到了你的代码链接，他已经为该日历指定了表格 – catherine 2013-03-07 19:09:58

如果你有问题，我不能回答。需要睡觉。我会明天回答:) – catherine 2013-03-07 19:16:04

答

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'/>

覆盖Python日历HTMLCalendar CSS

相关推荐