[ADD] theme 8.0
@@ -0,0 +1,27 @@
|
||||
Odoo Proprietary License v1.0
|
||||
|
||||
This software and associated files (the "Software") may only be used (executed,
|
||||
modified, executed after modifications) if you have purchased a valid license
|
||||
from the authors, typically via Odoo Apps, or if you have received a written
|
||||
agreement from the authors of the Software (see the COPYRIGHT file).
|
||||
|
||||
You may develop Odoo modules that use the Software as a library (typically
|
||||
by depending on it, importing it and using its resources), but without copying
|
||||
any source code or material from the Software. You may distribute those
|
||||
modules under the license of your choice, provided that this license is
|
||||
compatible with the terms of the Odoo Proprietary License (For example:
|
||||
LGPL, MIT, or proprietary licenses similar to this one).
|
||||
|
||||
It is forbidden to publish, distribute, sublicense, or sell copies of the Software
|
||||
or modified copies of the Software.
|
||||
|
||||
The above copyright notice and this permission notice must be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
|
||||
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
|
||||
DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
|
||||
ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
|
||||
DEALINGS IN THE SOFTWARE.
|
||||
@@ -0,0 +1,27 @@
|
||||
{
|
||||
'name': 'Theme Kiddo',
|
||||
'description': 'Kiddo theme for Odoo Website',
|
||||
'category': 'Theme/Ecommerce',
|
||||
'version': '1.1',
|
||||
'author': 'OpenERP SA',
|
||||
'depends': ['theme_common'],
|
||||
'data': [
|
||||
'views/assets.xml',
|
||||
'views/customize_modal.xml',
|
||||
'views/snippets.xml',
|
||||
'views/images_content.xml',
|
||||
'views/images_library.xml',
|
||||
'views/snippet_options.xml',
|
||||
],
|
||||
'demo': [
|
||||
'demo/demo.xml',
|
||||
'demo/blocks.xml',
|
||||
'demo/demo-menu.xml',
|
||||
],
|
||||
'images': [
|
||||
'static/description/Kiddo_description.png',
|
||||
],
|
||||
'price': 199,
|
||||
'currency': 'EUR',
|
||||
'live_test_url': 'https://theme-kiddo.odoo.com/page/demo'
|
||||
}
|
||||
@@ -0,0 +1,207 @@
|
||||
<?xml version="1.0" encoding="utf-8" ?>
|
||||
<openerp>
|
||||
<data>
|
||||
|
||||
<template id="website.demo_blocks" name="Theme Demo" page="True">
|
||||
<t t-call="website.layout">
|
||||
|
||||
<div id="wrap" class="oe_structure oe_empty">
|
||||
|
||||
<!-- Content -->
|
||||
|
||||
<div data-oe-call="theme_common.s_separator_block"/>
|
||||
<section class="s_title_big mb0 mt0">
|
||||
<div class="oe_share">
|
||||
<h1 class="mb32 mt32 text-center">
|
||||
<font class="text-warning">Content blocks</font>
|
||||
</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h4 class="text-muted text-center">Title block</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-oe-call="theme_common.s_title_big"/>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h4 class="text-muted text-center">2 column text block</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-oe-call="theme_common.s_2_column_text"/>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h4 class="text-muted text-center">3 column text block</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-oe-call="theme_common.s_3_column_text"/>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h4 class="text-muted text-center">4 column text block</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-oe-call="theme_common.s_4_column_text"/>
|
||||
|
||||
<!-- Structure -->
|
||||
|
||||
<div data-oe-call="theme_common.s_separator_block"/>
|
||||
<section class="s_title_big mb0 mt0">
|
||||
<div class="oe_share">
|
||||
<h1 class="mb32 mt32 text-center">
|
||||
<font class="text-warning">Structure blocks</font>
|
||||
</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 mt16 mb16">
|
||||
<h4 class="text-muted text-center">Custom banner</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-oe-call="theme_common.s_banner_parallax"/>
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 mt16 mb16">
|
||||
<h4 class="text-muted text-center">Big image / text</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-oe-call="theme_common.s_big_picture_text"/>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 mt16 mb16">
|
||||
<h4 class="text-muted text-center">Text / big image</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-oe-call="theme_common.s_text_big_picture"/>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 mt16 mb16">
|
||||
<h4 class="text-muted text-center">Cubes</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-oe-call="theme_common.s_cubes"/>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 mt16 mb16">
|
||||
<h4 class="text-muted text-center">Header / text / big image</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-oe-call="theme_common.s_header_text_big_picture"/>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 mt16 mb16">
|
||||
<h4 class="text-muted text-center">Text / image / text</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-oe-call="theme_common.s_text_picture_text"/>
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 mt16 mb16">
|
||||
<h4 class="text-muted text-center">Product list</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-oe-call="theme_common.s_product_list"/>
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 mt16 mb16">
|
||||
<h4 class="text-muted text-center">Color blocks</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-oe-call="theme_common.s_color_blocks_4"/>
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 mt16 mb16">
|
||||
<h4 class="text-muted text-center">Discount</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-oe-call="theme_common.s_discount"/>
|
||||
|
||||
<!-- Features -->
|
||||
|
||||
<div data-oe-call="theme_common.s_separator_block"/>
|
||||
<section class="s_title_big mb0 mt0">
|
||||
<div class="oe_share">
|
||||
<h1 class="mb32 mt32 text-center">
|
||||
<font class="text-warning">Feature blocks</font>
|
||||
</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 mt16 mb16">
|
||||
<h4 class="text-muted text-center">Slideshow banner</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-oe-call="theme_common.s_banner_3"/>
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 mt16 mb16">
|
||||
<h4 class="text-muted text-center">Product slideshow</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-oe-call="theme_common.s_products_carousel"/>
|
||||
|
||||
</div>
|
||||
|
||||
</t>
|
||||
</template>
|
||||
|
||||
</data>
|
||||
</openerp>
|
||||
@@ -0,0 +1,20 @@
|
||||
<?xml version="1.0" encoding="utf-8" ?>
|
||||
<openerp>
|
||||
<data>
|
||||
|
||||
<record id="kiddo_home" model="website.menu">
|
||||
<field name="name">Demo</field>
|
||||
<field name="url">/page/demo</field>
|
||||
<field name="parent_id" ref="website.main_menu"/>
|
||||
<field name="sequence" type="int">60</field>
|
||||
</record>
|
||||
|
||||
<record id="demo_blocks" model="website.menu">
|
||||
<field name="name">Blocks</field>
|
||||
<field name="url">/page/demo_blocks</field>
|
||||
<field name="parent_id" ref="website.main_menu"/>
|
||||
<field name="sequence" type="int">60</field>
|
||||
</record>
|
||||
|
||||
</data>
|
||||
</openerp>
|
||||
@@ -0,0 +1,213 @@
|
||||
<?xml version="1.0" encoding="utf-8" ?>
|
||||
<openerp>
|
||||
<data>
|
||||
|
||||
<template id="website.demo" page="True" name="Theme Demo">
|
||||
<t t-call="website.layout">
|
||||
|
||||
<div id="wrap" class="oe_structure oe_empty">
|
||||
|
||||
<section class="carousel s_banner_3 slide" data-interval="10000" id="myCarousel0">
|
||||
<ol class="carousel-indicators" type="01">
|
||||
<li class="active" data-slide-to="0" data-target="#myCarousel0"/>
|
||||
</ol>
|
||||
<div class="carousel-inner">
|
||||
<div class="item bg-img-01 active">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-sm-12 hero-bg">
|
||||
<h1>Sell your products</h1>
|
||||
<h2>with Theme Kiddo.</h2>
|
||||
<img alt="#" src="/website/image/theme_common.image_content_01" style="img img-responsive"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item bg-img-02">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-sm-12 hero-bg">
|
||||
<h1>Sell your products</h1>
|
||||
<h2>with this theme.</h2>
|
||||
<img alt="#" src="/website/image/theme_common.image_content_01" style="img img-responsive"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-control left" data-slide="prev" data-target="#myCarousel0" href="#myCarousel0">
|
||||
<i class="fa fa-chevron-left"/>
|
||||
</div>
|
||||
<div class="carousel-control right" data-slide="next" data-target="#myCarousel0" href="#myCarousel0">
|
||||
<i class="fa fa-chevron-right"/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="jumbotron s_big_message mt0 mb0 gray">
|
||||
<div class="container">
|
||||
<h1>Sell Online. Easily.</h1>
|
||||
<p>Write one sentence to convince visitor about your message.</p>
|
||||
<p>
|
||||
<a class="btn btn-info btn-lg" href="/page/website.contactus">Contact us </a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s_cubes">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-6 cube cube-big col-xs-12 col-sm-12 bg-img-03">
|
||||
<div class="content">
|
||||
<div class="col-xs-12 cube-heading">
|
||||
<h3>Some text</h3>
|
||||
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, quidem!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cube-big col-md-6 col-xs-12 col-sm-12">
|
||||
<div class="row">
|
||||
<div class="cube cube-small col-md-6 col-sm-6 col-xs-12">
|
||||
<div class="cube-heading">
|
||||
<h4 class="text-center">Lorem ispum</h4>
|
||||
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, officiis, beatae! Excepturi quaerat, sint molestiae! Ab et est officia reprehenderit?</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cube cube-small col-md-6 col-sm-6 col-xs-12 bg-img-04"/></div>
|
||||
<div class="row">
|
||||
<div class="cube cube-small col-md-6 col-sm-6 col-xs-12 bg-img-02"/>
|
||||
<div class="cube cube-small col-md-6 col-sm-6 col-xs-12 last">
|
||||
<div class="cube-heading">
|
||||
<h4 class="text-center">Lorem ispum</h4>
|
||||
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, officiis, beatae! Excepturi quaerat, sint molestiae! Ab et est officia reprehenderit?</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s_separator_block lightgray">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="separator-container"/></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s_3_column_text oe_structure mt64 mb64">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<h2>Custom Pages: Have No Limits.</h2>
|
||||
<p>Our #1 priority is you, the user. We believe in our product and hold ourselves to the highest standards. We truly care about your site as much as you do, which is why we offer amazing support at our dedicated support center. In addition, we offer free updates with new features requested by our users. You can count on us.<br/>Kiddo gives you limitless potential to build amazing pages. Easily create unique page layouts using the tools we provide. In addition, we have you covered with dozens of beautiful pre-designed pages you can quickly choose from.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h2>Custom Pages: Have No Limits.</h2>
|
||||
<p>Our #1 priority is you, the user. We believe in our product and hold ourselves to the highest standards. We truly care about your site as much as you do, which is why we offer amazing support at our dedicated support center. In addition, we offer free updates with new features requested by our users. You can count on us.<br/>Kiddo gives you limitless potential to build amazing pages. Easily create unique page layouts using the tools we provide. In addition, we have you covered with dozens of beautiful pre-designed pages you can quickly choose from.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h2>Custom Pages: Have No Limits.</h2>
|
||||
<p>Our #1 priority is you, the user. We believe in our product and hold ourselves to the highest standards. We truly care about your site as much as you do, which is why we offer amazing support at our dedicated support center. In addition, we offer free updates with new features requested by our users. You can count on us.<br/>Kiddo gives you limitless potential to build amazing pages. Easily create unique page layouts using the tools we provide. In addition, we have you covered with dozens of beautiful pre-designed pages you can quickly choose from.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s_color_blocks_4 o_animation mt0">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-sm-6 s_color_blocks_4_block text-center bg-alpha">
|
||||
<h4>
|
||||
<span class="fa fa-check-circle fa-lg"/> A COLOR BLOCK
|
||||
</h4>
|
||||
<p>Highlight Your Content</p>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-6 s_color_blocks_4_block text-center bg-beta">
|
||||
<h4>
|
||||
<span class="fa fa-check-circle fa-lg"/> A COLOR BLOCK
|
||||
</h4>
|
||||
<p>Customize Backgrounds</p>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-6 s_color_blocks_4_block text-center bg-gamma">
|
||||
<h4>
|
||||
<span class="fa fa-check-circle fa-lg"/> A COLOR BLOCK
|
||||
</h4>
|
||||
<p>Resize and Duplicate</p>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-6 s_color_blocks_4_block text-center bg-delta">
|
||||
<h4>
|
||||
<span class="fa fa-check-circle fa-lg"/> A COLOR BLOCK
|
||||
</h4>
|
||||
<p>Select the Colors</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s_features_carousel carousel slide" data-interval="10000" id="myCarousel1">
|
||||
<ol class="carousel-indicators hidden" type="01">
|
||||
<li class="active" data-slide-to="0" data-target="#myCarousel1"/>
|
||||
</ol>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 mt64">
|
||||
<h2>LAYOUT OPTIONS</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-inner">
|
||||
<div class="item image_text active">
|
||||
<div class="container mb92">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-xs-12">
|
||||
<div class="circle center-block mt16">
|
||||
<div class="mask">
|
||||
<span class="text-center">01.</span>
|
||||
<p>DECISIONS, DECISIONS, AND EVEN MORE DECISIONS</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt32 text-center">This theme does not limit you to one setup, we prefer to give you options. From boxed layout to wide, left sidebars to right and multiple headers; we let you decide. That’s right, you can have your cake and eat some too.</p>
|
||||
</div>
|
||||
<div class="col-md-6 col-xs-12">
|
||||
<img class="img img-responsive center-block" src="/website/image/theme_common.image_content_04"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item image_text">
|
||||
<div class="container mb92">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-xs-12">
|
||||
<div class="circle center-block mt16">
|
||||
<div class="mask">
|
||||
<span class="text-center">02.</span>
|
||||
<p>DESIGN, DESIGN, AND EVEN MORE DESIGN</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt32 text-center">This theme does not limit you to one setup, we prefer to give you options. From boxed layout to wide, left sidebars to right and multiple headers; we let you decide. That’s right, you can have your cake and eat some too.</p>
|
||||
</div>
|
||||
<div class="col-md-6 col-xs-12">
|
||||
<img class="img img-responsive center-block" src="/website/image/theme_common.image_content_03"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-control left" data-slide="prev" data-target="#myCarousel1" href="#myCarousel1">
|
||||
<i class="fa fa-chevron-left"/>
|
||||
</div>
|
||||
<div class="carousel-control right" data-slide="next" data-target="#myCarousel1" href="#myCarousel1">
|
||||
<i class="fa fa-chevron-right"/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
</t>
|
||||
</template>
|
||||
|
||||
</data>
|
||||
</openerp>
|
||||
@@ -0,0 +1,34 @@
|
||||
You need to install the *Less CSS* compiler to run this theme
|
||||
|
||||
* on Linux, use your distribution's package manager to install nodejs and npm.
|
||||
* In debian wheezy and Ubuntu 13.10 and before you need to install nodejs manually:
|
||||
|
||||
.. code-block:: console
|
||||
|
||||
$ wget -qO- https://deb.nodesource.com/setup | bash -
|
||||
$ apt-get install -y nodejs
|
||||
|
||||
* In later debian (>jessie) and ubuntu (>14.04) you may need to add a symlink as npm packages call ``node`` but debian calls the binary ``nodejs``
|
||||
|
||||
.. code-block:: console
|
||||
|
||||
$ apt-get install -y npm
|
||||
$ sudo ln -s /usr/bin/nodejs /usr/bin/node
|
||||
|
||||
* Once npm is installed, use it to install less and less-plugin-clean-css:
|
||||
|
||||
.. code-block:: console
|
||||
|
||||
$ sudo npm install -g less less-plugin-clean-css
|
||||
|
||||
* on OS X, install nodejs via your preferred package manager (`homebrew <http://brew.sh/>`_, `macports <https://www.macports.org/>`_) then install less and less-plugin-clean-css:
|
||||
|
||||
.. code-block:: console
|
||||
|
||||
$ sudo npm install -g less less-plugin-clean-css
|
||||
|
||||
* on Windows, `install nodejs <http://nodejs.org/download/>`_, reboot (to update the `PATH`) and install less and less-plugin-clean-css:
|
||||
|
||||
.. code-block:: ps1
|
||||
|
||||
C:\> npm install -g less less-plugin-clean-css
|
||||
|
After Width: | Height: | Size: 282 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 5.8 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 4.8 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 7.2 KiB |
|
After Width: | Height: | Size: 8.1 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 7.4 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 6.6 KiB |
|
After Width: | Height: | Size: 115 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 596 B |
@@ -0,0 +1,192 @@
|
||||
<section class="container">
|
||||
<h2 class="text-muted mt16">Html5 Responsive Bootstrap Theme for Odoo CMS</h2>
|
||||
<hr>
|
||||
<p class="lead">Kiddo is a professional responsive HTML5 theme, built using Bootstrap3,
|
||||
the most popular front-end framework for developing responsive, mobile
|
||||
first projects on the web. Just drag & drop the new building blocks
|
||||
you need to easily build your layout. All layouts are made of sections,
|
||||
that you can easily combine to fit your specific project.</p>
|
||||
<img src="Kiddo_description.png" class="img-responsive center-block">
|
||||
<hr>
|
||||
|
||||
<h2 class="mt32 text-muted">Kiddo Customization Tool</h2>
|
||||
<p class="mb32">Theme Kiddo comes with customization tools. You can easily change the background, the colors and the font combination of your website or you a preset.</p>
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<img src="customtool.jpg" class="img-responsive center-block">
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<h3>Theme Kiddo comes with a lot of options</h3>
|
||||
<ul>
|
||||
<li>6 PRESETS</li>
|
||||
<li>WIDE OR BOXED LAYOUT</li>
|
||||
<li>CUSTOM FOOTER</li>
|
||||
<li>6 COLOR SCHEMES</li>
|
||||
<li>8 BACKGROUND SHADES OR USE YOUR OWN</li>
|
||||
<li>6 FONT COMBINATIONS</li>
|
||||
<li>10 BACKGROUND PATTERNS</li>
|
||||
</ul>
|
||||
<br/>
|
||||
<p>All the background, color and font combinations were made to work together. You can not go wrong with the settings.</p>
|
||||
|
||||
<h3>Minimalistic Flat Design</h3>
|
||||
<p>Kiddo was made with easy customization and branding in mind. Based on simple, modern and typographical elements, it allows you to easily customize your website.</p>
|
||||
|
||||
<h3>6 Prebuild Presets</h3>
|
||||
<p>You don't have the time to play with options? Don't worry, Kiddo gives you six full presets wich combine colors, fonts and background.</p>
|
||||
|
||||
<p>This theme has an <a href="https://apps.odoo.com/apps/8.0/theme_kiddo_sale/">additional eCommerce plugin</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr/>
|
||||
|
||||
<h2 class="text-muted">Kiddo Building Blocks</h2>
|
||||
<p class="mb32">You get a new complete range of building blocks.</p>
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<h4 class="text-muted">CONTENT BLOCKS</h4>
|
||||
<ul class="mb16">
|
||||
<li>Title</li>
|
||||
<li>1 Column Text</li>
|
||||
<li>2 Column Text</li>
|
||||
<li>3 Column Text</li>
|
||||
<li>4 Column Text</li>
|
||||
<li>Custom Button</li>
|
||||
<li>Separator Block</li>
|
||||
</ul>
|
||||
<h4 class="text-muted mb16">STRUCTURE BLOCKS</h4>
|
||||
<ul class="mb16">
|
||||
<li>Custom Banner</li>
|
||||
<li>Big Picture + Text</li>
|
||||
<li>Text + Big Picture</li>
|
||||
<li>Cubes</li>
|
||||
<li>Features Carousel</li>
|
||||
<li>Header + Text + Picture</li>
|
||||
<li>Product List</li>
|
||||
<li>Text + Image + Text</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h4 class="text-muted">FEATURES BLOCKS</h4>
|
||||
<ul class="mb16">
|
||||
<li>Slide Banner</li>
|
||||
</ul>
|
||||
<h4 class="text-muted">EFFECTS BLOCKS</h4>
|
||||
<ul class="mb16">
|
||||
<li>Big Image Parallax</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h3>Customize Your Blocks</h3>
|
||||
<p class="mb16">Each building blocks comes with its own options. </p>
|
||||
<img src="customtool2.jpg"
|
||||
class="img-responsive center-block">
|
||||
</div>
|
||||
</div>
|
||||
<p>Some fonts might not work with extended charsets.</p>
|
||||
<p>The images in the theme are copyrighted and can't be used outside of the odoo.com domain.</p>
|
||||
<hr>
|
||||
|
||||
<h1 class="text-center">CONTRIBUTORS LIST</h1>
|
||||
<br/>
|
||||
<p class="strong text-center">This theme was created with the help of our user community.</p>
|
||||
|
||||
<h3 class="text-center">Thanks to our backers the Indiegogo campaign was a success!</h3>
|
||||
<p class="text-center"><a>https://www.indiegogo.com/projects/bootstrap-themes-for-odoo-cms/</a></p>
|
||||
<br/>
|
||||
|
||||
<h1 class="text-center"><u>Main Sponsor</u></h1>
|
||||
<br/>
|
||||
<div class="row">
|
||||
<div class="col-md-2">
|
||||
<a href="http://www.aselcis.com/" target="blank">
|
||||
<img src="contributors/aselcis.jpg" class="img-responsive center-block"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<a href="http://www.bas-solutions.nl/" target="blank">
|
||||
<img src="contributors/bas-solutions.png" class="img-responsive center-block"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<a href="http://www.bloopark.de/" target="blank">
|
||||
<img src="contributors/bloopark.png" class="img-responsive center-block"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<a href="http://www.brouwland.com" target="blank">
|
||||
<img src="contributors/brouwland.jpg" class="img-responsive center-block"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<a href="http://www.catsanddogs.com/" target="blank">
|
||||
<img src="contributors/catsdogs.png" class="img-responsive center-block"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<a href="https://www.hucke-media.de/" target="blank">
|
||||
<img src="contributors/huckemedia.png" class="img-responsive center-block"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-2">
|
||||
<a href="http://www.datadialog.net/" target="blank">
|
||||
<img src="contributors/dialognet.png" class="img-responsive center-block"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<a href="http://www.dynapps.be/" target="blank">
|
||||
<img src="contributors/dynapps.jpg" class="img-responsive center-block"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<a href="http://opusvl.com/" target="blank">
|
||||
<img src="contributors/opusvl.png" class="img-responsive center-block"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<a href="http://oxenworkwear.com/" target="blank">
|
||||
<img src="contributors/oxen.jpg" class="img-responsive center-block"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<a href="http://www.simplit.co/" target="blank">
|
||||
<img src="contributors/simplitco.jpg" class="img-responsive center-block"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<a href="http://www.sodexis.com/" target="blank">
|
||||
<img src="contributors/sodexis.jpg" class="img-responsive center-block"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb32">
|
||||
<div class="col-md-2 col-md-offset-3">
|
||||
<a href="https://www.techreceptives.com" target="blank">
|
||||
<img src="contributors/tech-receptives.png" class="img-responsive center-block"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<a href="http://www.applicatour.com/" target="blank">
|
||||
<img src="contributors/applicatour.jpg" class="img-responsive center-block"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<a href="https://vauxoo.com" target="blank">
|
||||
<img src="contributors/vauxoo.png" class="img-responsive center-block"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
|
||||
<p>Ross Whiting, Oxenworkwear - Hans Balis - Stephan Keller, Sodexis, Inc. - Michael Hucke, Hucke Media GmbH & Co. KG - Joachim Grubelnik, DaDi EDV GmbH datadialog.net - DynApps - Cats&Dogs bvba - Bloopark systems GmbH & Co. KG - Parthiv Patel, Tech Receptives Solutions Pvt. Ltd. - Stuart Mackintosh, OpusVL - Erwin van der Ploeg, BAS Solutions - ali Zuaby, simplit co - Aselcis Consulting - Nhomar Hernandez, Vauxoo</p>
|
||||
|
||||
<h1 class="text-center"><u>Sponsor</u></h1>
|
||||
<br/>
|
||||
<p>Robert Baumgartner, datenpol gmbh - openBIG - Russell Phillippe, Protogenos Ltd - Julien Allo, Julius - EasyPME - Jonathan Wilson, WillowIT Pty Ltd - Xavier Mallein, MAallein - Pedro M. Baeza, Serv. Tecnol. Avanzados - Daniel Dico, OERP Canada - Jantz Business Group b.v. - LogicaSoft Consulting - Eric Caudal, Elico Corp - Ermin Trevisan, Twanda - Jean-François Mattler, OpenFid SAS - Alex Ferrer, Lannex IT Solutions - Tony Gu, Shine IT Co. Ltd. 先安科技 - TaPo-IT OG - Jos De Graeve, Apertoso - Nicolas Rigo, eezee-it - Luis Miguel Varón E, Colorisa S.A - OpenBias - Stanislas Drouin Applicatour
|
||||
|
||||
<h1 class="text-center"><u>Power Designer</u></h1>
|
||||
<br/>
|
||||
<p>Rohit Thakral - François Dhommeaux, Ubic Informatique - Judson Alves, Market Home Delivery - Eric Flaux, ABF Osiell - Gilles Dupont - Arnis Putniņš - Johnson Martt, GetOpenERP (Part of OpenStow Technologies) - Gianluca Milano - Daniel Stolovich, ATEL S.A. - Equitania Software GmbH - Senthilnathan G - Houssine Bakkali - Arend Trip - Kevin Woolf, Baba Kevin's American Barbecue Co., Ltd. - toodoo sàrl - Zoltan Gabor 'Apersis' - Tom De Decker, WEB2GO LTD - Nicolás Cavalier Montenegro, STOREGUD CORPORATION SAC - Keirse Jerome - REAL Solutions S.A. - Davide Corio - Brice Muangkhot - Melvin Miguel Martinez, Mendoza Hernandez - Auditores - Chua Wen Ching - Tran Minh Tri working, ungdungtinhoc.com - Badisheng Morena - Sogexis - Josh Wardini - The Tee Shirt Bakery - Bruce Letterle, Red Lab Media - Benoit Vankoningsloo - Francisco Manuel Garcia Claramonte. - Paulina Mikolajczak-Blasco - Collectiv - Tony Fernando - Herbert Riener, rigaConcepts - Kalmen Chia, E-Global SCM Solution Sdn Bhd - Rob North, Pair A Dice Games - David E. Vargas, CloudShop - François Le Gal - Calin Chete (24h Solutions) - Maria Gabriela Fong, MAGA Systems & Consulting - Pascal Behr, Cytosurge AG - Marc Antwertinger - Opencloud Unipessoal, Lda - Ruchir Shukla, BizzAppDev - Michael Hucke, Hucke Media GmbH & Co. KG - Mathias Neef, copadoMEDIA UG - Pablo Arias - Same Motion - livingprocess.de - Habib Ayob - Igor Jovanovic - Liangming Wang, Weixuan Inc. - Jason Au Yeung, Binary System Limited - Fredrik Arvas, Arvas International AB - Martin Temmink, Zigaret - Mathieu Vanneste, Flockdesign - Filip Fruru, Instant Media - Marianne Wilmsmeier, Fabrik Fünf GmbH - Vertex Group Enterprises - Bingen Eguzkitza - Herczeg Péter, InnOpen Group Kft - Giles Hohnen - Luis Felipe Miléo, KMEE - Maria Gabriela Fong, MAGA Systems & Consulting - Aaron Magon, Web Industries - Andrew Trueman, B.M. Trueman & Partners - Sven Petersen, Conexus - Nous Cambas - Oliver Yuan, OpenStone - Henri Ibowili, A-YANT.COM - Nicolas JEUDY - Helmut Drewes - Maik Steinfeld, Streward - Hans Henrik Gabelgaard - AJ Rosman - Eduard - Patrick Darribet, SUDOKEYS - Camptocamp - Cyril Morisse - Alejandro Santana - Eva Pinter, YBO - Mathias Neef, copadoMEDIA UG - Jean-Christophe Perrot, LOGICASOFT - Zarshed Ali, HiTechnologia - Stefan Reisich - Maxime Chambreuil, Savoir-faire Linux - Mario Gielissen, Openworx - Nicholas Burdic, Aptoworks LLC - Olivier Lenoir
|
||||
</section>
|
||||
|
After Width: | Height: | Size: 130 KiB |
|
After Width: | Height: | Size: 122 KiB |
|
After Width: | Height: | Size: 258 KiB |
|
After Width: | Height: | Size: 105 KiB |
|
After Width: | Height: | Size: 63 KiB |
|
After Width: | Height: | Size: 47 KiB |
|
After Width: | Height: | Size: 70 KiB |
|
After Width: | Height: | Size: 125 KiB |
|
After Width: | Height: | Size: 145 KiB |
|
After Width: | Height: | Size: 199 KiB |
|
After Width: | Height: | Size: 241 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 63 KiB |
|
After Width: | Height: | Size: 7.6 KiB |
|
After Width: | Height: | Size: 63 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 63 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 63 KiB |
|
After Width: | Height: | Size: 9.6 KiB |
|
After Width: | Height: | Size: 426 KiB |
|
After Width: | Height: | Size: 774 KiB |
|
After Width: | Height: | Size: 867 KiB |
|
After Width: | Height: | Size: 644 KiB |
|
After Width: | Height: | Size: 609 KiB |
|
After Width: | Height: | Size: 608 KiB |
|
After Width: | Height: | Size: 709 KiB |
|
After Width: | Height: | Size: 663 KiB |
|
After Width: | Height: | Size: 690 KiB |
|
After Width: | Height: | Size: 787 KiB |
|
After Width: | Height: | Size: 736 KiB |
|
After Width: | Height: | Size: 716 KiB |
|
After Width: | Height: | Size: 98 KiB |
|
After Width: | Height: | Size: 433 KiB |
|
After Width: | Height: | Size: 150 KiB |
|
After Width: | Height: | Size: 222 KiB |
|
After Width: | Height: | Size: 302 KiB |
|
After Width: | Height: | Size: 244 KiB |
|
After Width: | Height: | Size: 458 KiB |
|
After Width: | Height: | Size: 224 KiB |
|
After Width: | Height: | Size: 107 KiB |
|
After Width: | Height: | Size: 320 KiB |
|
After Width: | Height: | Size: 497 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 574 B |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 623 B |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 64 KiB |
|
After Width: | Height: | Size: 388 B |
|
After Width: | Height: | Size: 364 B |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 168 KiB |
|
After Width: | Height: | Size: 41 KiB |
|
After Width: | Height: | Size: 655 B |
|
After Width: | Height: | Size: 1.0 KiB |
@@ -0,0 +1,61 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var website = openerp.website;
|
||||
|
||||
// Set custom background image from modal
|
||||
website.Theme.include({
|
||||
start: function () {
|
||||
var self = this;
|
||||
return this._super.apply(this, arguments).then(function() {
|
||||
self.$('label:has(input[data-xmlid="theme_kiddo.option_bg_custom"])').on('click', _.bind(self.set_custom_bg, self));
|
||||
});
|
||||
},
|
||||
change_selection: function (event, force) {
|
||||
if (!force && (event.originalEvent && $(event.target).is('input[data-xmlid="theme_kiddo.option_bg_custom"]'))) {
|
||||
this.set_custom_bg(event);
|
||||
return;
|
||||
}
|
||||
|
||||
this._super(event);
|
||||
},
|
||||
set_custom_bg: function (event) {
|
||||
var self = this;
|
||||
|
||||
clearTimeout(this.set_custom_bg_time);
|
||||
this.set_custom_bg_time = setTimeout(function () {
|
||||
var $image = $('<img>');
|
||||
var element = new CKEDITOR.dom.element($image[0]);
|
||||
var editor = new website.editor.MediaDialog({}, element);
|
||||
|
||||
$image.on('saved', this, function () {
|
||||
var src = $image.attr('src');
|
||||
|
||||
self.$el.addClass("loading");
|
||||
|
||||
openerp.jsonRpc('/web/dataset/call', 'call', {
|
||||
model: 'ir.model.data',
|
||||
method: 'get_object_reference',
|
||||
args: ["theme_kiddo", "option_bg_custom"],
|
||||
}).then(function (data) {
|
||||
openerp.jsonRpc('/web/dataset/call', 'call', {
|
||||
model: 'ir.ui.view',
|
||||
method: 'save',
|
||||
args: [
|
||||
data[1],
|
||||
"body{background-image: url('"+src+"'); background-size: cover; background-position: top center;}",
|
||||
"//style",
|
||||
website.get_context()
|
||||
],
|
||||
}).then(function () {
|
||||
self.$el.removeClass("loading");
|
||||
self.change_selection(event, true);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
editor.appendTo(document.body);
|
||||
}, 0);
|
||||
}
|
||||
});
|
||||
})();
|
||||
@@ -0,0 +1,99 @@
|
||||
// Events
|
||||
|
||||
#left_column {
|
||||
> .nav-pills > li {
|
||||
&.active > a {
|
||||
background-color: transparent;
|
||||
color: @color-beta;
|
||||
}
|
||||
> a:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Blog
|
||||
.website_blog {
|
||||
#blog_right_column {
|
||||
border-left: 1px solid @color-gamma;
|
||||
padding: 0 15px 35px 30px;
|
||||
|
||||
h4 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.nav-stacked > li.active > a {
|
||||
background-color: transparent;
|
||||
color: @color-gamma;
|
||||
}
|
||||
}
|
||||
.col-sm-8 {
|
||||
padding: 0 15px 30px 35px;
|
||||
}
|
||||
.post-meta {
|
||||
margin-top: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
.blog_title .post-meta {
|
||||
text-align: center;
|
||||
}
|
||||
#main_column {
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Forum
|
||||
.website_forum {
|
||||
width: 100%;
|
||||
margin-top: 0px !important;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
li.active > a {
|
||||
background-color: @color-alpha!important;
|
||||
}
|
||||
|
||||
+ #wrap {
|
||||
padding: 35px;
|
||||
margin-bottom: 0!important;
|
||||
|
||||
#right-column {
|
||||
border-left: 1px solid @gray-lighter;
|
||||
> .btn {
|
||||
background-color: @color-beta !important;
|
||||
color: white;
|
||||
&:hover {
|
||||
border-color: @color-zeta;
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
text-align: center;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
.panel-heading {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
.panel-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.question .mt16 {
|
||||
padding: 10px;
|
||||
background: rgb(230, 230, 230);
|
||||
}
|
||||
.alert .close {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.forum_docs {
|
||||
margin-top: 30px;
|
||||
padding: 10px 35px;
|
||||
background-color: white;
|
||||
}
|
||||
@@ -0,0 +1,198 @@
|
||||
|
||||
/* ================== BOOTSTRAP GRAYS ================= */
|
||||
|
||||
@gray-darker: lighten(#000, 13.5%); // #222
|
||||
@gray-dark: lighten(#000, 20%); // #333
|
||||
@gray: lighten(#000, 33.5%); // #555
|
||||
@gray-light: lighten(#000, 46.7%); // #777
|
||||
@gray-lighter: lighten(#000, 85%); // #eee
|
||||
@white: #ffffff;
|
||||
@black: #000000;
|
||||
@color-alpha: @white;
|
||||
|
||||
/* ================== COLOR PRESET 1 ================= */
|
||||
|
||||
@colorPreset1_color1: #47464b; //gray
|
||||
@colorPreset1_color1_dark: darken(@colorPreset1_color1, 10%);
|
||||
@colorPreset1_color1_light: lighten(@colorPreset1_color1, 5%);
|
||||
@colorPreset1_color2: #f3997b; //orange
|
||||
@colorPreset1_color2_dark: #cd7d63;
|
||||
@colorPreset1_color2_darker: lighten(#cd7d63, 10%);
|
||||
@colorPreset1_color2_light: lighten(@colorPreset1_color2, 5%);
|
||||
@colorPreset1_color3: #add3ce; //green
|
||||
@colorPreset1_color3_dark: darken(@colorPreset1_color3, 10%);
|
||||
@colorPreset1_color3_light: lighten(@colorPreset1_color3, 10%);
|
||||
@colorPreset1_color4: #a7c7d5; //blue
|
||||
@colorPreset1_color4_dark: darken(@colorPreset1_color4, 10%);
|
||||
@colorPreset1_color4_light: lighten(@colorPreset1_color4, 5%);
|
||||
|
||||
/* ================== COLOR PRESET 2 ================= */
|
||||
|
||||
@colorPreset2_color1: #d699ae; // claret
|
||||
@colorPreset2_color1_dark: darken(@colorPreset2_color1, 10%);
|
||||
@colorPreset2_color1_light: lighten(@colorPreset2_color1, 5%);
|
||||
@colorPreset2_color2: #B24774; // purple
|
||||
@colorPreset2_color2_dark: darken(@colorPreset2_color2, 10%);
|
||||
@colorPreset2_color2_darker: darken(@colorPreset2_color2, 15%);
|
||||
@colorPreset2_color2_light: lighten(@colorPreset2_color2, 10%);
|
||||
@colorPreset2_color3: #72c2d0; // blue
|
||||
@colorPreset2_color3_dark: darken(@colorPreset2_color3, 10%);
|
||||
@colorPreset2_color3_light: lighten(@colorPreset2_color3, 10%);
|
||||
@colorPreset2_color4: #ed8354; // orange
|
||||
@colorPreset2_color4_dark: darken(@colorPreset2_color4, 10%);
|
||||
@colorPreset2_color4_light: lighten(@colorPreset2_color4, 5%);
|
||||
|
||||
/* ================== COLOR PRESET 3 ================= */
|
||||
|
||||
@colorPreset3_color1: #79CCC2; // middle green
|
||||
@colorPreset3_color1_dark: darken(@colorPreset3_color1, 10%);
|
||||
@colorPreset3_color1_light: lighten(@colorPreset3_color1, 5%);
|
||||
@colorPreset3_color2: #F05A12; // orange
|
||||
@colorPreset3_color2_dark: darken(@colorPreset3_color2, 10%);
|
||||
@colorPreset3_color2_light: lighten(@colorPreset3_color2, 10%);
|
||||
@colorPreset3_color3: #C5FFF8; // light green
|
||||
@colorPreset3_color3_dark: darken(@colorPreset3_color3, 10%);
|
||||
@colorPreset3_color3_darker: darken(@colorPreset3_color3, 15%);
|
||||
@colorPreset3_color3_light: lighten(@colorPreset3_color3, 10%);
|
||||
@colorPreset3_color4: #0F7F72; // dark green
|
||||
@colorPreset3_color4_dark: darken(@colorPreset3_color4, 10%);
|
||||
@colorPreset3_color4_light: lighten(@colorPreset3_color4, 5%);
|
||||
|
||||
/* ================== COLOR PRESET 4 ================= */
|
||||
|
||||
@colorPreset4_color1: #53a1cc; // l.blue
|
||||
@colorPreset4_color1_dark: darken(@colorPreset4_color1, 10%);
|
||||
@colorPreset4_color1_darker: darken(@colorPreset4_color1, 15%);
|
||||
@colorPreset4_color1_light: lighten(@colorPreset4_color1, 5%);
|
||||
@colorPreset4_color2: #116899; // d.blue
|
||||
@colorPreset4_color2_dark: darken(@colorPreset4_color2, 10%);
|
||||
@colorPreset4_color2_light: lighten(@colorPreset4_color2, 10%);
|
||||
@colorPreset4_color3: #aab3ca; // green
|
||||
@colorPreset4_color3_dark: darken(@colorPreset4_color3, 10%);
|
||||
@colorPreset4_color3_light: lighten(@colorPreset4_color3, 10%);
|
||||
@colorPreset4_color4: #ffc9c1; // rose
|
||||
@colorPreset4_color4_dark: darken(@colorPreset4_color4, 10%);
|
||||
@colorPreset4_color4_light: lighten(@colorPreset4_color4, 5%);
|
||||
|
||||
/* ================== COLOR PRESET 5 ================= */
|
||||
|
||||
@colorPreset5_color1: #3b2c3c;
|
||||
@colorPreset5_color1_dark: darken(@colorPreset5_color1, 10%);
|
||||
@colorPreset5_color1_light: lighten(@colorPreset5_color1, 5%);
|
||||
@colorPreset5_color1_lighter: lighten(@colorPreset5_color1, 10%);
|
||||
@colorPreset5_color2: #D2546D;
|
||||
@colorPreset5_color2_dark: darken(@colorPreset5_color2, 10%);
|
||||
@colorPreset5_color2_light: lighten(@colorPreset5_color2, 10%);
|
||||
@colorPreset5_color3: #303347;
|
||||
@colorPreset5_color3_dark: darken(@colorPreset5_color3, 10%);
|
||||
@colorPreset5_color3_light: lighten(@colorPreset5_color3, 10%);
|
||||
@colorPreset5_color4: #171827;
|
||||
@colorPreset5_color4_dark: darken(@colorPreset5_color4, 10%);
|
||||
@colorPreset5_color4_light: lighten(@colorPreset5_color4, 5%);
|
||||
|
||||
/* ================== COLOR PRESET 6 ================= */
|
||||
|
||||
@colorPreset6_color1: #2F343B; // Gray
|
||||
@colorPreset6_color1_dark: darken(@colorPreset6_color1, 10%);
|
||||
@colorPreset6_color1_light: lighten(@colorPreset6_color1, 5%);
|
||||
@colorPreset6_color2: #C77966; // Orange
|
||||
@colorPreset6_color2_dark: darken(@colorPreset6_color2, 5%);
|
||||
@colorPreset6_color2_darker: darken(@colorPreset6_color2, 10%);
|
||||
@colorPreset6_color2_light: lighten(@colorPreset6_color2, 5%);
|
||||
@colorPreset6_color3: #703030; // Claret
|
||||
@colorPreset6_color3_dark: darken(@colorPreset6_color3, 10%);
|
||||
@colorPreset6_color3_light: lighten(@colorPreset6_color3, 10%);
|
||||
@colorPreset6_color4: #E3CDA4; // Cream
|
||||
@colorPreset6_color4_dark: darken(@colorPreset6_color4, 10%);
|
||||
@colorPreset6_color4_light: lighten(@colorPreset6_color4, 5%);
|
||||
|
||||
/* ========================= BLACK ========================= */
|
||||
|
||||
.black {
|
||||
.SetDisplayColor (@black, @gray);
|
||||
}
|
||||
|
||||
/* ========================= WHITE ========================= */
|
||||
|
||||
.white {
|
||||
.SetDisplayColor (@white, @gray);
|
||||
}
|
||||
|
||||
/* ========================= GRAY ========================= */
|
||||
|
||||
.gray {
|
||||
.SetDisplayColor (@gray, @white);
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
.SetTextShadow (2px, @black);
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================= LIGHTGRAY ========================= */
|
||||
|
||||
.lightgray {
|
||||
.SetDisplayColor (@gray-lighter, @gray);
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
.SetTextShadow (1px, @white);
|
||||
}
|
||||
.menublock {
|
||||
border-bottom: 2px solid @gray-light;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================= DARKGRAY ========================= */
|
||||
|
||||
.darkgray {
|
||||
.SetDisplayColor (@gray-dark, @white);
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
.SetTextShadow (2px, @black);
|
||||
}
|
||||
}
|
||||
|
||||
/* ================== FONT COLORS IN THE EDITOR ================= */
|
||||
|
||||
.text-blue {color: @black;}
|
||||
.bg-blue {background-color: @black;}
|
||||
|
||||
.text-turquoise{color: @gray-darker;}
|
||||
.bg-turquoise {background-color: @gray-darker;}
|
||||
|
||||
.text-green {color: @gray-dark;}
|
||||
.bg-green {background-color: @gray-dark;}
|
||||
|
||||
.text-yellow {color: @gray;}
|
||||
.bg-yellow {background-color: @gray;}
|
||||
|
||||
.text-red {color: @gray-light;}
|
||||
.bg-red {background-color: @gray-light;}
|
||||
|
||||
.text-pink {color: @gray-lighter;}
|
||||
.bg-pink {background-color: @gray-lighter;}
|
||||
|
||||
.text-purple {color: @white;}
|
||||
.bg-purple {background-color: @white;}
|
||||
|
||||
.text-brown {}
|
||||
|
||||
.text-blue2 {color: #1e3370;}
|
||||
.bg-blue2 {background-color: #1e3370;}
|
||||
|
||||
.text-turquoise2 {color: #1993a5;}
|
||||
.bg-turquoise2 {background-color: #1993a5;}
|
||||
|
||||
.text-green2 {color: #4f8640;}
|
||||
.bg-green2 {background-color: #4f8640;}
|
||||
|
||||
.text-yellow2 {color: #e6d123;}
|
||||
.bg-yellow2 {background-color: #e6d123;}
|
||||
|
||||
.text-red2 {color: #c22e2e;}
|
||||
.bg-red2 {background-color: #c22e2e;}
|
||||
|
||||
.text-lightblue2 {color: #5ea7db;}
|
||||
.bg-lightblue2 {background-color: #5ea7db;}
|
||||
|
||||
.text-purple2 {color: #8458a7;}
|
||||
.bg-purple2 {background-color: #8458a7;}
|
||||
|
||||
.text-brown2 {color: #725a4c;}
|
||||
.bg-brown2 {color: #725a4c;}
|
||||
@@ -0,0 +1,225 @@
|
||||
/* ================== MODAL COLORS ================= */
|
||||
|
||||
@modalGreen: #328e7f;
|
||||
@modalGreenDark: darken(@modalGreen, 5%);
|
||||
@modalGreenLight: lighten(@modalGreen, 15%);
|
||||
@modalOrange: #ea5800;
|
||||
@modalBlue: #151C24;
|
||||
@modalLightBlue: lighten(@modalBlue, 20%);
|
||||
|
||||
body #theme_customize_modal {
|
||||
background: rgba(0, 0, 0, 0) !important;
|
||||
|
||||
.modal-header .close {
|
||||
color: white;
|
||||
position: absolute;
|
||||
top: 0.25em;
|
||||
right: 0.4em;
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.modal-body.interface {
|
||||
width: 360px;
|
||||
height: 430px;
|
||||
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
background-color: @gray;
|
||||
position: relative;
|
||||
font-family: ProximaRegular;
|
||||
|
||||
> .row {
|
||||
height: 100%;
|
||||
|
||||
.left-content {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
background-color: @modalGreen;
|
||||
|
||||
ul.nav-tabs {
|
||||
height: 100%;
|
||||
border: none;
|
||||
|
||||
> li {
|
||||
height: percentage(1/6);
|
||||
float: none;
|
||||
|
||||
&:hover {
|
||||
background-color: @modalBlue;
|
||||
}
|
||||
|
||||
> a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
|
||||
height: 100%;
|
||||
margin-right: 0px;
|
||||
padding: 15px 5px;
|
||||
color: white;
|
||||
|
||||
border-radius: 0px;
|
||||
border: none;
|
||||
|
||||
span {
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.a-mixin-orange() {
|
||||
background-color: @gray;
|
||||
color: @modalOrange;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&, &.active {
|
||||
> a {
|
||||
&:hover, &:focus {
|
||||
.a-mixin-orange;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.active > a {
|
||||
.a-mixin-orange;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-content {
|
||||
max-height: 100%;
|
||||
overflow: auto;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
|
||||
h4 {
|
||||
color: @white;
|
||||
text-align: left;
|
||||
}
|
||||
h6, p {
|
||||
color: @white;
|
||||
}
|
||||
|
||||
label {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
> img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
> div, > img, > h6, > h4 {
|
||||
border: none;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
&.checked {
|
||||
background-color: @modalLightBlue;
|
||||
> div, > img, > h6, > h4 {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#color {
|
||||
> p {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.color-combi {
|
||||
> div {
|
||||
display: inline-block;
|
||||
width: 37px;
|
||||
height: 37px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
/* ======================= COLOR PRESET 1 ====================== */
|
||||
|
||||
&.colorPreset1 > div {
|
||||
&:nth-child(1) {background-color: @white;}
|
||||
&:nth-child(2) {background-color: @colorPreset1_color1;}
|
||||
&:nth-child(3) {background-color: @colorPreset1_color2;}
|
||||
&:nth-child(4) {background-color: @colorPreset1_color3;}
|
||||
&:nth-child(5) {background-color: @colorPreset1_color4;}
|
||||
}
|
||||
|
||||
/* ======================= COLOR PRESET 2 ====================== */
|
||||
|
||||
&.colorPreset2 > div {
|
||||
&:nth-child(1) {background-color: @colorPreset2_color1;}
|
||||
&:nth-child(2) {background-color: @colorPreset2_color2;}
|
||||
&:nth-child(3) {background-color: @white;}
|
||||
&:nth-child(4) {background-color: @colorPreset2_color3;}
|
||||
&:nth-child(5) {background-color: @colorPreset2_color4;}
|
||||
}
|
||||
|
||||
/* ======================= COLOR PRESET 3 ====================== */
|
||||
|
||||
&.colorPreset3 > div {
|
||||
&:nth-child(1) {background-color: @colorPreset3_color1;}
|
||||
&:nth-child(2) {background-color: @colorPreset3_color2;}
|
||||
&:nth-child(3) {background-color: @white;}
|
||||
&:nth-child(4) {background-color: @colorPreset3_color3;}
|
||||
&:nth-child(5) {background-color: @colorPreset3_color4;}
|
||||
}
|
||||
|
||||
/* ======================= COLOR PRESET 4 ====================== */
|
||||
|
||||
&.colorPreset4 > div {
|
||||
&:nth-child(1) {background-color: @colorPreset4_color1;}
|
||||
&:nth-child(2) {background-color: @colorPreset4_color2;}
|
||||
&:nth-child(3) {background-color: @white;}
|
||||
&:nth-child(4) {background-color: @colorPreset4_color3;}
|
||||
&:nth-child(5) {background-color: @colorPreset4_color4;}
|
||||
}
|
||||
|
||||
/* ======================= COLOR PRESET 5 ====================== */
|
||||
|
||||
&.colorPreset5 > div {
|
||||
&:nth-child(1) {background-color: @colorPreset5_color1;}
|
||||
&:nth-child(2) {background-color: @colorPreset5_color2;}
|
||||
&:nth-child(3) {background-color: @white;}
|
||||
&:nth-child(4) {background-color: @colorPreset5_color3;}
|
||||
&:nth-child(5) {background-color: @colorPreset5_color4;}
|
||||
}
|
||||
|
||||
/* ======================= COLOR PRESET 6 ====================== */
|
||||
|
||||
&.colorPreset6 > div {
|
||||
&:nth-child(1) {background-color: @colorPreset6_color1;}
|
||||
&:nth-child(2) {background-color: @colorPreset6_color2;}
|
||||
&:nth-child(3) {background-color: @white;}
|
||||
&:nth-child(4) {background-color: @colorPreset6_color3;}
|
||||
&:nth-child(5) {background-color: @colorPreset6_color4;}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#bgcolor {
|
||||
.bg-white {background-color: @white;}
|
||||
.bg-beige {background-color: @colorPreset6_color4;}
|
||||
.bg-gray {background-color: @gray-light;}
|
||||
.bg-black {background-color: @black;}
|
||||
.bg-green {background-color: @colorPreset1_color3;}
|
||||
.bg-blue {background-color: @colorPreset1_color4;}
|
||||
.bg-indigo {background-color: @colorPreset4_color3;}
|
||||
.bg-rose {background-color: @colorPreset4_color4;}
|
||||
|
||||
> label {
|
||||
height: 45px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
height: 38px;
|
||||
background-color: @modalGreen;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
|
||||
@bg-img-01: url("/website/image/theme_common.image_content_11");
|
||||
@bg-img-02: url("/website/image/theme_common.image_content_09");
|
||||
@bg-img-03: url("/website/image/theme_common.image_content_10");
|
||||
@bg-img-04: url("/website/image/theme_common.image_content_12");
|
||||
|
||||
.o-generate-bg-img-options(4);
|
||||
.o-generate-bg-img-options(@n, @i: 1) when (@i =< @n) {
|
||||
.bg-img-0@{i} {
|
||||
background-image: ~"@{bg-img-0@{i}}";
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
}
|
||||
.o-generate-bg-img-options(@n, @i + 1);
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
#wrapwrap {
|
||||
background-color: @colorPreset6_color4;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
#wrapwrap {
|
||||
background-color: @black;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
#wrapwrap {
|
||||
background-color: @colorPreset1_color4;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
#wrapwrap {
|
||||
background-color: @gray-light;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
#wrapwrap {
|
||||
background-color: @colorPreset1_color3;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
#wrapwrap {
|
||||
background-color: @colorPreset4_color3;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
#wrapwrap {
|
||||
background-color: @colorPreset4_color4;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
#wrapwrap {
|
||||
background-color: @white;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
#wrapwrap {
|
||||
background-image: url("/website/image/theme_kiddo.bg_img_01");
|
||||
}
|
||||