如何更改 pinax(0.9a2) 模板?

2023-12-05

我已经安装了带有 pinax-bootstrap 主题的 pinax(0.9a2)!

现在我想自定义它并重新设计主题,但我在模板文件夹中没有找到任何 *.css 文件。那么如何自定义bootstrap主题的css呢?


这就是我如何启动并运行我的基本 pinax 项目:-

mkvirtualenv -p python2.7 --distribute mysite
cd ~/work
pinax-admin setup_project -b basic mysite
cd mysite
pip install -r requirements/base.txt
python manage.py collectstatic
python manage.py syncdb
python manage.py runserver 8001

这给了我这个:-

enter image description here

现在我的 pinax 默认情况下可以与 bootstrap 主题完美运行,我可以继续使用 CSS 覆盖来自定义我的主题。

由于我的 pinax settings.py 指向

# Additional directories which hold static files
STATICFILES_DIRS = [
    os.path.join(PROJECT_ROOT, "static"),
]

我们将把所有的 css 文件放在项目根目录“mysite”下的这个静态目录中。

CSS 覆盖工作是在我们的模板中加载 bootstrap 的 css 之后加载我们自己的自定义 css 文件。

我们特定的 CSS 类及其新定义将覆盖 bootstrap 提供的默认值。这就是我们如何自定义 bootstrap 主题,同时保留 bootstrap.css ,这就是为什么我们的static目录一开始是空的。

例如,我们的 topbar 类定义在bootstrap.min.css默认情况下。

.topbar-inner, .topbar .fill {
background-color: #222;
...
}

我们可以在里面指定我们自己的css文件static目录中,加载这个css文件到我们的templates/site_base.html文件并在我们自己的 css 文件中指定顶部栏的新颜色,如下所示:-

