July 2006 - Posts
译自: http://soup.co.za/weblog/archive/2006/03/29/54.aspx
我这里做了一个sneak preview of the Developer Blog Skin for CS 2.0, 可以帮助您快速开发一个简单的Cs Blog Skin
如果我要为客户开发一个Skin，有两种可能，一是客户有成熟运行的Cs站点，二是全新的. 两种情况下Cs都需要一个包含一些测试数据的Cs，我就有这样地的一个, 里面包含了一些blog, photo,http://sandpit.soup.co.za,
你也可以这样做 我们需要执行一个存储过程
exec dbo.cs_system_CreateCommunity 'cs.soup.co.za', 'dev', 'admin@example.org', 'AdminUserName', 'AdminPassword', 0, 0
再为Cs指定一个新的域名
EXEC cs_system_AddNewUrl 'cs.soup.co.za', 'sandpit.soup.co.za'
![]()
译自: http://soup.co.za/weblog/archive/2006/03/28/49.aspx
Cs2.0默认将文件存放在数据库和文件系统中，如果数据库对您非常紧张的话，您可以只将文件存储到文件系统中，您需要修改一下 CommunityServer.config
修改enableDataStoreStorage="true" 为enableDataStoreStorage="false".
![]()
译自: http://soup.co.za/weblog/archive/2006/03/28/44.aspx
在CS Tip 02 (英文，中文) 中我们介绍了怎样修改站点顶部， 现在我们来用 Douglas Bowman's 提供的Sliding Doors of CSS来为我们的Cs创建一个酷酷的Css导航菜单
为了让您尽快上手，强烈建议您读一读Sliding Doors of CSS 和 Sliding Doors of CSS, Part II 他们讲得更深入一些
效果预览
最终效果
导航条代码位于Themes/default/skins/Skin-RepeaterBar.ascx 中，如果你查看一下产生的代码，会发现是用Table布局的，而我们要做的是要产生如下的代码
<ul>
<li class="navselected"><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Blogs</span></a></li>
<li><a href="#"><span>Forum</span></a></li>
<li><a href="#"><span>Photos</span></a></li>
</ul>
你也许注意到了每个链接都用span包住了，那是因为为了给链接加背景图像, 详细请查看Sliding Doors of CSS, Part II
我们先要修改原来的代码为
<asp:Repeater EnableViewState="false" runat="server" id="Menu">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li class="<%# ((bool) DataBinder.Eval(Container.DataItem, "IsSelected")) ? "navselected" : "" %>"><a href="<%# DataBinder.Eval(Container.DataItem, "NavigateUrl") %>"><span><%# DataBinder.Eval(Container.DataItem, "Text") %></span></a></li>
</ItemTemplate>
<FooterTemplate>
<ul>
</FooterTemplate>
</asp:Repeater>
这样，被选择的项将会应用样式navselected
我也制作了简单的背景图像
为了简单起见我把<div class="CommonTabBar"> 改为<div id="navbar">
The CSS
前面我已经说了，关于这个示例的详细原理请查看Sliding Doors of CSS尤其是 Sliding Doors of CSS, Part II， 在这里我就仅仅列出代码了
我们在Common.css中添加
#navbar {
float:left;
width:100%;
background-color:#333333;
font-size:93%;
line-height:normal;
}
#navbar ul {
margin: 0;
padding: 0px 10px 0;
list-style: none;
}
#navbar li {
display: inline;
margin: 0;
padding: 0;
}
#navbar a {
float:left;
background:url ("../images/custom/navbarleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 9px;
border-bottom:1px solid #765;
text-decoration:none;
}
#navbar a span {
float:left;
display:block;
background:url ("../images/custom/navbarright.gif") no-repeat right top;
padding:5px 15px 4px 6px;
font-weight:bold;
color:#333333;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#navbar a span {
float:none;
}
/* End IE5-Mac hack */
#navbar a:hover span {
color:#666666;
}
#navbar .navselected a {
background-position:0 -300px;
border-width:0;
}
#navbar .navselected a span {
background-position:100% -300px;
padding-bottom:5px;
color:#333333;
}
#navbar a:hover {
background-position:0% -150px;
}
#navbar a:hover span {
background-position:100% -150px;
}
#CommonBody {
clear:both;
}
我们对Sliding Doors of CSS做的修改仅仅是加了 Clear: both; 因为#navbar 中包含了浮动元素,我们添加他为了避免他不影响布局
![]()
译自: http://soup.co.za/weblog/archive/2006/03/26/40.aspx
Asp.Net提供的Calendar控件太糟糕了，主要是对Css的支持太糟糕了，我估计Cs里用的Calendar控件可能是源自
Daniel Cazzulino's Unstyledcalendar.但是这个还是有点问题，我想上一页和下一页可能还是采用了内联样式(inline style)
但是我们可以采用!important CSS 可以回避内联样式
最简单的办法就是在Skin-WeblogCalendar.ascx 中的<CS:Unstyledcalendar>添加
nextprevstyle-cssclass="calNextPrev"
然后再 style.css中添加
.calNextPrev a:link, .calNextPrev a:active, .calNextPrev a:visited {
color: #FFF!important;
}
.calNextPrev a:hover {
color: #FFF!important;
}
![]()
译自: http://soup.co.za/weblog/archive/2006/03/25/29.aspx
这个很有用哦, 我在忙于编辑Common.Css的时候发现他的大小是86Kb, 我很奇怪并且检查了下，原来在Common.Css里有很多不必要的空格
我又看了看其他的Css文件，发现Common_print.Css里也有同样的问题
在删除了空格之后，Common.Css的大小从86Kb减小到47Kb, Common_Print.Css从71Kb减小到32Kb
（译者注: 我的Common.Css从85Kb减小到47Kb）
虽然用户只需要下载一次Css文件,因为他们一旦被下载将会被缓存起来
但是他们在访问期间将会影响浏览的速度
注意: 我发现问题的Cs版本为 # 2.0.60217.2664.
![]()