Administration Panel Theme in OpenCart: Styling dashboard

In this recipe, we will style our dashboard. We will apply a header image for each block in the dashboard.

1. How to do it…

We follow these steps to change the dashboard:

First, we will modify the dashboard For that, we ﬁrst get the dimension of the header from Firebug. We select the inspector icon from Firebug.

Under the layout section of the right column of Firebug, we found the layout of the header as follows:

Now we open up GIMP, and create a new image with
We zoom our image, so that it will be easy for us to make For this, we choose the zoom tool:

We select the color tool and choose an appropriate color for our dashboard For instance, we select #29a7f6 as the header front end color:

Apply the selected color with gradient tool from the We apply it from top to bottom:

Our header image now becomes like this:

We also use the ink tool from the toolbox:

So, our image becomes like this:

We save our image under the admin\view\image We need to modify some code in the home.tpl ﬁle under the admin\view\template\common folder. We will replace this code:

with the following code:

style=”display: inline-block; width: 100%; margin-bottom: 15px; clear: both;”>

We now add a new selector in our admin css under the admin\view\stylesheet ﬁle. This is the code block in the stylesheet:

#dashboard-header {

background: url(‘../image/dashboard-header.png’) repeat-x;

color: #FFF;

border-bottom: 1px solid #8EAEC3;

padding: 5px;

font-size: 14px;

font-weight: bold;

}

When we refresh our browser, we will ﬁnd our new dashboard header image:

Now, we remove the border style of the dashboard header section:

#dashboard-header {

border-bottom: 1px solid #8EAEC3;

}

The dashboard header has inline To add this style to other headers, we need to add the selector ID dashboard-header. Also, remove the inline styles from the blocks:

//…

And we use the following selector in place of the above:

Our dashboard now looks like this:

Now, we add some style to the overview We apply the Overview selector ID to it and use this style:

#overview td {

padding: 2px 0px;

border-top: 1px solid #eee;

}

So, our overview block now looks like this:

To show the latest orders, we make some coloring on the The style is deﬁned in the table list. We change the background color to #e1f1e7:

.list thead td {

background-color: #e1f1e7;

padding: 0px 5px;

}

This changes the order list style:

For the border of the list table, we add the following style in the css:

.list {

border-collapse: collapse;

width: 100%;

border-top: 1px solid #c3e0ce;

border-left: 1px solid #c3e0ce;

margin-bottom: 20px;

}

.list td {

border-right: 1px solid #c3e0ce;

border-bottom: 1px solid #c3e0ce;

}

So, our order table now appears as the following:

Now, we change the admin section For this, we open the box_center.png image under admin\view\image.

Then, we select the Select by color tool from the toolbox:

And click on the center area of the selected From the color panel, we choose #f0f3d6:

With the gradient tool, we apply it from top to bottom:

We choose #d1d5ae for the image top and bottom border:

With the Select by color tool from the toolbox, we select the top and bottom of the And then, we choose the bucket fill tool:

Then, we save our image and refresh the browser:

Now, we change the left side of the block We will open the box_left.png ﬁle under admin\view\image.

We now select the Free select tool from the toolbox:

With the selected tool, we select the region of the left white area. And then, we choose #f0f3d6. Using the gradient tool from the toolbox, we change our selected image and it becomes like this:

We choose the Fuzzy select tool from the tool box:

And select the border area with Using the bucket ﬁll tool, we will apply #d1d5ae in the border:

Now, we can view the browser to show the changes:

By following the same above mentioned process, we are going to create the right side image.

So, the right side border now looks like this:

We have changed the top header background Now, we will adjust the input box style:

input[type=’text’] {

padding: 7px;

}

This brings the following changes to our input box:

We apply a border color to the input text box:

input[type=’text’] {

padding: 7px;

border: 1px solid #eee;

}

Now, our input box is like this:

To use a border color on focus, we bring the following style:

input[type=’text’]:focus {

border: 1px solid #21c3c6;

}

By focus on an input text box, the box will appear like this:

We have changed the input box style, now we are going to change select box style:

select {

padding: 7px;

}

This makes our select box style like this:

For the border style, we use this border property:

select {

padding: 7px;

border: 1px solid #eee;

}

In the browser, the select box shows up as the following:

Now, we will change the edit button style in the product We wrap the anchor link with the span tag:

<?php echo $action[‘text’]; ?>

</a>

</span>

And add the following style:

.edit-button

{

border: 1px solid #eee;

}

So, the Edit button looks like this:

And we apply the display: block style to

.edit-button

{

border: 1px solid #eee;

display: block;

}

This makes our style as:

Now, we use padding style for the edit button:

.edit-button

{

border: 1px solid #eee;

display: block;

padding: 5px;

}

