Modifying the theme

Most Viewed Article

You probably want to extend the theme or change some of its css design, or even change some template files. Here are a few points, you should remember when modifying the theme:

  • Do never modify any css file we deliver (except custom.css and adding new layout files)
  • Do never modify any php file we deliver (except functions-custom.php)

Why that? Because of possible updates in the future. We do not give support for custom modified files.

However, all template files (header-*.php, footer-*.php, comments.php and the files in the templates/ folder) and images can of course be modified. The restrictions are only valid for the bebelCp2 folder, and the functions.php.

1. Adding / Modifying CSS

If you want to add or modify any style related things, read more here about The Styles Panel.

2. Adding PHP

If you want to add php, you can do that in two ways. Either you use the WordPress Plugin System to enhance your theme. If you prefer to do some custom coding and want to enhance the theme with the help of your own programming skills, a great point of entry would be the functions-custom.php file. It will be loaded at the very end of the functions.php and give you the freedom to do whatever you would like.

3. Adding Icons for Shortcodes

This is very exciting. We have made our icon based shortcodes as flexible as possible for you to enhance. We figured that you probably have your own set of icons, or found a stylish commercial one you bought the license for. Adding new icons is as easy as uploading files to your server in a specific folder.

We will cover in this section only the adaption of 32x32px big icons. For smaller or bigger icons, you will additionally have to override some CSS classes.

1. The “Split Text Icon” Shortcode

The Split Text Icon shortcode can be found in the shortcode generator in Content -> Split Text Icon. This shortcode makes use of a sub set system, which means it parses the subfolders of a given directory. This directory can be found inimages/icons. Simply put: You can seperate the sets by folders you put in this directory. Create a new directory and insert your new icons in there and they will be automatically recognized by the system. Please note that only one level of folders will be parsed.

2. The “Message Box” Shortcode

The Message Box Shortcode can be found in the shortcode generator in Basic -> Message Box. This shortcode does not make use of the sub set system, it only parses the contents of one directory. This directory can be found inimages/shortcodes/messagebox. Just copy the icons you want to use for the boxes in there. You can also override the existing ones.
Make sure your icons are named in lower case only, and they should for the sake of consistency be a .png file.

When adding a new icon, there are two ways for you to proceed. You can upload a icon only and use the default box styling of the theme, or you can add some custom CSS to truly adapt the box the way you want it to.


As you can see the default box works great for decent messages and icons in a grey tone. However, when adding the arrow, we felt like this message should really stick out. To do that, you need to add in the custom.css some CSS code. (Read more about custom.css and other css insertion possibilities in The Styles Panel.)

Our icon is named arrow.png.

.bebel_shortcode-messagebox_arrow {
    background-color: #8ff57a;
    border: 1px solid #529214;
    color:  #060;

The CSS class you have do add prefixes with .bebel_shortcode-messagebox_ and ends with the name of your icon, but without the file extension. blubb.png would end up in .bebel_shortcode-messagebox_blubb, etc. You can override the three colors with colors of your choice. Once all of it is on the server you can use your new Icons in the shortcode generator.




Rate This Article

(29 out of 116 people found this article helpful)

Leave A Comment?