INTRODUCTION:
--------------------------------------------------------------------------------
Drupal8 W3CSS Theme is using the W3.CSS framework with built-in responsiveness:
- Smaller and faster than other CSS frameworks.
- Easier to learn, and easier to use than other CSS frameworks.
- Uses standard CSS only (No jQuery or JavaScript library).
- Speeds up and simplifies web development.
- Supports modern responsive design (mobile first) by default.
- Provides CSS equality for all browsers. Chrome, Firefox, IE, Safari, and more.
- Provides CSS equality for all devices. PC, laptop, tablet, and mobile.
- Learn more about W3.CSS https://www.w3schools.com/w3css/
REQUIREMENTS:
--------------------------------------------------------------------------------
This theme does not require any moduels to be installed.
INSTALLATION:
--------------------------------------------------------------------------------
Download the theme to www.your-drupal-site-name/themes/ and go to
your-site-domain/admin/appearance and scroll to the bottom until you see Drupal8
W3CSS Theme and click on Install and set as default and click save.
FEATURES:
--------------------------------------------------------------------------------
1- Drupal8 W3CSS Theme is using the W3.CSS framework with built-in
responsiveness
2- Drupal8 W3CSS Theme has 22 regions.
- Regions Will show on ALL pages: Header, Primary Menu Vertical, Primary Menu,
Highlighted, Breadcrumb, Content, Left Sidebar, Right Sidebar, Footer First
Container, Footer Second Container, Footer Third Container and Footer Menu
Container.
- Regions will show on All pages EXCEPT the front page: Page Title.
- Regions will show ONLY on the front page: Welcome Text, Top First container,
Top Second Container, Top Third Container, Bottom First Container, Bottom Second
Container, Bottom Third Container and Bottom Forth Container.
3- Drupal8 W3CSS Theme has 26 sections with changeable colors. With ww3.css
frameworks you can change the background color, text color, text shadow and more
to any section in your website. Just simply apply the w3.css class to the
section.
4- Drupal8 W3CSS Theme comes with ability to change the site width. Just apply
any of these per-configured classes to your website. (w3-width-100-percent,
w3-width-2560, w3-width-1920, w3-width-1600, w3-width-1360, w3-width-1280,
w3-width-1024 and w3-width-800).
5- Drupal8 W3CSS Theme comes with horizontal main menu or vertical side nav.
Simply add the main menu to the horizontal region or the vertical region.
6- Drupal8 W3CSS Theme comes with 22 predefined w3css theme. Simply insert the
name of any of the predefined theme.
7- Drupal8 W3CSS Theme comes with 6 color libraries. (US Highway Colors, US
Safety Colors, Camouflage Colors, Vivid Colors, European Signal Colors and Food
Colors). You can create unlimited color themes.
8- Drupal8 W3CSS Theme comes with ability to create your own private w3.css
theme and apply it to your site.
9- Drupal8 W3CSS Theme comes with 8 social media links easy to configure.
10- Drupal8 W3CSS Theme has a top region that includes three flexible regions.
(The total space in the top region will be divided by the number of regions you
filled.)
11- Drupal8 W3CSS Theme has a bottom region that includes four flexible regions.
(The total space in the bottom region will be divided by the number of regions
you filled.)
12- Drupal8 W3CSS Theme has a footer region that includes three flexible
regions. (The total space in the footer region will be divided by the number of
regions you filled.)
13- Drupal8 W3CSS Theme comes with font awesome added to the css library.
14- Drupal8 W3CSS Theme comes with jQuery match height. Example, if you have
three blocks in the top area, they will always have the height in any width.
15- Drupal8 W3CSS Theme comes responsive main menu and a drop-down menu.
The drop-down works on hover for big screen and on click for small screen.
16- Drupal8 W3CSS Theme will hide completely (divs, wrappers, classes) any
region you don't use. Nothing will be printed in the back.
17- Drupal8 W3CSS Theme uses the minimum HTML structure to show the content.
Example, You will not see div > div > div > div > div.
18- Drupal8 W3CSS Theme comes with the ability to create a custom page template
according to content type's name. If you have two content types article and
video you can have page--article.html.twig and page--video.html.twig
19- Drupal8 W3CSS Theme comes with the ability to create a custom page template
for any view. Example if you have a view name "recent_video", then you can
create a page template name page--recent-video.html.twig.
You can view live demo by going to:
<a href="http://drupal8-w3css-theme.flashwebcenter.com" title="Drupal8 W3CSS
Theme Demo">http://drupal8-w3css-theme.flashwebcenter.com/</a>
20- Drupal8 W3CSS Theme comes with the ability to change the Main Container's
Columns layout. The main container has three columns. The three columns are
stacked (25% 50% 25%). To change the three columns to be stacked equal width
(33% 33% 33%), just insert in the text box 33-33-33 If you want to go back to
the stacked columns (25% 50% 25%), just remove the text 33-33-33
CONFIGURATION:
--------------------------------------------------------------------------------
* How to change the logo
........................
Go to your-drupal-site-name/admin/appearance/settings/drupal8_w3css_theme and
uncheck “Use the logo supplied by the theme” then upload your own website logo
they insert the path in logo text "Path to custom logo" box and click save.
* How to enable the page title
..............................
Go to www.your-drupal-site-name/admin/structure/block and scroll down until you
see Page Title Region. Page Title block is disabled by default, just click on
Enable to enable the page title.
* How to enable the site slogan
...............................
Go to www.your-drupal-site-name/admin/structure/block and in header region.
You should see two blocks User account menu and Site branding.
Click on configure for Site branding and check the check box for Site Slogan.
* How to change the favicon
...........................
Go to www.your-drupal-site-name/admin/appearance/settings/drupal8_w3css_theme
and uncheck “Use the favicon supplied by the theme” then upload your own favicon
and click save.
* How to change website width
.............................
Go to www.your-drupal-site-name/admin/appearance/settings/drupal8_w3css_theme
and click on Website Width to expand it. Copy and paste your desired website
width and click save.
* How to use the w3css predefined themes
........................................
Go to www.your-drupal-site-name/admin/appearance/settings/drupal8_w3css_theme
and click on w3css predefined themes to expand it. Copy and paste any of your
desired w3css color theme and click save.
FYI: if you have any w3 classes in,Advanced Site Color Section they will not
override the uploaded color theme because of the CSS order.
Any predefined theme file it will be loaded after w3.css.
* How to change website colors
..............................
Go to www.your-drupal-site-name/admin/appearance/settings/drupal8_w3css_theme
and click on Advanced Site Colors to expand it. Each section in the website can
be modified and click save.
You can change the text color, background color, padding, margin or borders.
You can use any of W3 CSS Classes
https://www.w3schools.com/w3css/w3css_references.asp
* How to change Social Media Links
..................................
Go to www.your-drupal-site-name/admin/appearance/settings/drupal8_w3css_theme
and click on Social Media Link to expand it. Change any of the links and click
save.
* How to change copyright
.........................
Go to www.your-drupal-site-name/admin/appearance/settings/drupal8_w3css_theme
and click on Copyright to expand it, then change the text there and click save.
* How to disable the credit at the bottom
.........................................
Go to www.your-drupal-site-name/admin/appearance/settings/drupal8_w3css_theme
and click on Credit to expand it. Uncheck the Show/Hide Credit Text and click
save.
* How to create a new custom predefined color theme
...................................................
1) Go to https://www.w3schools.com/w3css/w3css_color_themes.asp and create your
custom theme. Follow the steps to create a private theme.
2) After you finish go to your-drupal-site-directory/themes/drupal8_w3css_theme/
css/w3-css-theme-custom/w3-theme-custom.css Open w3-theme-custom.css and delete
the old code then paste the new code for your private theme.
3) Go to www.your-drupal-site-name/admin/appearance/settings/drupal8_w3css_theme
and click on W3css Predefined Theme and enter w3-theme-custom. How to install
drupal8 w3css subtheme >> Install Drupal8 W3CSS Theme First, then install
drupal8 w3css subtheme.
* How to use the drupal8_w3css_subtheme
.......................................
Inside your-drupal-site-directory/themes/drupal8_w3css_theme/
drupal8_w3css_subtheme you will have all the necessary files for start up theme.
Steps for creating a new sub theme.
1) Copy the sub-theme from the Drupal8 W3CSS Theme and paste it in your custom
theme directory.
2) Re-name the copied folder to have the new sub-theme name. Example: my new
sub-theme is Titto. I will rename the folder from "drupal8_w3css_subtheme" to
"titto".
3) Open the new named sub-theme folder "titto" and change the following
files' names from:
drupal8_w3css_subtheme.theme >> To >> titto.theme
drupal8_w3css_subtheme.info.yml >> To >> titto.info.yml
drupal8_w3css_subtheme.libraries.yml >> To >> titto.libraries.yml
4) Open the file titto.info.yml in your text editor and edit,
line 1 from "Drupal8 W3CSS Subtheme" >> To "Titto"
line 7 from "drupal8_w3css_subtheme/global-components" >>
To >> "titto/global-components".
Make sure the spaces in this file are not changed.
The sub-theme now is ready to be enabled.
* How to Change The Main Container's Columns to Equal Width
...........................................................
Go to www.your-drupal-site-name/admin/appearance/settings/drupal8_w3css_theme
and click on Change The Main Container's Columns to Equal Width and insert
33-33-33 in the text box then click save.
* How to Create The Main Menu
(Drupal comes with a default main menu.)
1) You don't have to use the default main menu as your main menu. ANY menu can
be the main menu.
2) If you want a horizontal menu just drop ANY menu in the Primary Menu region.
3) If you want a horizontal menu just drop ANY menu in the Primary Menu
Vertical region.
4) You don't have to create any a special template for the vertical or
horizontal main menu. menu--main.html.twig
5) You can create two main menus and use the two regions.
http://drupal8-w3css-theme.flashwebcenter.com
6) Note: A vertical main menu is different from a side menu in your website.
(Example for the vertical menu:
https://www.w3schools.com/w3css/tryw3css_templates_interior_design.htm)
A side menu is just a secondary menu you have on your website. The secondary
menu can be vertical or horizontal and you can place it in left or right column.
* How to Create a Responsive Horizontal Secondary Menu
......................................................
Create a menu with any name. Example the new menu name is 'Titto'. Add all the
links as usual in drupal. The maximum number of menu levels to show is three.
This maximum number includes the initial level. Level one is always visible on
screen resolution bigger than 992px. The two levels show on hover. On screen
resolution less than 992px all levels are hidden and they show by clicking.
Go to d8w3css/templates/navigation and clone menu--responsive-h.html.twig to
your sub theme folder and name it menu--titto.html.twig. Clear all caches and
you are done.
* How to Create a Responsive Vertical Secondary Menu
....................................................
Create a menu with any name. Example the new menu name is 'Titto'.
Add all the links as usuall in drupal. The maximum number of menu levels to show
is three. This maximum number includes the initial level. Level one is always
visible. The two levels are hidden and you show them by clicking.
Go to d8w3css/templates/navigation and clone menu--responsive-v.html.twig to
your sub theme folder and name it menu--titto.html.twig. Clear all caches and
you are done.