.topbar-inner, .topbar .fill {
    background-color: red;
    background-image: -webkit-linear-gradient(top, #333, #FF4242);
    background-image: -o-linear-gradient(top, #333, #FF4242);
    background-image: linear-gradient(top, #333, #FF4242);
}

这将导致主页上的黑色顶部栏呈现为黑红色。这是使用重写来自定义 css 类的基本前提,其默认值已在 bootstrap.min.css 中定义。

示例修改为mysite/templates/homepage.html

{% extends "banner_base.html" %}

{% load i18n %}

{% block extra_head %}
<link rel="stylesheet" href="{{ STATIC_URL }}css/my_custom_stuff.css">
{% endblock %}

{% block head_title %}{% trans "Welcome" %}{% endblock %}

{% block body_class %}home{% endblock %}

{% block banner %}
    <h1>{% trans "Welcome to Pinax" %}</h1>
    <p>
        {% blocktrans %}
        <b>Pinax</b> is a <a href="http://djangoproject.com/">Django</a>
        project intended to provide a starting point for websites. By
        integrating numerous reusable Django apps to take care of the
        things that many sites have in common, it lets you focus on what
        makes your site different.
        {% endblocktrans %}
    </p>

    <h2>About Zero Project</h2>
    <p>
        {% blocktrans %}
        This project lays the foundation for all other Pinax starter projects. It
        provides the project directory layout and some key infrastructure apps on
        which the other starter projects are based.
        {% endblocktrans %}
    </p>

    <p><a href="http://pinaxproject.com/" class="btn primary large">{% trans "Learn more &raquo;" %}</a></p>
{% endblock %}

添加的具体块是

{% block extra_head %}
<link rel="stylesheet" href="{{ STATIC_URL }}css/my_custom_stuff.css">
{% endblock %}

请注意,我们还可以将其添加到mysite/templates/site_base.html。这完全取决于您要在我们的中加载哪个模板my_custom_stuff.css file.

my_custom_stuff.css需要居住在mysite/static/css目录。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何更改 pinax(0.9a2) 模板? 的相关文章

随机推荐

  • 从 Windows 8 JS 应用程序获取仅 HTTP 的 cookie

    我正在制作一个 Javascript Windows 8 应用程序 其中用户连接到我的服务器并登录 目前 我正在尝试使用 XmlHttpRequest 对象来执行此操作 特别是 WinJS xhr 但是当我获得 getAllResponse
  • 如何在不重复代码的情况下改变多个变量?

    我正在尝试从现有变量创建新变量 如下所示 a1 a2 a3 b1 b2 b3 z1 z2 z3 这是一个示例数据框 df lt data frame replicate 10 sample 1 10 colnames df lt c a1
  • 如何在 JSF 中以编程方式设置区域设置

    我目前正在尝试以编程方式设置区域设置 但找不到好的解决方案 用例是我有另一个网站将数据发布到我的网站 该网站具有区域设置参数 并且基于此区域设置 我必须呈现我的页面 我已经尝试在 preRenderView 构造函数和 PostConstr
  • XLConnect 包可以与 Java 8 一起使用吗?

    我更新了 Java 版本并删除了旧版本的 Java 现在我的 XLConnect 包不会在 R 中加载 因为 XLConnectJars 不会加载 这是错误消息 Loading required package XLConnectJars
  • Opera 和 Internet Explorer 中的 JQuery 安全错误

    我正在开发一个适用于社交网络的应用程序 该应用程序适用于IFrame 该应用程序在 Google Chrome 和 Microsoft Firefox 浏览器中运行良好 但在 Opera 12 15 JQuery 库 v1 10 1 中无法
  • 通过 matplotlib 中的一个因子更改绘图比例

    我正在用 python 创建一个图 有没有办法按一个因子重新缩放轴 这yscale and xscale命令只允许我关闭对数刻度 Edit 例如 如果我有一个情节x尺度从 1 nm 到 50 nm x 尺度范围从 1x10 9 到 50x1
  • 使用 C void 参数“void foo(void)”更好还是不使用“void foo()”更好? [复制]

    这个问题在这里已经有答案了 什么是更好的 void foo or void foo void 对于 void 它看起来丑陋且不一致 但有人告诉我它很好 这是真的 编辑 我知道一些旧的编译器会做奇怪的事情 但如果我只使用 GCC 是void
  • 使用没有默认“名称”的 jquery TokenInput

    我尝试使用此处找到的 jquery tokeninput http loopj com jquery tokeninput 遵循 Railcast 的指南 http railscasts com episodes 258 token fie
  • 使用 IComparer 而不是 OrderBy 对字典列表进行排序

    以下是我的收集以及数据 var data new List
  • 克隆gitlab项目,使用git lfs,无需一直提供密码

    我决定在 gitlab 上尝试 git lfs 我注意到它不适用于 ssh 所以我决定使用 https 推送工作得很好 但是当我尝试克隆我的项目时 它要求我输入用户名和密码every file 这有点烦人 有什么解决方法吗 编辑2018 这
  • 绑定 DataGridTemplateColumn 可见性

    我试图将数据网格中列的可见性绑定到 ViewModel 中的布尔 DependencyProperty 在本例中设置为视图 UserControl 的数据上下文 由于某种原因 我似乎不明白 它不起作用 查看此处后 我发现 datagridt
  • 如何将 OleVariant 转换为 IDispatch 派生?

    今天我带来了另一个让我头疼的问题 我确实将 DAO 3 6 类型库导入到我的 delphi 7 中 并且我开始看到许多有趣的接口 因此我面临着有趣的问题 每次类 Fields 出现在另一个类的属性上时 它们都有正确的定义 我的意思是 他被定
  • 使用单个更新查询从深层嵌套数组中删除多个元素

    我有以下类型的文件 id ObjectId 5c05984246a0201286d4b57a f x a onlineStore p s a t id 1 dateP 20200 09 20 did x dst y den z
  • new操作分配的内存是连续的吗?

    正如标题所说 我想知道在c 中 一个new操作分配的内存是否是连续的 BYTE data new BYTE size 在此代码中 无论给定大小 返回的内存区域都是连续的 如果堆管理器无法分配连续的内存size 失败了 异常 或 NULLma
  • 断言语句在 C++ 中不起作用[关闭]

    Closed 这个问题不符合堆栈溢出指南 目前不接受答案 在我的程序中使用断言时 我遇到了一个奇怪的问题 即使我添加一行代码 程序也不会终止assert false 但是assert当我编写几行示例代码时有效 有人知道为什么会发生吗 如果你
  • Terraform for-each 包含对象列表

    我在 Variables tf 文件中有以下变量 variable tenants description Map of project names to configuration type list object name string
  • 如何查找 SPFolder 中的项目计数?

    我有一个将项目存储在文件夹层次结构中的列表 我注意到SPFolder Files Count始终为零 有没有办法找出文件夹中有多少个列表项 我假设您正在寻找直接子项而不是后代 例如子文件夹中的项目 您是否还想在计数中包含子文件夹 在这种情况
  • 使用 Shiny 创建响应式 selectInput - flexdashboard

    我正在尝试在 Flexdashboard 文档中使用 Shiny 制作反应式 selectInput 我的第一次selectInput选择海洋公园中的区域类型 selectInput Zone label Marine Park Zonin
  • Windows PowerShell:更改命令提示符

    使用 Windows PowerShell 如何更改命令提示符 例如 默认提示是 PS C Documents and Settings govendes My Documents gt 我想自定义该字符串 只需将函数prompt在您的 P
  • 如何更改 pinax(0.9a2) 模板?

    我已经安装了带有 pinax bootstrap 主题的 pinax 0 9a2 现在我想自定义它并重新设计主题 但我在模板文件夹中没有找到任何 css 文件 那么如何自定义bootstrap主题的css呢 这就是我如何启动并运行我的基本