CSS3 Gradient Textures

A snippet share just to show the power of CSS3 gradient, I just follow some free PSD's texture and try it to code in CSS3. So its time to share with you all.



[css]
/* Gradient */

#texture1{
background-image: -moz-linear-gradient(90deg, #9fc9d7, #9fc9d7 2px, #a3dcf0 2px, #a3dcf0 4px, #9fc9d7 4px);
background-image: -webkit-linear-gradient(90deg, #9fc9d7, #9fc9d7 2px, #a3dcf0 2px, #a3dcf0 4px, #9fc9d7 4px);
background-repeat: repeat;
background-size: 2px 4px;
}

#texture2{
background-image: -moz-linear-gradient(0deg, #202125, #202125 2px, #292a2e 2px, #292a2e 4px, #202125 4px);
background-image: -webkit-linear-gradient(0deg, #202125, #202125 2px, #292a2e 2px, #292a2e 4px, #202125 4px);
background-repeat: repeat;
background-size: 5px 10px;
}

#texture3{
background-image: -moz-linear-gradient(90deg, #9dd9da, #9dd9da 15px, #a6dcde 15px, #a6dcde 30px, #9dd9da 30px);
background-image: -webkit-linear-gradient(90deg, #9dd9da, #9dd9da 15px, #a6dcde 15px, #a6dcde 30px, #9dd9da 30px);
background-repeat: repeat;
background-size: 15px 30px;
}

#texture4{
background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.25) 75%, rgba(0, 0, 0, 0.25)), -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.25) 75%, rgba(0, 0, 0, 0.25));
background-image: -webkit-linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .25) 75%, rgba(0, 0, 0, .25)), -webkit-linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .25) 75%, rgba(0, 0, 0, .25));
background-position: 0 0pt, 2px 2px;
background-size: 4px 4px;
background-color: #202125;
}
[/css]

 

HTML5 CSS3 Admin Panel | Dashboard Template

Now a days I go to dribble and see the amazing designs created by users. From their I get amazing ideas and today I ll share my HTML5 and CSS3 coded Admin panel with you all.

This tutorial will consist with :-

• A fixed menu bar (with CSS3 gradients and drop-downs)


• A search text box


• A Logout Button


• Animated Graphs


• Notification messages


• And a dialog box

Here's the final output of our template:


Fixed Menubar

Menu bar code is simple, li list with a drop down in it. We will be using box-shadow to give the gradient effect.

[html]
<ul id="admin-bar">
<li title="Home">H</li>
<li title="Users">A</li>
<li title="Add New Post">D</li>
<li title="Settings">G</li>
<li title="Videos">V</li>
<li title="Stats" class="active">v</li>
<li title="More">d
<ul id="drop-down">
<li title="Media Gallery">m<span>Media Gallery</span></li>
<li title="Comments">b<span>Comments</span></li>
<li title="Plugins">C<span>Plugins</span></li>
</ul>
</li>
</ul>
[/html]

Like my previous CSS3 tutorials here also I ll be using fonts instead of images to show the correct icons in menu.

[css]
#menu{
position:fixed;
top:0;
left:0;
width:100%;
background-color: #151515;
background-size: 6px 6px;
border-radius: 2px;
box-shadow: 0 25px 0 0 rgba(255, 255, 255, 0.15) inset;
height: 50px;
z-index: 1;
}

#admin-bar {
float: left;
margin: 0 auto;
padding: 0;
position: relative;
}

#admin-bar li {
color: #FFFFFF;
cursor: default;
display: inline;
float: left;
font-family: icons;
font-size: 25px;
list-style-type: none;
padding: 7px 10px 14px;
position: relative;
}

#admin-bar li:hover, .active{
text-shadow:0 0 5px #fff;
background:-moz-linear-gradient(center top , #1B1B1B 0%, #262626 100%) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1b1b1b), color-stop(100%,#262626));
}

