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.
1. Go to "My galleries"
2. Choose the gallery you want to share. Click small arrow sign near "Edit gallery" option to open additional options
3. Click "Embed it"
- Click the HTML icon to get the HTML code (do not use the WordPress code).
- Click "Copy" to 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:
- 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:
- 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!