> ## Content Index
> Fetch the complete content index at: https://gothru.co/docs/llms.txt
> Use this file to discover other available public pages before exploring further.

# How To Circle Control Bar Buttons Using TourMkr Virtual Tour CSS Recipes Editor
- URL: https://gothru.co/docs/how-to-circle-control-bar-buttons-using-tourmkr-virtual-tour-css-recipes-editor/
- Published: 2021-03-27T14:30:46.000Z
- Updated: 2021-03-28T18:20:44.000Z
- Description: Extending the modification of carousel plugin using the Style feature that allows you to use code injection to the plugin, now you are looking at how to customize control bar plugin using the same method with ready made code from https://recipes.tourmkr.com​.
- Author: Syafriko Yuliusman
- Tags: Control Bar

Extending the modification of carousel plugin using the **Styles** feature that allows you to use code injection to the plugin, now you are looking at how to customize control bar plugin using the same method with ready made code from [ ](https://www.youtube.com/redirect?event=video%5Fdescription&redir%5Ftoken=QUFFLUhqbGdiMTFIR3ZTMEVrWkM2TUJ2U21MWDhCSlhSQXxBQ3Jtc0ttWndoMFFWLXhuc3dXTURsdXZKNHZUWlR4OG8yVWtlb3dQMDZEOTVNNlhKdlpQVTAwVUtOOWRFeW5yb05CRnlfM3V1aTU1SjczdmZuMGJoLUljOHltYUVXWTR6RV9mV0ZpbFJZcE5QMExQcnloTmdNSQ&q=https%3A%2F%2Frecipes.tourmkr.com&ref=gothru.co)[https://recipes.tourmkr.com​](about:blank).

Here are some simple steps on how to circle control bar buttons using TourMkr virtual tour CSS recipes editor. 

## **Step** 1 : Set up the control bar

1\. Click on the “**+**” icon (*A* key) to open the Plugin Manager for Hotspots, Menus, Maps, Control Center, and Other. Then click Control Bar to open its control settings.

![](https://lh5.googleusercontent.com/PlDXuo9UG7wktMA57L7lTynByI1S--S5m3vDtUdcYRqMwT7XVfQ8uebL1XQlRj_LKq0k6GU7MY5a_3YIPtFby_AxrsMdRp8mOTF1kVf67d_bCi3gV5Rzkf-1UZKANLzt08OhqMWr)

2\. The default control bar appears on the bottom side and the control settings menu on the right side of your overlay screen. Change the style of the control bar using the tools under the Control Settings so it can fit the entire constellation properly.

![](https://lh3.googleusercontent.com/9nx2K2ETS2dsjmDeznTaha2b-3K_tvafyuJdEciO7MA-k-S6CSc0N4jIFI_Hm17ItJLC41h4LGft27aBvAk5D870Y3G8x4AdhnBQDOaEL7NK63xf6y5iG62i2SrUf-T4d4eyuSW6)

3\. Set the **Button separate** to on, **Bottom width** and **height** to 40 as shown in the example below.

![](https://lh4.googleusercontent.com/KdS9ErtlNPEqz3Wak8qstIOtlYH1ia4E6Vxs3t-GZ7QHkK4qwkYBxUT-Rb9oX5xexx1Tz8PutrIhaBU3VyUV8mZ44XnNVF3qnbKWcgfwUjjT0Aw7uA7y4tTizRMV03tohJI8t7EB)

## Step 2 : Copy and paste the CSS code

1\. Locate the **Styles** section at the lower part of the control settings.

![](https://lh3.googleusercontent.com/pYXlPKpP-0SrsOkqicRC-e-WW2QfLvHjLgAUDqGsbYMbYDBavQI9pc7rERA1b_EH4XEUyPER_qlXUXt3B_ntXOuxYJKrOPTBPdb-MYZYMRMoYv6VB6scHtX6MWKEvPCMN72eSFhu)

2\. Copy and paste the following code to the **Styles** section.

*CSS code:*

```css
.control-kavftig button{
  border-radius: 50% !important;
  color:  #ffd000;
}

```

![](https://lh3.googleusercontent.com/nygnT0kSPaT4QtpRVUiMmljNppNYeiYuWYC61mQWKYCTU8M16pm4OdLStF7y_OUvEE2DaD_mlNwXZTlSCbjCztoODzjWshohmCC9V52mObIeJDUZQpEVgYwBg5bB3qpOok2CuHPB)

## Step 3: Save & Publish

That's it! Your virtual tour with a fancy control bar is now ready to be published. Just click the Save & Publish button at the top-right corner to apply the changes.  

![](https://lh6.googleusercontent.com/aN-8VxUVqYLn8th4RjgyXqJlGa9dKic-PKAbFvGpo9QyCfZi_IOplDKiQ5Xcpko3Y0zQ1MruuODT1ipze8rGt-xpB6fu6UdNAjeKjRRrptL0JHjGxhyGo5mdRVRnVvjv1tSEdEon)

  
GoThru will always come with new features and ready made CSS code from [ ](https://www.youtube.com/redirect?event=video%5Fdescription&redir%5Ftoken=QUFFLUhqbGdiMTFIR3ZTMEVrWkM2TUJ2U21MWDhCSlhSQXxBQ3Jtc0ttWndoMFFWLXhuc3dXTURsdXZKNHZUWlR4OG8yVWtlb3dQMDZEOTVNNlhKdlpQVTAwVUtOOWRFeW5yb05CRnlfM3V1aTU1SjczdmZuMGJoLUljOHltYUVXWTR6RV9mV0ZpbFJZcE5QMExQcnloTmdNSQ&q=https%3A%2F%2Frecipes.tourmkr.com&ref=gothru.co)[https://recipes.tourmkr.com​](about:blank) that allows you to customize other Overlay Editor plugins. So, stay tuned for more updates!

## Tutorial Video: