From 80d83f5ae3c1f2cd0d2f8eb2b44493ddc0212a74 Mon Sep 17 00:00:00 2001 From: Rushabh Mehta Date: Thu, 11 Jul 2013 15:19:13 +0530 Subject: [PATCH] [style] Style Fixes for Home Page --- setup/doctype/company/company.py | 3 + website/css/website.css | 14 +- .../style_settings/custom_template.css | 145 +++++++++--------- .../doctype/style_settings/style_settings.py | 13 ++ website/templates/html/navbar.html | 2 +- website/templates/html/outer.html | 2 +- 6 files changed, 101 insertions(+), 78 deletions(-) diff --git a/setup/doctype/company/company.py b/setup/doctype/company/company.py index 968296c9017..03ab4396ab5 100644 --- a/setup/doctype/company/company.py +++ b/setup/doctype/company/company.py @@ -93,6 +93,9 @@ class DocType: "url": "blog" }) website_settings.save() + style_settings = webnotes.bean("Style Settings", "Style Settings") + style_settings.doc.font_size = "15px" + style_settings.save() def create_default_accounts(self): self.fld_dict = {'account_name':0,'parent_account':1,'group_or_ledger':2,'is_pl_account':3,'account_type':4,'debit_or_credit':5,'company':6,'tax_rate':7} diff --git a/website/css/website.css b/website/css/website.css index 3ced12ffcc8..b71ff1316e3 100644 --- a/website/css/website.css +++ b/website/css/website.css @@ -18,6 +18,19 @@ img { padding-bottom: 30px; } +.outer { + padding: 0px 20px; +} + +.navbar { + margin: 0px -20px; +} + +.banner { + margin-top: 20px; + padding: 0px 20px; +} + .missing-image { background-color: #eee; padding: 40px; @@ -42,7 +55,6 @@ img { } div.web-footer { - border-top: 1px solid #dddddd; padding-top: 10px; } diff --git a/website/doctype/style_settings/custom_template.css b/website/doctype/style_settings/custom_template.css index eb422c96b16..b44298923e9 100644 --- a/website/doctype/style_settings/custom_template.css +++ b/website/doctype/style_settings/custom_template.css @@ -29,7 +29,7 @@ body { {% endif %} div.outer { - background-color: #{{ doc.page_background or "fffffff" }}; + background-color: #{{ doc.page_background }}; } {% if doc.google_web_font_for_heading or doc.heading_font %}h1, h2, h3, h4, h5 { @@ -52,9 +52,9 @@ div.outer { -webkibox-shadow: 0 0 8px rgba(0, 0, 0, 0.2); } {% else %} -{% if doc.background_color == doc.page_background %} +{% if doc.background_color.lower() == doc.page_background.lower() %} div.web-footer { - border-top: 1px solid #{{ get_hex_shade(doc.page_background or "ffffff", 15) }}; + border-top: 1px solid #{{ get_hex_shade(doc.page_background, 15) }}; padding-top: 10px; } {% endif %} @@ -62,60 +62,55 @@ div.web-footer { div.web-footer, div.web-footer a { font-size: 90%; - color: #{{ get_hex_shade(doc.background_color or "ffffff", 70) }}; + color: #{{ get_hex_shade(doc.background_color, 70) }}; } /* Bootstrap Navbar */ -.navbar-inverse { +.navbar { box-shadow: none; border-radius: 0px; - background-color: #{{ doc.top_bar_background or "444444"}}; + background-color: #{{ doc.top_bar_background}}; background-repeat: repeat-x; background-image: none; - border-bottom: 1px solid {% if doc.top_bar_background == doc.page_background -%} - #{{ get_hex_shade(doc.page_background or "ffffff", 15) }}; + border-bottom: 1px solid {% if doc.top_bar_background.lower() == doc.page_background.lower() -%} + #{{ get_hex_shade(doc.page_background, 15) }}; {%- else -%} transparent; {%- endif %} } -.navbar-inverse .navbar-brand, -.navbar-inverse .navbar-brand:hover, -.navbar-inverse .navbar-brand:focus, -.navbar-inverse .nav > li > a { - color: #{{ doc.top_bar_foreground or "fffffff"}}; +.navbar .navbar-brand, +.navbar .navbar-brand:hover, +.navbar .navbar-brand:focus, +.navbar .nav > li > a { + color: #{{ doc.top_bar_foreground }}; text-shadow: none; } -.navbar-inverse .nav > li > a:hover, -.navbar-inverse .nav > li > a:focus { - color: #{{ doc.top_bar_background or "0000000"}}; -} - -.navbar-inverse .navbar-text { - color: #999999; -} - -.navbar-inverse .nav > li > a:focus, -.navbar-inverse .nav > li > a:hover { - color: #{{ doc.top_bar_foreground or "fffffff"}}; +.navbar .nav > li > a:hover, +.navbar .nav > li > a:focus { + color: #{{ doc.top_bar_foreground }}; background-color: transparent; } -.navbar-inverse .nav .active > a, -.navbar-inverse .nav .active > a:hover, -.navbar-inverse .nav .active > a:focus { - color: #{{ doc.top_bar_foreground or "fffffff"}}; - background-color: transparent; -} - -.navbar-inverse .navbar-link { +.navbar .navbar-text { color: #999999; } -.navbar-inverse .navbar-link:hover, -.navbar-inverse .navbar-link:focus { - color: #{{ doc.top_bar_foreground or "fffffff"}}; +.navbar .nav .active > a, +.navbar .nav .active > a:hover, +.navbar .nav .active > a:focus { + color: #{{ doc.top_bar_foreground }}; + background-color: transparent; +} + +.navbar .navbar-link { + color: #444444; +} + +.navbar .navbar-link:hover, +.navbar .navbar-link:focus { + color: #{{ doc.top_bar_foreground}}; } .navbar-fixed-top, @@ -136,55 +131,55 @@ div.web-footer, div.web-footer a { box-shadow: none; } -.navbar-inverse .nav li.dropdown > .dropdown-toggle .caret, -.navbar-inverse .nav li.dropdown > .dropdown-toggle:hover .caret { - border-top-color: #{{ doc.top_bar_foreground or "fffffff"}}; - border-bottom-color: #{{ doc.top_bar_foreground or "fffffff"}}; +.navbar .nav li.dropdown > .dropdown-toggle .caret, +.navbar .nav li.dropdown > .dropdown-toggle:hover .caret { + border-top-color: #{{ doc.top_bar_foreground}}; + border-bottom-color: #{{ doc.top_bar_foreground}}; } -.navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret, -.navbar-inverse .nav li.dropdown.open > .dropdown-toggle:hover .caret { - border-top-color: #{{ doc.top_bar_background or "0000000"}}; - border-bottom-color: #{{ doc.top_bar_background or "0000000"}}; +.navbar .nav li.dropdown.open > .dropdown-toggle .caret, +.navbar .nav li.dropdown.open > .dropdown-toggle:hover .caret { + border-top-color: #{{ doc.top_bar_background}}; + border-bottom-color: #{{ doc.top_bar_background}}; } -.navbar-inverse .nav li.dropdown.open > .dropdown-toggle { - color: #{{ doc.top_bar_background or "0000000"}}; - background-color: #{{ doc.top_bar_foreground or "fffffff"}}; +.navbar .nav li.dropdown.open > .dropdown-toggle { + color: #{{ doc.top_bar_background}}; + background-color: #{{ doc.top_bar_foreground}}; } @media (max-width: 800px) { - .navbar-inverse .nav-collapse .nav > li > a, - .navbar-inverse .nav-collapse .dropdown-menu a { - background-color: #{{ doc.top_bar_background or "0000000"}}; - color: #{{ doc.top_bar_foreground or "fffffff"}}; + .navbar .nav-collapse .nav > li > a, + .navbar .nav-collapse .dropdown-menu a { + background-color: #{{ doc.top_bar_background}}; + color: #{{ doc.top_bar_foreground}}; } - .navbar-inverse .nav-collapse .nav > li > a:hover, - .navbar-inverse .nav-collapse .dropdown-menu a:hover { - background-color: #{{ doc.top_bar_foreground or "fffffff"}}; - color: #{{ doc.top_bar_background or "0000000"}}; + .navbar .nav-collapse .nav > li > a:hover, + .navbar .nav-collapse .dropdown-menu a:hover { + background-color: #{{ doc.top_bar_foreground}}; + color: #{{ doc.top_bar_background}}; } - .navbar-inverse .nav li.dropdown > .dropdown-toggle .caret { - border-top-color: #{{ doc.top_bar_foreground or "fffffff" }}; - border-bottom-color: #{{ doc.top_bar_foreground or "fffffff" }}; + .navbar .nav li.dropdown > .dropdown-toggle .caret { + border-top-color: #{{ doc.top_bar_foreground }}; + border-bottom-color: #{{ doc.top_bar_foreground }}; } - .navbar-inverse .nav li.dropdown > .dropdown-toggle:hover .caret { - border-top-color: #{{ doc.top_bar_background or "0000000" }}; - border-bottom-color: #{{ doc.top_bar_background or "0000000" }}; + .navbar .nav li.dropdown > .dropdown-toggle:hover .caret { + border-top-color: #{{ doc.top_bar_background }}; + border-bottom-color: #{{ doc.top_bar_background }}; } - .navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret, - .navbar-inverse .nav li.dropdown.open > .dropdown-toggle:hover .caret { - border-top-color: #{{ doc.top_bar_background or "0000000" }}; - border-bottom-color: #{{ doc.top_bar_background or "0000000" }}; + .navbar .nav li.dropdown.open > .dropdown-toggle .caret, + .navbar .nav li.dropdown.open > .dropdown-toggle:hover .caret { + border-top-color: #{{ doc.top_bar_background }}; + border-bottom-color: #{{ doc.top_bar_background }}; } } .breadcrumb { - background-color: #{{ get_hex_shade(doc.page_background or "ffffff", 10) }}; + background-color: #{{ get_hex_shade(doc.page_background, 10) }}; } .breadcrumb > li { @@ -194,39 +189,39 @@ div.web-footer, div.web-footer a { .table-striped tbody > tr:nth-child(odd) > td, .table-striped tbody > tr:nth-child(odd) > th { - background-color: #{{ get_hex_shade(doc.page_background or "ffffff", 5) }}; + background-color: #{{ get_hex_shade(doc.page_background, 5) }}; } .table-hover tbody tr:hover td, .table-hover tbody tr:hover th { - background-color: #{{ get_hex_shade(doc.page_background or "ffffff", 10) }}; + background-color: #{{ get_hex_shade(doc.page_background, 10) }}; } .table-bordered { - border: 1px solid #{{ get_hex_shade(doc.page_background or "ffffff", 15) }}; + border: 1px solid #{{ get_hex_shade(doc.page_background, 15) }}; } .table th, .table td { - border-top: 1px solid #{{ get_hex_shade(doc.page_background or "ffffff", 15) }}; + border-top: 1px solid #{{ get_hex_shade(doc.page_background, 15) }}; } .table-bordered th, .table-bordered td { - border-left: 1px solid #{{ get_hex_shade(doc.page_background or "ffffff", 15) }}; + border-left: 1px solid #{{ get_hex_shade(doc.page_background, 15) }}; } .hero-unit { - background-color: #{{ get_hex_shade(doc.page_background or "ffffff", 15) }}; + background-color: #{{ get_hex_shade(doc.page_background, 15) }}; } pre, code { - background-color: #{{ get_hex_shade(doc.page_background or "ffffff", 5) }}; + background-color: #{{ get_hex_shade(doc.page_background, 5) }}; } hr { - border-top: 1px solid #{{ get_hex_shade(doc.page_background or "ffffff", 15) }}; - border-bottom: 1px solid #{{ get_hex_shade(doc.page_background or "ffffff", 5) }}; + border-top: 1px solid #{{ get_hex_shade(doc.page_background, 15) }}; + border-bottom: 1px solid #{{ get_hex_shade(doc.page_background, 5) }}; } diff --git a/website/doctype/style_settings/style_settings.py b/website/doctype/style_settings/style_settings.py index ddfcf5c52a3..f05a8eb4feb 100644 --- a/website/doctype/style_settings/style_settings.py +++ b/website/doctype/style_settings/style_settings.py @@ -30,6 +30,19 @@ class DocType: from webnotes.webutils import get_hex_shade import os + default_colours = { + "background_color": "FFFFFF", + "page_background": "FFFFFF", + "top_bar_background": "FFFFFF", + "top_bar_foreground": "444444", + "page_headings": "222222", + "page_text": "000000" + } + + for d in default_colours: + if not self.doc.fields.get(d): + self.doc.fields[d] = default_colours[d] + self.validate_colors() with open(os.path.join( diff --git a/website/templates/html/navbar.html b/website/templates/html/navbar.html index 11f2fb000aa..9166cde84db 100644 --- a/website/templates/html/navbar.html +++ b/website/templates/html/navbar.html @@ -1,4 +1,4 @@ -
+
{%- if brand_html %}{{ brand_html }}{% endif -%}
- {% if banner_html %}
+ {% if banner_html %}{% endif %}