Пришло время немного оформить наш сайт. Давай те добавим CSS-файл в наш сайт.
Делается это из системы управления, в разделе "Settings", найдите элемент "Stylesheets", на нем нажмите правую кнопку мыши, в контекстном меню нажмите "Create".
Создаем CSS-файл, вводим название, нажимаем "Create":
Получаем чистенький файл:
Давай те немного оформим наш сайт:
Теперь давай те подключим наш CSS файл к Базовому шаблону. Добавив в него в блок <head> строку:
И немного подправим, что бы получилось следующее:
Теперь, давай те откроем наш XSLT файл "Верхнее меню" и в блок <ul> пропишем класс menu. Должно получиться следующее:
Готово, зайдите на сайт и посмотрите, если форматирование изменилось, значит CSS-файл подключился.
Делается это из системы управления, в разделе "Settings", найдите элемент "Stylesheets", на нем нажмите правую кнопку мыши, в контекстном меню нажмите "Create".
Создаем CSS-файл, вводим название, нажимаем "Create":
Получаем чистенький файл:
Давай те немного оформим наш сайт:
<!-- RESET -->
html, body, table, div, tr, td, img, p
{
padding:0px;
margin:0px;
}
table
{
border-collapse:collapse;
}
td
{
vertical-align:top;
}
.clear
{
clear:both;
}
<!-- BODY -->
h1
{
font-size:16px;
}
.menu
{
clear:both;
padding-left:0px;
margin-left:0px;
}
.menu li
{
display:block;
float:left;
padding-left:20px;
}
.menu li a
{
color:#000;
text-decoration:underline;
}
.menu li a:hover
{
text-decoration:none;
}
Теперь давай те подключим наш CSS файл к Базовому шаблону. Добавив в него в блок <head> строку:
<link type='text/css' rel='stylesheet' href='/css/main.css' />
И немного подправим, что бы получилось следующее:
<%@ Master Language="C#" MasterPageFile="~/umbraco/masterpages/default.master" AutoEventWireup="true" %> <asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title> <umbraco:Item runat="server" field="title"></umbraco:Item> </title> <meta name="keywords" content="<umbraco:Item field="keywords" runat="server"></umbraco:Item>"/> <meta name="description" content="<umbraco:Item field="description" runat="server"></umbraco:Item>"/> <link type='text/css' rel='stylesheet' href='/css/main.css' /> <asp:ContentPlaceHolder Id="phBasePageHeader" runat="server"> <!-- Insert default "phBasePageHeader" markup here --> </asp:ContentPlaceHolder> </head> <body> <umbraco:Macro Alias="Верхнееменю" runat="server"></umbraco:Macro> <div class="clear"></div> <asp:ContentPlaceHolder Id="phBasePageContext" runat="server"> <!-- Insert default "phBasePageContext" markup here --> </asp:ContentPlaceHolder> </body> </html> </asp:Content>
Теперь, давай те откроем наш XSLT файл "Верхнее меню" и в блок <ul> пропишем класс menu. Должно получиться следующее:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp " "> ]>
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxml="urn:schemas-microsoft-com:xslt"
xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets"
exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets ">
<xsl:output method="xml" omit-xml-declaration="yes" />
<xsl:param name="currentPage"/>
<!-- Input the documenttype you want here -->
<xsl:variable name="level" select="1"/>
<xsl:template match="/">
<!-- The fun starts here -->
<ul class="menu">
<xsl:for-each select="$currentPage/ancestor-or-self::* [@level=$level]/* [@isDoc and string(umbracoNaviHide) != '1']">
<li>
<a href="{umbraco.library:NiceUrl(@id)}">
<xsl:value-of select="@nodeName"/>
</a>
</li>
</xsl:for-each>
</ul>
</xsl:template>
</xsl:stylesheet>Готово, зайдите на сайт и посмотрите, если форматирование изменилось, значит CSS-файл подключился.
Комментариев нет:
Отправить комментарий