#admin-bar li ul {
-webkit-transition: all 1s ease 0s;
-moz-transition: all 1s ease 0s;
-o-transition: all 1s ease 0s;
-ms-transition: all 1s ease 0s;
transition: all 1s ease 0s;

background: -moz-linear-gradient(center top , #1B1B1B 0%, #262626 100%) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1b1b1b), color-stop(100%,#262626)); /* Chrome,Safari4+ */
border-radius: 0 0 10px 10px;
display: block;
height: 0;
left: 0;
margin: 0;
opacity: 0;
overflow: hidden;
padding: 0;
position: absolute;
top: 50px;
width: 135px;
}

#admin-bar li:hover ul{
height:auto;
overflow:visible;
opacity:1;
}

#drop-down li {
display: block;
float: none;
background-image:url(divider.png);
background-repeat:no-repeat;
}

#drop-down li:hover{
background: -moz-linear-gradient(center top , #1B1B1B 0%, #262626 100%) repeat scroll 0 0 transparent;
}

#drop-down li:last-child {
border-radius: 0 0 10px 10px;
}
[/css]

To show the menu gradient I am using box-shadow: 0 25px 0 0 rgba(255, 255, 255, 0.15) inset; and for drop down menu the logic is really simple. By default overflow to be set as hidden, opacity as 0 and height to 0 and on mouse hover we change these values as visible, 1, auto.

The icons are not images but fonts. And using text-shadow they appear to glow on mouse hover.

---

Search Box

Its really simple if you have knowledge in CSS3 gradients. A textbox with black blackground color and CSS3 gradient effect to change the looks.

[html]
<input type="text" placeholder="Search" id="df">
[/html]

 

[css]
input[type="text"] {
background: -moz-linear-gradient(center top , #1B1B1B 0%, #262626 100%) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1b1b1b), color-stop(100%,#262626)); /* Chrome,Safari4+ */
border: 1px solid #000000;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 0 rgba(0, 0, 0, 0.5) inset;
color: #FFFFFF;
float: left;
font-size: 11px;
height: 26px;
padding-left: 10px;
padding-right: 65px;
text-shadow: 0 0 3px #FFFFFF;
width: 130px;
margin-left: 50px;
margin-top: 10px;
}
input[type="text"]:hover, input[type="text"]:active{
background:#1B1B1B;
}
[/css]

---

Log out Button
Using the search box idea here also we will make use of CSS3 gradients.

[html]
<input type="submit" id="logout" value="Logout" />
[/html]

 

[css]
#logout {
background: -moz-linear-gradient(center top , #CD2525 0%, #B11B1C 50%, #940F10 50%, #861213 100%) repeat scroll 0 0 #CD2525;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#CD2525), color-stop(50%,#B11B1C), color-stop(50%,#940F10), color-stop(100%,#861213)); /* Chrome,Safari4+ */

border-radius: 3px;
color: #FFFFFF;
float: right;
font-family: arial;
font-size: 14px;
margin: 12px;
padding: 5px 15px;
text-decoration: none;
border:0px;
}

#logout:active{
background:#861213;
}
[/css]

---

Animated Graphs
The logic to design the graph is really simple, make 6-7 div's with same height and width. The height should be longer and width to be thin so that it looks like a standing pole. Then with the help of simple CSS3 gradients and CSS3 animations we have the make it animated so that it looks like animated bar graph.

[html]
<div id="graph">
<div class="progress">
<div style="height: 40%;" class="bar"></div>
<p class="stats-info"><span class="tooltip"></span>Monday</p>
</div>
<div class="progress">
<div style="height: 70%;" class="bar"></div>
<p class="stats-info"><span class="tooltip"></span>Tuesday</p>
</div>
<div class="progress">
<div style="height: 72%;" class="bar"></div>
<p class="stats-info"><span class="tooltip"></span>Wednesday</p>
</div>
<div class="progress">
<div style="height: 80%;" class="bar"></div>
<p class="stats-info"><span class="tooltip"></span>Thursday</p>
</div>
<div class="progress">
<div style="height: 75%;" class="bar"></div>
<p class="stats-info"><span class="tooltip"></span>Friday</p>
</div>
<div class="progress">
<div style="height: 65%;" class="bar"></div>
<p class="stats-info"><span class="tooltip"></span>Saturday</p>
</div>
<div class="progress">
<div style="height: 45%;" class="bar"></div>
<p class="stats-info"><span class="tooltip"></span>Sunday</p>
</div>
</div>
[/html]