So, our Edit button becomes the following:

Then, we align our text on the center:

.edit-button

{

border: 1px solid #eee;

display: block;

padding: 5px;

text-align: center;

}

This brings the following changes:

We want to remove the underline from the Edit button:

.edit-button a

{

text-decoration: none !important;

}

Then, the button appears like this:

For hover effect, we write the following code:

.edit-button:hover{

border: 1px solid #4ba6e0;

cursor: pointer;

}

We ﬁnd the following changes in the browser:

We have seen the product list Now, let’s apply styling to the text area section of the product edit page. We change the text area border color with the following code block:

textarea {

border: 1px solid #eee;

padding: 7px;

}

So, the edit page appears as this:

Now, we use a focus style to the text area:

textarea:focus{

border: 1px solid #21c3c6;

padding: 7px;

}

We can view the change in the browser:

We are going to change the settings navigational menu. We ﬁrst open up png under admin\view\image. Now, we will change the color to #a9deff. We select the color from the color panel:

With the gradient tool, we apply it from top to bottom on the image:

We save the image and go to the browser to view the changes that we have made so far for our settings navigation:

Now, change the font color of the navigational tab:

.htabs a {

color: #888;

}

This makes the following changes:

We also change the borders of the navigational tabs:

.htabs a {

border-top: 1px solid #eee;

border-left: 1px solid #eee;

border-right: 1px solid #eee;

}

Then, the navigational bar with the new color appears as the following:

We change the font weight property to normal for the navigational tab:

.htabs a {

font-weight: normal;

}

When we refresh the browser, we ﬁnd our changes in action:

For the selected tab, we apply the following styles:

.htabs a.selected {

padding-bottom: 8px;

background: #3f9687;

}

This brings the following changes:

Again, we can change the color of the selected tab font:

.htabs a.selected {

padding-bottom: 8px;

background: #3f9687;

color: #fff;

}

In the browser, we see the new selected tab:

To apply hover effect on the navigational tabs, we use a different We add the following style:

.htabs a:hover {

background: #a9deff;

}

If we go to the browser, we ﬁnd the changes:

To change the font color on hover, use the following code block:

.htabs a:hover {

background: #a9deff;

color: #fff;

}

When you visit the browser, it produces the following result:

Let’s change the color of the Save First, we open up the button_right.png that is under admin\view\image. Then, we use the Select by color tool from the tool box:

We select the transparent area on the Now, click the right mouse, go to select\invert:

We choose #d2a836 for the button style:

We apply the Gradient effect on the button with the gradient tool from the toolbox:

We apply the effect from the top to bottom with the selected color:

We save our button image and go to the browser to see the changes:

So, we also need to change the button_left.png under the admin\view\image. We follow a similar approach to style the left button image.

First, open it with Select by color tool from the tool box:

Then, invert the selected region and apply the color with the gradient Our image will become like this:

We save our button and refresh the browser to see the changes in action:

The button font color is white; we will change it to #888:

.button span {

color: #888;

display: block;

padding: 5px 10px 5px 2px;

background: url(‘../image/button_right.png’) top right no- repeat;

}

After this, the change will be in action:

Let’s change the breadcrumb style for the admin We wrap the anchor link with the class breadcrumb-link:

<?php foreach ($breadcrumbs as $breadcrumb) { ?>

<?php echo $breadcrumb[‘separator’]; ?><span class=”breadcrumb- link”><a href=”<?php echo $breadcrumb[‘href’]; ?>”><?php echo

$breadcrumb[‘text’]; ?></a></span>

<?php } ?>

</div>

And then, we apply a style on the above class:

.breadcrumb-link{

border: 1px solid #eee;

}

This brings the breadcrumb like this:

Now, we apply 5px padding to the breadcrumbs:

.breadcrumb-link{

border: 1px solid #eee;

padding: 5px;

}

This makes our header breadcrumbs like the following:

We apply a hover color to our breadcrumb header:

.breadcrumb-link:hover{

border: 1px solid #4ba6e0;

cursor: pointer;

}

In the browser, we found our breadcrumb as the following:

We will remove the underline style from the For this we apply, the following code:

.breadcrumb-link a{

text-decoration: none !important;

}

Now, we can ﬁnd the changes in the browser:

3. How it works…

We have used some background images and styles for the different blocks of the admin page. There may be many different blocks of the admin page. Also, you can use your imagination to make your own blocks of admin page.

Source: Hasan Tahsin (2011), OpenCart 1.4 Template Design Cookbook, Packt Publishing.

Opencart

Administration Panel Theme in OpenCart: Styling dashboard

1. How to do it…

3. How it works…

Leave a Reply Cancel reply

1. How to do it…

3. How it works…

Leave a Reply Cancel reply

Login