Drupal theme files details as follows:
themename.info.yml — this mandatory file gives information about your theme,library declaration for css,js, region declaration
themename.libraries.yml — defines your libraries (mostly your JS, CSS files)
themename.breakpoints.yml — defines the points to fit different screen devices like mobile desktop,tab
themename.theme — The PHP file that stores conditional logic and data preprocessing of the variables before they are merged with markup inside the .html.twig file.
/includes — where 3rd-parties libraries (like Bootstrap, Foundation, Font Awesome,etc) are put. It is a good practice to store them in this folder
/templates — where all your template files with extension .twig (ones that provide html markup of your theme page) are placed.
favicon.ico — your theme favicon if you're using one.
logo.png — Your logo, if you are using one.
screenshot.png — This is a screenshot of your theme that is used in the admin panel and in the user account settings if you have enabled more than one theme so that visitors can choose which theme they want to use.
create a theme folder globepharma8 in the location:projectname/themes/
create a file globepharma8.info.yml in the location:projectname/themes/globepharma8/ and add the following code:
name: globepharma8
type: theme
description: 'Framework is a blank canvas for theme developers. Use Framework as a starting point to facilitate your theme development'
package: 'Custom Theme'
version: '8.x-3.5'
core: '8.x'
project: globepharma8
datestamp: "1314564416"
libraries:
- globepharma8/global_styling
regions:
topmenu: Top Menu
wecare: We Care
main_menu: Main Menu
header_banner: Header Banner
sidebar_first: First Sidebar
sidebar_second: Second Sidebar
content: Content
product: Product
feature_product: Feature Product
gmap: Map
footer_right: Footer
create a file globepharma8.libraries.yml in the location:projectname/themes/globepharma8/ and add the following code:
Note: After colon must use one space(like name:space globepharma8),any para after colon must start after two space(like after libraries colon new para start with space space-space globepharma8/global_styling). it is important for every .yml file
global_styling:
version: 8.0.0
css:
theme:
asset/css/style.css: {}
asset/css/reset.css: {}
asset/css/style-pharma.css: {}
asset/css/superfish.css: {}
asset/css/ie6.css: {}
js:
asset/js/cufon-yui.js: {}
asset/js/droid-sans.cufonfonts.js: {}
asset/js/jquery.carouFredSel-5.5.0-packed.js: {}
asset/js/ie6PngFix.js: {}
asset/js/jquery.ui.accordion.js: {}
asset/js/jquery.ui.mouse.js: {}
asset/js/jquery.ui.resizable.js: {}
asset/js/jquery.ui.widget.js: {}
Note: must use theme: for after css: otherwise css will not found and keep all css file, js file, images in the location:projectname/themes/globepharma8/asset/css/,projectname/themes/globepharma8/asset/js/,projectname/themes/globepharma8/asset/images/ respectively
create a file globepharma8.theme in the location:projectname/themes/globepharma8/ and add the following code:
< ?php
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Template\Attribute;
$active_theme = \Drupal::theme()->getActiveTheme()->getName();
//include_once(drupal_get_path('theme', $active_theme) . '/asset/includes/skins-menu/skins_menu.inc');
function globepharma8_preprocess_html(&$variables) {
$is_front_page = \Drupal::service('path.matcher')->isFrontPage();
if ($is_front_page) {
$variables['attributes']['class'][] = 'front';
} else {
$variables['attributes']['class'][] = 'not-front';
}
skmn_preprocess_html($variables);
}
function globepharma8_preprocess_page(&$variables) {
if (!empty($variables['page']['sidebar_first']) && !empty($variables['page']['sidebar_second'])) {
$variables['attributes']['class'][] = 'layout-two-sidebars';
$variables['page']['main_content_width'] = 6;
}
elseif (!empty($variables['page']['sidebar_first'])) {
$variables['attributes']['class'][] = 'layout-one-sidebar';
$variables['attributes']['class'][] = 'layout-sidebar-first';
$variables['page']['main_content_width'] = 9;
}
elseif (!empty($variables['page']['sidebar_second'])) {
$variables['attributes']['class'][] = 'layout-one-sidebar';
$variables['attributes']['class'][] = 'layout-sidebar-second';
$variables['page']['main_content_width'] = 9;
}
else {
$variables['attributes']['class'][] = 'layout-no-sidebars';
$variables['page']['main_content_width'] = 12;
}
skmn_preprocess_page($variables);
}
function globepharma8_form_system_theme_settings_alter(&$form, $form_state) {
skmn_form_system_theme_settings_alter($form, $form_state);
}
function globepharma8_form_system_theme_settings_submit($form, &$form_state) {
skmn_form_system_theme_settings_submit($form, $form_state);
}
create a file html.html.twig in the location:projectname/themes/globepharma8/templates/ and add the following code:
< !DOCTYPE html>
< html{{ html_attributes }}>
< head>
< head-placeholder token="{{ placeholder_token|raw }}">
< title> {{ head_title|safe_join(' | ') }}< /title>
< css-placeholder token="{{ placeholder_token|raw }}">
< js-placeholder token="{{ placeholder_token|raw }}">
< meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
< meta name="HandheldFriendly" content="true" />
< meta name="apple-touch-fullscreen" content="YES" />
< /head>
< body{{ attributes }}>
< a href="#main-content" class="visually-hidden focusable">
{{ 'Skip to main content'|t }}
< /a>
{{ page_top }}
{{ page }}
{{ page_bottom }}
< /body>
< /html>
create a file page.html.twig in the location:projectname/themes/globepharma8/templates/ and add the following code:
< script type="text/javascript">
// initialise plugins
jQuery(function(){
jQuery('ul.sf-menu').superfish();
});
< /script>
< script type="text/javascript">
jQuery(function() {
jQuery( "#accordion" ).accordion({
fillSpace: true
});
});
jQuery(function() {
jQuery( "#accordionResizer" ).resizable({
minHeight: 140,
resize: function() {
jQuery( "#accordion" ).accordion( "resize" );
}
});
});
< /script>
< script type="text/javascript">
Cufon.replace('contentTitle.h1, #block-views-latest-news-block h2, #block-menu-menu-find-products h2,#block-views-feature-product-block h2, .welcomeBlock h1, #featureBlock h1, ', { fontFamily: 'Droid Sans', hover: true });
Cufon.replace('', { fontFamily: 'Droid Sans', hover: true });
< /script>
< script type="text/javascript">
DD_belatedPNG.fix('#worldMap img');
< /script>
< div id="header">
< div id="Blocklogo">
{% if logo %}
< a id="logo" href="{{ front_page }}" title="Home" rel="home">
< img src="{{ logo }}" alt="Home"/>
< /a>
{% endif %}
< /div>
< div id="topRightMenu">
{{page.topmenu}}
< /div>
< div class="wecare">
{{page.wecare}}
< /div>
< div class="clr"> < /div>
< /div>
< div id="navigation">
< div id="navHolder">
{{page.main_menu}}
< /div>
< /div>
< div id="mainContainer">
< div id="banner_wrapper">
< div id="banner_reflect">
< div id="bannerSlider">
{{page.header_banner}}
< /div>
< div class="clr"> < /div>
< /div>
< /div>
< div class="clr"> < /div>
< div id="containerHolder">
< div id="latestNews" >
{{page.sidebar_first}}
< /div>
< div class="welcomeBlock welcomeBlockFactory">
< div>
{% if page.product %}
{{page.product}}
{% endif %}
< /div>
< /div>
< div class="findAll">
{% if page.sidebar_second %}
{{page.sidebar_second}}
{% endif %}
< /div>
< /div>
< div class="clr"> < /div>
< div class="homecontent">
< div class="blockDiv">
< div class="messageBox">
< section id="main" role="main" class="clearfix">
{{ messages }}
< a id="main-content"> < /a>
{{ title_prefix }}
{% if title %}
< h1> {{ title }}< /h1>
{% endif %}
{% if action_links %}
{{ action_links }}
{% endif %}
{{ page.content }}
< /section>
< /div>
< /div>
< /div>
< /div>
< div style="background: #34322f; padding: 5px 0 18px 0; border-top: 3px solid #100f0c;">
< div style="margin:auto; width: 903px; position: relative;">
{{ page.gmap }}
< div id="footerDiv">
{{ page.footer_right }}
< /div>
< div class="clr"> < /div>
< /div>
< /div>
< div id="mainContainerBtm"> < /div>
< /div>
create a file block.html.twig in the location:projectname/themes/globepharma8/templates/ and add the following code:
{%
set classes = [
'block',
'block-' ~ configuration.provider|clean_class,
'block-' ~ plugin_id|clean_class,
]
%}
< div{{ attributes.addClass(classes) }}>
{{ title_prefix }}
{% if label %}
< h2{{ title_attributes }}> {{ label }}< /h2>
{% endif %}
{{ title_suffix }}
{% block content %}
< div{{ content_attributes.addClass('content') }}>
{{ content }}
< /div>
{% endblock %}
< /div>
create a file node.html.twig in the location:projectname/themes/globepharma8/templates/ and add the following code:
{%
set classes = [
'node',
'node--type-' ~ node.bundle|clean_class,
node.isPromoted() ? 'node--promoted',
node.isSticky() ? 'node--sticky',
not node.isPublished() ? 'node--unpublished',
view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
'clearfix',
]
%}
{{ attach_library('classy/node') }}
< article{{ attributes.addClass(classes) }}>
< header>
{{ title_prefix }}
{% if not page %}
< h2{{ title_attributes.addClass('node__title') }}>
< a href="{{ url }}" rel="bookmark"> {{ label }}< /a>
< /h2>
{% endif %}
{{ title_suffix }}
{% if display_submitted %}
< div class="node__meta">
{{ author_picture }}
< span{{ author_attributes }}>
{% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %}
< /span>
{{ metadata }}
< /div>
{% endif %}
< /header>
< div{{ content_attributes.addClass('node__content', 'clearfix') }}>
{{ content }}
< /div>
< /article>
create a file maintenance-page.html.twig in the location:projectname/themes/globepharma8/templates/ and add the following code:
< div id="page-wrapper">
< div id="page">
< header id="header" role="banner">
< div class="section clearfix">
{% if site_name or site_slogan %}
< div id="name-and-slogan"{{ hide_site_name and hide_site_slogan ? ' class="visually-hidden"' }}>
{% if site_name %}
< div id="site-name"{{ hide_site_name ? ' class="visually-hidden"' }}>
< strong>
< a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home"> {{ site_name }} < /a>
< /strong>
< /div>
{% endif %}
{% if site_slogan %}
< div id="site-slogan"{{ hide_site_slogan ? ' class="visually-hidden"' }}>
{{ site_slogan }}
< /div>
{% endif %}
< /div>
{% endif %}
< /div>
< /header>
< div id="main-wrapper">
< div id="main" class="clearfix">
< main id="content" class="column" role="main">
< section class="section">
< a id="main-content"> < /a>
{% if title %}
< h1 class="title" id="page-title"> {{ title }}< /h1>
{% endif %}
{{ page.content }}
{{ page.highlighted }}
< /section>
< /main>
< /div>
< /div>
< /div>
< /div>
add a file logo.png in the location:projectname/themes/globepharma8/
add a file screenshot.png in the location:projectname/themes/globepharma8/
add a favicon.ico in the location:sites/all/themes/globepharma/
create a file style.css in the location:projectname/themes/globepharma8/asset/css/ and add the following code
body {
background: #fff;
color: #222;
font-family: Lucida Grande, Verdana, Arial, sans-serif;
font-size: 0.8125em;
line-height: 1.5385;
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: normal;
}
h1, .h1 {
font-size: 2em;
line-height: 1.5385;
margin-top: 0.7692em;
}
h2, .h2 {
font-size: 1.5385em;
line-height: 2;
margin-top: 1em;
}
h3, .h3 {
font-size: 1.2308em;
line-height: 1.25;
margin-top: 1.25em;
}
h4, h5, h6, .h4, .h5, .h6 {
font-size: 1em;
font-weight: bold;
line-height: 1.5385;
margin-top: 1.5385em;
}
p {
font-size: 1em;
line-height: 1.5385;
margin: 0 0 1.5385em 0;
}
p a:link {
text-decoration: underline;
}
a:link, a:visited {
color: #069;
outline: none;
text-decoration: none;
}
a:focus {
outline: 1px dotted;
}
a:hover, a:active, li a.active {
color: #069;
outline: none;
text-decoration: underline;
}
img {
display: block;
}
/* apply common styling after reset.css */
li ul, li ol { margin: 0; }
ul, ol { margin: 0 1.5385em 1.5385em 0; padding-left: 1.5385em; }
ul { list-style-type: disc; }
ol { list-style-type: decimal; }
dl { margin: 0 0 1.5385em 0; }
dl dt { font-weight: bold; }
dd { margin-left: 1.5385em; }
hr { background: #666; border: none; clear: both; float: none; height: 1px; margin: 0 0 1.4615em; width: 100%; }
fieldset { border: 1px solid #ccc; margin: 0 0 1.4615em; padding: 1.5385em; }
table { margin-bottom: 1.5385em; width: 100%; }
th, tr, td { vertical-align: middle; }
.sticky-header th, .sticky-table th { border-bottom: 3px solid #ccc; padding-right: 1em; text-align: left; }
/**
* 2.LAYOUT
*/
#wrapper {
margin: 0 auto;
padding: 0 10px;
width: 940px;
}
/* add this class to div#wrapper in page.tpl to show grid */
.showgrid {
background: url(images/grid.png) repeat-y;
}
/**
* 3.MAIN
*/
/* 1 column: global values*/
#main {
display: inline;
margin: 0;
}
/* 3 columns */
body.two-sidebars #main {
float: left;
margin: 0 0 0 240px;
padding: 0;
width: 460px;
}
/* 2 columns: sidebar-first */
body.sidebar-first #main {
float: right;
margin: 0;
padding: 0;
width: 700px;
}
/* 2 columns: sidebar-second */
body.sidebar-second #main {
float: left;
margin: 0;
padding: 0;
width: 700px;
}
/**
* 4.SIDEBARS
*/
/* 3 columns: sidebar-first */
body.two-sidebars #sidebar-first {
float: left;
margin: 0 0 0 -700px;
padding: 0;
width: 220px;
}
/* 3 columns: sidebar-second */
body.two-sidebars #sidebar-second {
float: right;
margin: 0;
padding: 0;
width: 220px;
}
body.sidebar-first #sidebar-first {
float: left;
margin: 0;
padding: 0;
width: 220px;
}
body.sidebar-second #sidebar-second {
float: right;
margin: 0;
padding: 0;
width: 220px;
}
#header {
margin: 0;
padding: 3.0769em 0 0;
position: relative;
}
#header #site-name-slogan {
float: left;
margin: 0 0 1.5385em;
}
#header #site-slogan {
margin: 0;
}
#header #site-name {
font-family: Arial, Helvetica, sans-serif;
font-size: 2.7692em;
font-weight: 700;
line-height: 1.1111;
margin: 0;
}
#header #site-name a:hover {
text-decoration: none;
}
#header #logo {
float: left;
margin: 0 1em 1.5385em 0;
}
#navigation {
clear: both;
margin: 0 0 1.5385em;
padding: 0;
}
#navigation ul.main-menu {
margin: 0;
padding: 0;
}
#navigation ul.main-menu li {
float: left;
margin: 0;
padding: 0;
}
#navigation ul.main-menu li a {
display: block;
padding: 0 2em 0 0;
}
#navigation ul.secondary-menu {
margin: 0;
padding: 0;
}
#navigation ul.secondary-menu li {
float: left;
margin: 0;
padding: 0;
}
#navigation ul.secondary-menu li a {
display: block;
padding: 0 2em 0 0;
}
.breadcrumb {
padding-bottom: 0;
}
#skip-link {
position: absolute;
}
.item-list ul {
margin: 0;
padding: 0 0 0 1.5385em;
}
.item-list ul li {
margin: 0;
padding: 0;
}
ul.menu li {
margin: 0;
padding: 0;
}
ul.inline {
clear: both;
}
ul.inline li {
margin: 0;
padding: 0 1em 0 0;
}
.tabs-wrapper {
border-bottom: 1px solid #333;
margin: 0 0 1.4615em;
}
ul.primary {
border: none;
margin: 0;
padding: 0;
}
ul.primary li a {
background: none;
border: none;
display: block;
float: left;
line-height: 1.5385em;
margin: 0;
padding: 0 1em;
}
ul.primary li a:hover, ul.primary li a.active {
background: #666;
border: none;
color: #fff;
}
ul.primary li a:hover {
background: #888;
text-decoration: none;
}
ul.secondary {
background: #666;
border-bottom: none;
clear: both;
margin: 0;
padding: 0;
}
ul.secondary li {
border-right: none;
}
ul.secondary li a, ul.secondary li a:link {
border: none;
color: #ccc;
display: block;
float: left;
line-height: 1.5385em;
padding: 0 1em;
}
ul.secondary li a:hover, ul.secondary li a.active {
background: #888;
color: #fff;
text-decoration: none;
}
ul.secondary a.active {
border-bottom: none;
}
.node {
margin-bottom: 1.5385em;
}
.field-name-field-tags {
margin: 0 0 1.5385em;
}
.field-name-field-tags .field-item {
margin: 0 1em 0 0;
}
.field-name-field-tags div {
display: inline;
}
.profile {
margin: 1.5385em 0;
}
.profile dd {
margin-bottom: 1.5385em;
}
.profile h3 {
border: none;
}
.profile dt {
margin-bottom: 0;
}
.password-parent {
width: 36em;
}
#comments {
clear: both;
margin-top: 1.5385em;
}
.comment {
margin-bottom: 1.5385em;
}
.comment .new {
color: red;
text-transform: capitalize;
margin-left: 1em;
}
.block {
margin-bottom: 1.5385em;
}
#footer {
clear: both;
padding: 1.5385em 0;
position: relative;
}
#footer a.feed-icon {
position: absolute;
right: 0;
top: 1.6667em;
}
create a file style-pharma.css in the location:projectname/themes/globepharma8/asset/css/ and add the following code
/* CSS Document */
body{ margin: 0 auto; padding: 0 0 0 0; color: #183152; font: normal 11px Verdana, Geneva, sans-serif; background: #fff url(../images/ph_bg.png) left top repeat-x; padding-bottom: 30px; }
h1{ margin: 0; padding: 0; }
h2{ margin: 0; padding: 0;}
h3{ margin: 0; padding: 0; }
h4{ margin: 0; padding: 0; }
h5{ margin: 0; padding: 0; }
h6{ margin: 0; padding: 0; }
p{ margin: 0; padding: 0; line-height: 18px; }
a{ margin: 0; padding: 0; }
ul,ol,li{ margin: 0; padding: 0;}
img { margin: 0; padding: 0; border: 0; }
form{ margin: 0; padding: 0; }
input{ margin: 0; padding: 0; }
#wrapper{ margin:0 }
/**------------------------------------------- HEADER BLOCK CSS ----------------------------------------**/
#header_wrapper{ background:url(../images/headerbg.png) left top repeat-x; min-height: 124px; height: auto !important; height: 124px; overflow:hidden; }
#header{ margin:auto; width:914px; }
#Blocklogo{ float:left; width: 400px; margin-top: 20px; }
#topRightMenu{ background:#fff; margin-top: 3px; padding: 0 7px; border: 1px #e3e3e3 solid; float:left; width: 157px;float:right;}
#topRightMenu ul { padding: 5px 0 5px 5px; }
#topRightMenu ul li{ display:inline;padding:0;}
#topRightMenu li a{ font: normal 11px Arial, Helvetica, sans-serif; color: #375d81; text-align:center; padding: 0 5px; border: 1px solid #b5cbd1; border-width: 0 1px 0 0; }
#topRightMenu li a:hover{ color:#106fab; }
#block-menu-menu-top-menu .sf-menu li {margin-right:0;}
#searchBlock{ background: url(../images/Searchblock.png) center top no-repeat; height: 36px; overflow:hidden; position: absolute; top: 88px; right:0; width: 100%; color: #353535; font: bold 11px Arial, Helvetica, sans-serif; text-transform:uppercase; }
#searchBlock ul{ margin-top: 9px; margin-left: 9px; }
#searchBlock ul li{ display:inline; }
#searchBlock input.input-search{ padding: 2px 3px; width: 165px; border: 1px solid #c1c7c9; background: #dce4e6; }
#searchBlock input.submit{ position: absolute; z-index: 1000; top: 16px; left: 209px; width: 15px; height: 15px; overflow:hidden; background:url(../images/playsubmit.png) center top no-repeat; cursor: pointer; border:0; }
/**-------------------------------------- NAVIGATION CSS --------------------------------------------------**/
#navigation{ position:relative; margin:auto; margin-top: 25px; /*width: 1000px;*/ z-index:100; background:url(../images/ph_nav.png) left top repeat-x; }
#navHolder{ margin-top: 35px; height: 36px; margin:auto; width: 910px;position:relative;}
.commonmneu{ margin:0 0 0 15px; padding:0 0 15px 0;}
.commonmneu h1{ margin:10px 0 0 0; padding: 0; font: bold 12px Tahoma, Geneva, sans-serif; color:#FFF; }
.commonmneu ul{ margin:5px 0 0 0; padding:0; }
.commonmneu ul li{ line-height: 20px;color:red; }
.commonmneu li a{ color: #c0e1ff; font: normal 12px Tahoma, Geneva, sans-serif; }
.commonmneu li a span{ color:#FFF; }
.commonmneu li a:hover{ color:#FFF; text-decoration:underline; }
/**-------------------------------------- CONTAINER CSS ---------------------------------------------------**/
#mainContainer{ margin:auto;clear:both; /*width: 1004px; background:url(../images/ph_contentbg.png) left top repeat-y;*/ }
#containerHolder{ width: 895px; margin:auto; overflow:hidden;}
#mainContainerBtm{ margin:auto; width: 1004px; height: 14px; overflow:hidden; /*background:url(../images/ph_container_btm.png) left top repeat-y;*/ }
/**------------------------------------- BANNER & LATEST NEWS CSS ------------------------------------------------**/
#latestNews{ overflow:hidden; width: 260px; float:left; /*background: none repeat scroll 0 0 #85BAEA;*/ border: 1px #85BAEA solid; border-width: 0; }
#latestNews h1{ width: 60%; font-weight: normal; font-size: 15px; /*border: 1px solid #375d81; border-width: 0 0 1px 4px;*/ }
a.latestNewsLink{ display:block; padding-right: 25px; padding-top: 6px; padding-bottom: 6px; height: 20px; overflow:hidden; text-align:right; font: bold 11px Tahoma, Geneva, sans-serif; color: #102d48; text-decoration:underline; }
#latestNews a strong{ color: #102d48; }
.arrowlistmenu{ height: auto; overflow:hidden; padding-top: 10px; }
.arrowlistmenu ul{ list-style-type: none; margin: 0 0 0 15px; padding: 0; }
.arrowlistmenu ul li{ /*padding-bottom: 2px; bottom spacing between menu items*/ }
.arrowlistmenu ul li a{ color: #000; background:url(../images/ph_news_arrow.png) 3px 14px no-repeat; display: block; padding: 8px 0; padding-left: 19px; /*link text is indented 19px*/ text-decoration: none; font-weight: normal; border-bottom: 1px solid #e2e2e2; font-size: 11px; font-family: Verdana, Geneva, sans-serif; line-height: 13px; }
.arrowlistmenu ul li a:visited{ color: #A375d81; }
.arrowlistmenu ul li a:hover{ /*hover state CSS*/ color: #000; background-color: #f0f0f0; }
#banner_reflect{ /*background: url(../images/bannerrefleact.png) center top repeat-y;*/ }
#banner_wrapper{ position:relative; height: 310px; padding-top: 10px; border-bottom: 2px #004770 solid;/* width: 995px; */overflow:hidden; background: #1290e0 url(../images/banner_bg.png) left top repeat-x;}
#qualityPolicy{ float:left; width: 300px; padding: 10px 15px; overflow:hidden; background: #eff1f2 url(../images/ph_bannerbg.png) right top no-repeat; }
#qualityPolicy p{ padding: 47px 15px 2px 0; color: #183152; font: normal 12px Tahoma, Geneva, sans-serif; line-height: 18px; text-align:justify; }
#qualityPolicy a{ margin-left: 230px; font: bold 11px Arial, Helvetica, sans-serif; text-decoration:underline; text-align:right; color: #183152; }
#bannerSlider{ margin: auto; width:900px; height:256px; margin-top:15px;}
ul#portfolio li img{ padding: 5px; background:#FFF; border: 1px #015d93 solid; }
#qualityPolicy h1{ margin:0 0 8px 0; position: absolute; z-index: 5; width: 332px; height: 57px; padding:10px 0 4px 15px; font-weight: normal; font-size: 15px; background:url(../images/ph_quality.png) left top no-repeat; left:0; color:#FFF; text-transform:uppercase; }
#bannerContainer{ margin:auto; width: 900px; overflow:hidden; }
.ft-title{ padding: 20px 50px 20px 20px; width: 93%; overflow:hidden; }
/**---------------------------------- SCROLLER SLIDER CSS ----------------------------------------------------**/
#productSlider{ position:relative; width: 900px; margin: auto; margin-top: 20px; background:url(../images/scrollerbg.png) center top no-repeat; height: 279px; overflow:hidden; }
/**-------------------------------- FOOTER BLOCK CSS --------------------------------------------------------**/
#worldMap{ width: 300px; height: 279px; z-index: 500; left:0; top: 45px; margin-right: 20px; position: absolute; }
#worldMap img{}
#footerDiv{ float: right; width: 500px; }
.footerBoxs{ float: left; width: 230px; padding-top: 25px; margin-right: 35px; }
.footerBoxs h1{ font: bold 12px Verdana, Geneva, sans-serif; color: #92d050; margin-bottom: 15px; }
.footerBoxs ul{ margin-bottom: 20px; }
.footerBoxs li{ }
.footerBoxs li a{ font: bold 11px Verdana, Geneva, sans-serif; color: #24b0f0; text-decoration:underline; line-height: 30px; }
.footerBoxs li a:hover{ color: #FFF; }
.footerBoxRight{ float: right; margin: 0; }
.footerBoxs a.viewArch{ background: none; border-color: #7f7f7f;}
a.viewArch{ font: italic normal 12px Verdana, Geneva, sans-serif; color: #69c5e9; display:block; border: 1px #d8d8d8 solid; border-width: 1px 0; padding: 6px 0 6px 19px;margin:0px 0 8px 0; background:url(../images/newsarrow.png) 0 86% no-repeat; }
#footer{ color: #8ea6a6; padding-top: 0;}
#footer p{ text-align: left; font: normal 11px Arial, Helvetica, sans-serif; margin-bottom: 5px; }
#footer a{ color: #999 ; }
#footer a:hover{ text-decoration:underline; }
#footer ul{ margin:0; padding:0; }
/**-----------------------------------------COMMON USE CSS ---------------------------------**/
.clr{ clear: both; height:0; overflow:hidden; }
/**--------------------------------------- SLLIDER CSS CARESUAL -------------------------**/
.sliderBox{ float:left; }
/**--------------------------------------- WELCOME CSS ----------------------------------**/
h1.boxTitle{ font: bold 15px Verdana, Geneva, sans-serif; padding: 0 0 0 0; margin:0; margin-top: 10px; border-left: 0 !important;color: #55A220; }
h1.boxTitle img{ position: relative; top: 12px; padding-right: 5px;}
.welcomeBlock{ float: left; width: 350px; overflow:hidden; margin-right: 0; margin-left: 12px; }
.welcomeBlockFactory{ /*margin-right: 12px; */}
.welcomeBlock h1{ /*width: 60%; */ font-weight: normal; font-size: 15px; /*border: 1px solid #375d81; border-width: 0 0 1px 4px;*/ }
.blockDiv{ margin:auto; /*background: url(../images/footerwidgetbg.png) left top repeat-y; padding:20px 15px; border: 1px solid #abc8e2; border-width: 1px 0;*/ min-height: 150px; height: auto !important; height: 150px; }
.blockDiv .messageBox{ }
.blockDiv .messageBox p{ padding: 7px 0 0px 0; font: normal 11px Verdana, Geneva, sans-serif; line-height: 17px; text-align:justify; }
.blockDiv .messageBox h3{ font: bold 16px Tahoma, Geneva, sans-serif; padding-left: 18px; margin: 5px 0; }
.findAll{ width: 260px; float:right;padding-left:10px; }
/**--------------------------------------- FEATURE PRODUCTS CSS ----------------------------------**/
#featureBlock{ position: relative; margin-bottom: 15px; }
#featureBlock h1{ margin:15px 0 0 15px; width: 20%; padding:10px 0 0 6px; font-weight: normal; font-size: 15px; border: 1px solid #375d81; border-width: 0 0 1px 4px; }
#feaure_wrapper{ margin: auto; position: relative;}
#features_prod{ float: right; padding-top: 0; overflow:hidden; padding-right: 0px; }
#features_prod h1{ margin:0; padding:0 0 0 40px; font: bold 14px Tahoma, Geneva, sans-serif; color:#FFF; }
#our_prod_feature{ float: left; width: 415px; overflow: hidden;}
#our_prod_feature h1{ margin-top: 0; padding-bottom: 15px;}
.findProd ul{ margin:23px 0 0 40px; padding:0; }
.findProd ul li{ line-height: 25px;list-style-type: none;}
.findProd li a { font: normal 12px Verdana, Geneva, sans-serif; color: #55A220; background:url(../images/pharmaarrow.png) left 50% no-repeat; padding: 4px 0 4px 20px; }
.findProd li a:hover{ text-decoration:underline;}
/*** extra style**/
.wecare {float: right; width: 400px; margin-top: 10px; text-align:right;}
#block-views-latest-news-block h2 {font: bold 15px Verdana, Geneva, sans-serif; padding: 0 0 0 0; margin:0;color:#17B7F1; margin-top: 10px; border-left: 0 !important; }
#block-views-latest-news-block .content{ height: auto; overflow:hidden; padding-top: 10px; }
#block-views-latest-news-block ul{ list-style-type: none; margin: 0 0 0 0; padding: 0; }
#block-views-latest-news-block ul li{ /*padding-bottom: 2px; bottom spacing between menu items*/ }
#block-views-latest-news-block ul li a{ color: #69c5e9; background: url(../images/newsarrow.png) left 86% no-repeat; display: block; padding: 4px 0 4px 0; padding-left: 19px; /*link text is indented 19px*/ text-decoration: none; font-weight: normal; /*border-bottom: 1px solid #e2e2e2;*/ font-size: 12px; font-family: Verdana, Geneva, sans-serif; line-height: 13px; }
#block-views-latest-news-block ul li span{ color: #CCC; font-size: 11px; text-decoration:underline; }
#block-views-latest-news-block ul li a:visited{ color: #A375d81; }
#block-views-latest-news-block ul li a:hover{ /*hover state CSS*/ color: #000;/* background-color: #f0f0f0;*/ }
#block-views-latest-news-block a.viewArch{ font: italic normal 12px Verdana, Geneva, sans-serif; color: #69c5e9; display:block; border: 1px #d8d8d8 solid; border-width: 1px 0; padding: 6px 0 6px 19px;margin:0px 0 8px 0; background:url(../images/newsarrow.png) 0 86% no-repeat; }
#block-views-latest-news-block .item-list ul li{margin:0 }
#block-menu-menu-find-products h2{font: bold 15px Verdana, Geneva, sans-serif; border-left: 0 !important;background: url('../images/findprod.png') no-repeat left top;position: relative; top: 12px; padding-left:30px; margin:10px 0 15px 0;height:30px;clear:both;color:#ad070b;}
#block-menu-menu-find-products .content{ width: 185px; float:right; }
#block-menu-menu-find-products .content ul{ margin:10px 0 0 0; padding:0; }
#block-menu-menu-find-products .content ul li{ line-height: 25px;}
#block-menu-menu-find-products .content li a { font: bold 11px Verdana, Geneva, sans-serif; color: #000; /*background:url(../images/prodarrpw.png) left 50% no-repeat; background:url(../images/sidemenubg.png) left top repeat-y; padding-left: 20px; margin-bottom: 1px; padding: 5px 0 5px 9px; display: block;*/ display: block; border-bottom: 1px solid #CCC; padding: 4px 0 4px 10px; }
#block-menu-menu-find-products .content li a:hover{ text-decoration:underline;}
.contentTitle {background: url('../images/whyus.png') left top no-repeat; color:#2eb135;font: bold 15px Verdana, Geneva, sans-serif; margin-top: 10px; border-left: 0 !important; position: relative; top: 12px; padding-left:30px; padding-bottom:25px;height:27px;}
#block-ddblock-1 #ddblock-number-pager-1 {vartical-align:bottom;position:absolute;padding:0;margin:270px 0 0 450px;}
#block-ddblock-1 #ddblock-number-pager-1 ul li {display: inline;padding:5px 5px;}
#block-ddblock-1 #ddblock-number-pager-1 ul li a.activeSlide {color:red;}
.findAll h2{font: bold 15px Verdana, Geneva, sans-serif; padding: 0 0 0 0; margin:0; margin-top: 10px; border-left: 0 !important;}
#block-views-feature-product-block h2{color:#A39CC6;font: bold 15px Verdana, Geneva, sans-serif; padding: 0 0 0 0; margin:0; margin-top: 10px; border-left: 0 !important;}
#block-views-feature-product-block img{width:146px; height:103px;padding:0px 0 10px 0;margin:0 0 0 28px;}
#block-views-feature-product-block .views-field-title span {display: block;font-size: 12px; font-weight: bold;color:#004BA1;text-align: left;padding:3px 0 6px 0px;}
#block-views-feature-product-block .views-field-body p {font-size: 11px; font-weight:normal;color:#BD9700;text-align: left;line-height: 18px;}
#block-views-feature-product-block .views-field-view-node span a {display: block;color:#56A1F9;text-align: left;border: 1px #d8d8d8 solid; border-width: 1px 0; padding: 6px 0 6px 0px;}
.homecontent h1{font: normal 15px Verdana, Geneva, sans-serif; color: #0070d5; margin-bottom: 10px; }
.homecontent p{ font: normal 12px Verdana, Geneva, sans-serif; margin-bottom: 15px; text-align: justify; }
.homecontent strong{ color: #000; }
.blockDiv{ margin:auto; /*background: url(../images/footerwidgetbg.png) left top repeat-y; padding:20px 15px; border: 1px solid #abc8e2; border-width: 1px 0;*/ min-height: 150px; height: auto !important; height: 150px; }
.blockDiv .messageBox{ }
.blockDiv .messageBox p{ padding: 0px 0px 0px 0px; font: normal 11px Verdana, Geneva, sans-serif; line-height: 17px; text-align:justify; }
.blockDiv .messageBox h3{ font: bold 16px Tahoma, Geneva, sans-serif; padding-left: 18px; margin: 5px 0; }
#block-menu-menu-top-menu ul li a {text-decoration: none;}
#block-block-1 .wecare {font-family: Georgia, 'Times New Roman', Times, serif !important; font-style: italic;font-weight: normal;font-size: 19px;}
#footer strong{ text-align: left; font: normal 11px Arial, Helvetica, sans-serif; margin-bottom: 5px;color: #8ea6a6; }
add other necessary css,js,image files in the location:projectname/themes/globepharma8/asset/