To show the tooltip we are using the same logic as drop down menu. Here the tooltip is the class stats-info. On hover we are changing the opacity to give the fade in effect with the help of css3 transition effect

To show the graph animation we will be using animation effect and the css3 gradient:

[css]
.bar {
animation: 2s linear 0s normal none infinite progress-bar-stripes;
background-image: -moz-linear-gradient(-134deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

@keyframes "progress-bar-stripes" {
from {
background-position: 0 0;
}
to {
background-position: 40px 0;
}

}

[/css]

Tooltip hover effect

[css]
.stats-info {
-webkit-transition: all 0.3s linear 0s;
-moz-transition: all 0.3s linear 0s;
-o-transition: all 0.3s linear 0s;
-ms-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;

background-image: -moz-linear-gradient(center top, #CD2525 0%, #B11B1C 50%, #940F10 50%, #861213 100%);
background-image: -webkit-linear-gradient(-90deg, #CD2525 0%, #B11B1C 50%, #940F10 50%, #861213 100%);

background-repeat:repeat;
background-color:#CD2525;
border-radius: 5px 5px 5px 5px;
bottom: -45px;
color: #FFFFFF;
left: -18px;
opacity: 0;
padding: 5px;
position: absolute;
font-size: 12px;
}

.bar:hover + .stats-info{
opacity:1;
}

.tooltip {
border-bottom: 10px solid #C02020;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
display: block;
height: 0;
left: 17px;
position: absolute;
top: -9px;
width: 0;
z-index: 1;
}
[/css]

---

Notification messages
If you have gone through all the above parts then I am sure you can guess how the notification messages are coded.

By using CSS3 gradients and fonts we can make it.

[html]
<div id="messages">

<div class="error">Error</div>
<div class="notification">Notification</div>
<div class="success">Success</div>

</div>
[/html]

 

[css]
/* messages */
#messages{
float:left;
}

#messages div{
display:block;
margin:20px;
cursor: pointer;
}

/* Error */
.error {
background-image: -moz-linear-gradient(center top , #CB1634 0%, #C41330 50%, #BC102C 50%, #B70D2A 100%);
background-image: -webkit-linear-gradient(-90deg , #CB1634 0%, #C41330 50%, #BC102C 50%, #B70D2A 100%);
background-color:#CB1634;
background-repeat:repeat;
border-radius: 8px 8px 8px 8px;
color: #FFFFFF;
display: block;
font-size: 18px;
padding: 5px 30px;
position: relative;
width: 200px;
}

.error:before {
content: "X";
font-family: icons;
left: 4px;
position: absolute;
font-size: 18px;
}

/* Notification */

.notification {
background-image: -moz-linear-gradient(center top , #e4b023 0%, #e0ab1b 50%, #dca512 50%, #d79f08 100%);
background-image: -webkit-linear-gradient(-90deg , #e4b023 0%, #e0ab1b 50%, #dca512 50%, #d79f08 100%);
background-color:#e4b023;
background-repeat:repeat;
border-radius: 8px 8px 8px 8px;
color: #FFFFFF;
display: block;
font-size: 18px;
padding: 5px 30px;
position: relative;
width: 200px;
}

.notification:before {
content: "l";
font-family: icons;
font-size: 28px;
left: 0;
position: absolute;
top: -1px;
}

/* Success */

.success {
background-image: -moz-linear-gradient(center top , #6da920 0%, #62991b 50%, #558614 50%, #4d7a10 100%);
background-image: -webkit-linear-gradient(-90deg , #6da920 0%, #62991b 50%, #558614 50%, #4d7a10 100%);
background-color:#6da920;
background-repeat:repeat;
border-radius: 8px 8px 8px 8px;
color: #FFFFFF;
display: block;
font-size: 18px;
padding: 5px 30px;
position: relative;
width: 200px;
}

.success:before {
content: "O";
font-family: icons;
left: 4px;
position: absolute;
}

[/css]

---

Dialog box

[html]
<div id="dialogbox">

<div id="box-header">Are You Sure?<a id="close">X</a></div>
<div id="box-content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>

<p style="position: relative; left: 20%; margin: 12px 0pt;">
<a class="yes">Yes</a>
<a class="no">No</a>
</p>
</div>

</div>
[/html]

We are using the div structure to build the dialog box. Again with the help of CSS3 gradients, fonts and other effects we will be making it to look like a Dialog Box.

[css]
/* Modal box */

#dialogbox{
float:left;
width:344px;
padding:5px;
background:rgba(255, 255, 255, 0.2);
border-radius:10px;
}

#box-header {
background-image: -moz-linear-gradient(center top , #D2DEE3 0%, #C7D6DB 50%, #B8CBD1 50%, #BBCDD3 100%);
background-image: -webkit-linear-gradient(-90deg , #D2DEE3 0%, #C7D6DB 50%, #B8CBD1 50%, #BBCDD3 100%);
background-color:#D2DEE3;
background-repeat:repeat;
border-radius: 5px 5px 0 0;
color: #324044;
font-size: 17px;
padding: 15px;
position: relative;
display: block;
cursor: default;
}

#close {
color: #314248;
cursor: pointer;
font-family: icons;
font-size: 26px;
position: absolute;
right: 5px;
top: 10px;
}

/* */
#box-content{
text-align:center;
background:#fff;
color:#7c7c7c;
font-size:13px;
float:left;
padding: 10px 5px;
}

.yes{
background-image: -moz-linear-gradient(center top , #c1e087 0%, #c3e092 50%, #bbdd83 50%, #b7db7a 100%);
background-image: -webkit-linear-gradient(-90deg , #c1e087 0%, #c3e092 50%, #bbdd83 50%, #b7db7a 100%);
background-color:#c1e087;
background-repeat:repeat;
font-size:12px;
padding:10px 35px;
border:1px solid #81aa3c;
border-radius:5px;
margin:2px 5px;
float:left;
cursor:pointer;
}

.yes:hover{
box-shadow: 0 0 5px #a7bc84;
}

.no{
background-image: -moz-linear-gradient(center top , #f6b2b2 0%, #f7bfbf 50%, #f7c1c1 50%, #f5b1b1 100%);
background-image: -webkit-linear-gradient(-90deg , #f6b2b2 0%, #f7bfbf 50%, #f7c1c1 50%, #f5b1b1 100%);
background-repeat:repeat;
background-color:#f6b2b2;
font-size:12px;
padding:10px 35px;
border:1px solid #d38e8e;
color:#582121;
cursor:pointer;
border-radius:5px;
float:left;
margin:2px 5px;
}

.no:hover{
box-shadow: 0 0 5px #B98B8B;
}
[/css]

I hope that with the help of this tutorial you learned a lot, you can use this for free in any of your creative work(don't forget to give me a back-link :P). Tweet, FB Shares and other suggestions are always welcomed at WT.

Working of Drupal theme system

Ok, we can do this the hard way or we can do this the Drupal way!

In the below section I've tried to define the theme structure of Drupal 7.x. Always remember "Never hack core!"

Why you shouldn't modify core files

No matter how easy it is to modify core files to make Drupal do what you want it to do, resist the temptation.

• Doing so will make it complicated,difficult or near impossible to apply site updates such as Security and bug fixes.


• You will make it difficult for those that come after to maintain the site.


• You could possibly leave your site vulnerable to exploits.

The Drupal core has been designed to be modular, so there should be no reason to hack it. If there is a feature you want and it cannot be accomplished outside of modifying core, consider submitting your hack as a patch. Create an issue and tell the community the feature you want to accomplish. It will then be tested and your feature may become a part of the Drupal core.

Exceptions

Are there exceptions to this rule?

Nope.

Okay, maybe. But this is generally for specific sites or implementations by people who are extremely familiar with the Drupal code base, development practices and security model. Those who properly document their changes and practice proper revision control with their code. If you have to ask, chances are you shouldn't.

Overview of theme files

A theme is a collection of files that define the presentation layer. You can also create one or more "sub-themes" or variations on a theme. Only the .info file is required, but most themes and sub-themes will use other files as well. The following diagram illustrates the files that are found in a typical theme and sub-theme.



.info (required)

 

All that is required for Drupal to see your theme is a ".info" file. Should the theme require them, meta data, style sheets, JavaScripts, block regions and more can be defined here. Everything else is optional.

The internal name of the theme is also derived from this file. For example, if it is named "drop.info", then Drupal will see the name of the theme as "drop". Drupal 5 and below used the name of the enclosing folder of the theme.

Info files for themes are new in Drupal 6. In version 5, .info files were used solely for modules.

template files (.tpl.php)

These templates are used for the (x)HTML markup and PHP variables. In some situations they may output other types of data --xml rss for example. Each .tpl.php file handles the output of a specific themable chunk of data, and in some situations it can handle multiple .tpl.php files through suggestions. They are optional, and if none exists in your theme it will fall back to the default output. Refrain from having complex logic in these files. In most cases, it should be straight (x)HTML tags and PHP variables. A handful of these templates exist in directories where core and contributed modules exist. Copying them to your theme folder will force Drupal to read your version.

Note: The theme registry caches information about the available theming data. You must reset it when adding or removing template files or theme functions from your theme.

template.php

For all the conditional logic and data processing of the output, there is the template.php file. It is not required, but to keep the .tpl.php files tidy it can be used to holdpreprocessors for generating variables before they are merged with the markup inside .tpl.php files. Custom functions, overriding theme functions or any other customization of the raw output should also be done here. This file must start with a PHP opening tag "<?php", but the close tag is not needed and it is recommended that you omit it.

 Sub-themes

On the surface, sub-themes behave just like any other theme. The only differences is that they inherit the resources from their parent themes. To create one, a "base theme" entry inside the .info file is needed. From there it will inherit the resources from its parent theme. There can be multiple levels of inheritance; i.e., a sub-theme can declare another sub-theme as its base. There are no hard set limits to this.

Drupal 5 and below required sub-themes to be in sub-directories of the parent theme. This is no longer the case.

Others

• The logo and screen shot are not absolutely necessary for the theme to function, but they are recommended, especially if you are contributing your theme to the Drupal repository. Screenshots will show inside the theme administration page and the user account settings for selecting themes when the appropriate permissions are set. See the screenshot guidelines for more information.


• To supply administrative UI settings or "features" beyond logo, search, mission, etc., a "theme-settings.php" file can be used. This is an advanced feature. More information can be found in the Advanced settings handbook page.


• For color module support, a "color" directory with a "color.inc" file is needed along with various support files.

Remember

• If you want to base your work on a core theme, use sub-theming or make a copy and rename the theme. Directly modifying Bartik, Garland or Minnelli is strongly discouraged, since they are used for the install and upgrade process.


• All non-Core or modifications to Core themes should be installed under the "sites/all/themes" directory to keep them separate from core files. If you plan to run multiple sites from a single Drupal code base, you can make a theme available to a specific site rather than all sites; read about how to set this up in Multi-site installations.

Hope it might help you understanding the theme structure of Drupal 7.x