How to Center a Gallery in a WordPress Sidebar

This article describes how to center a gallery in a WordPress sidebar, page or post. To center in a page or post, skip to the section about centering. You will need to get your Cincopa DIV ID from your browser's page source view while viewing your page.

The article requires that you edit your WordPress theme's CSS. Do so at your own risk. It is recommended that you create a backup copy of the CSS file before editing it. 

This article assumes that you have already configured your WordPress site and created and populated a gallery in your Cincopa Account. If you haven't created a gallery yet, please read Step 1 and Step 2 (do not do Step 3) in the Getting Started Guide before continuing. 

Getting the Gallery Code

• Log in to your Cincopa Account.
• Click MediaPlatform at the top of the page.

• Click My Galleries.

• Hover your mouse over the gallery you want to embed (display) in the sidebar of your WordPress site. Click Get Code. 

• Click the HTML icon  to get the HTML code (do not use the WordPress code).
• Select and copy the generated code.

Adding the Widget

• Log in to your WordPress Dashboard.
• Under Appearance on the left side of the Dashboard, click Widgets.

• Insert a Text widget into the desired sidebar by dragging it onto the sidebar.

• Enter a title for the widget (optional), paste the code copied from the Cincopa website into the box (required) and click the save button.

The widget should now appear in your WordPress sidebar. 

Centering the Gallery

• Recall the code you copied from the Cincopa website and pasted into the text widget or, if you are centering in a page or post, you will need to get your Cincopa DIV ID from your browser's page source view while viewing your page. The code begins with something like this:

<div id='cincopa_widget_39168e02-d12c-4a12-bd7f-9d8728451ecb'>

• Copy your Cincopa widget ID. Your Cincopa widget ID is the text in between the apostrophes ('). For example, for the code above you would copy:

cincopa_widget_39168e02-d12c-4a12-bd7f-9d8728451ecb

• Locate the file style.css in the root folder of your theme (siteroote\wp-content\themes\themename).
• Open the file. You may use an editor such as Dreamweaver or NVU, or notepad (Windows) or TextEdit (Mac).
• Go to the very bottom of the file, after the very last curly brace }
• Paste the following code replacing the code inside the red rectangle with your Cincopa widget ID. Make sure you include a # sign at the beginning of your Cincopa widget ID:

• Save the changes to style.css.
• Upload the edited version of style.css to your web host replacing the version currently online.
• You may need to change the % values of the right and left margins to fit the widget width more appropriately. 

That's it! Your gallery should now be centered in your sidebar widget!