How To Add Custom CSS Section In ClipBucket

It can be a pain to go and edit CSS files placed deep in other folders every time you want apply small change or experiment something. Moreover, it can be hard to track changes that you have made over long time. That won’t be the case if you have Custom CSS section in admin area where you add your custom styles. It is fast and is easy to maintain. Here is how you can add one in your admin panel.

Step 1:

Go to
Main directory / admin_area / styles / cb_2014 / layout and open main.html

Step 2:

Find this line

<ul class="nav nav-tabs mainTabs">

Step 3:

Right before ending paste following code.

<li onClick='display_tab(this,"div_5",true)' id="tab_5"> <a href="#">Custom CSS</a></li>

Save main.html and now you should see a new tab under Admin Area / Stats and Website Configuration / Website Configuration

Step 4:

If you click on tab there is nothing. So now we need to add a text area where CSS can be added.

Step 5:


<div align="right"class="main_page_div" style="padding:5px; min-height:0px; margin-top:10px"><label>

Step 6:

Now paste below code before above the code in step 5.

 <div id="div_5" class="main_page_div">
      <div class="row">
        <div class="col-md-4">
          <label for="custom_css">Custom CSS</label>
          <textarea class="form-control" name="custom_css" id="custom_css" cols="45" rows="5">{$row.custom_css}</textarea>
		  <p>Any styles here will override theme styles</p>

Save main.html

Step 7:

Now go to
Main directory / admin_area and open main.php

Step 8:

Find this line


Step 9:

Paste following below the line you found.


Step 10:

Save main.php. Now you can write CSS here that will be saved in database. But it still needs more work because now we need to put that CSS into action. So let’s do that.

Step 11:

Go to
Main directory / styles / yourtheme / layout and open footer.html

Step 12:

Paste below code after


Step 13:

Save and it is done. Now start writing CSS in Custom CSS section like this.

.yourclass { width: anything}
.yourclass {
width: anything;
height: anything;

Note: Don’t forget closing bracket and if there are more than one statements, end each with a semicolon.

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)