Title: Help with Pique Theme
Last modified: August 31, 2016

---

# Help with Pique Theme

 *  Resolved [qbrc](https://wordpress.org/support/users/qbrc/)
 * (@qbrc)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/help-with-pique-theme/)
 * I love the Pique theme, but I’m noticing a few things on my site: ciscoconsulting.
   org.
 * 1. the front panel (note: top section) image is much darker than the actual image.
   I’m not sure why that’s happening.
 * 2. When using the grid template (in this case, on panel 2), for some reason, 
   the first three images align, but the bottom three have this weird stair case
   alignment.
 * Anyone else run into this?

Viewing 15 replies - 1 through 15 (of 15 total)

 *  Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * (@zoonini)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/help-with-pique-theme/#post-7047566)
 * Glad you’re liking Pique! I’ll answer your questions separately:
 * > 1. the front panel (note: top section) image is much darker than the actual
   > image. I’m not sure why that’s happening.
 * There’s a 50% opacity setting on the first panel. If you’d like to override that,
   you can add some custom CSS. For example, this would change the 50% opacity to
   20% – you can adjust the value as you’d like:
 *     ```
       .pique-panel-background::before {
           background: rgba(0, 0, 0, 0.2) none repeat scroll 0 0;
   
       }
       ```
   
 * Don’t edit the theme files directly, otherwise your changes will be overwritten
   every time the theme is updated to the latest version.
 * Since you’re already using Jetpack, an easy way to add custom CSS is to activate
   the [Custom CSS](http://jetpack.me/support/custom-css/) module. You’ll then add
   your custom CSS in the new stylesheet editor that’ll appear in your dashboard,
   under Appearance > Edit CSS.
 *  Thread Starter [qbrc](https://wordpress.org/support/users/qbrc/)
 * (@qbrc)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/help-with-pique-theme/#post-7047567)
 * Thanks, Kathryn! Do you know what might be happening with the grid template (
   Question 2)?
 *  Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * (@zoonini)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/help-with-pique-theme/#post-7047568)
 * > 2. When using the grid template (in this case, on panel 2), for some reason,
   > the first three images align, but the bottom three have this weird stair case
   > alignment.
 * The images in the top row are all tightly cropped so there is no whitespace around
   the edges of the graphic. Take a look at the lightbulb, for example:
 * [http://i2.wp.com/ciscoconsulting.org/wp-content/uploads/2016/02/Think.png](http://i2.wp.com/ciscoconsulting.org/wp-content/uploads/2016/02/Think.png)
 * Try cropping the pencil image more tightly, to reduce the empty whitespace at
   the top and bottom.
 * [http://i2.wp.com/ciscoconsulting.org/wp-content/uploads/2016/02/Pencil.png](http://i2.wp.com/ciscoconsulting.org/wp-content/uploads/2016/02/Pencil.png)
 * Try reducing the height of the magnifying class so it better matches the height
   of the first image. Currently it’s 167px high, while the book image is only 90px
   high:
 * [http://i2.wp.com/ciscoconsulting.org/wp-content/uploads/2016/02/Research.png](http://i2.wp.com/ciscoconsulting.org/wp-content/uploads/2016/02/Research.png)
 *  Thread Starter [qbrc](https://wordpress.org/support/users/qbrc/)
 * (@qbrc)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/help-with-pique-theme/#post-7047569)
 * Also, Kathryn, I think that CSS code is affecting panel 1, rather than the very
   top panel. Can I do the same with the very top panel?
 * Thank you so much for this beautiful work.
 *  Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * (@zoonini)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/help-with-pique-theme/#post-7047575)
 * Try this to target just the first panel:
 *     ```
       .home .post-6 .pique-panel-background::before {
            background: rgba(0, 0, 0, 0.2) none repeat scroll 0px 0px;
       }
       ```
   
 *  Thread Starter [qbrc](https://wordpress.org/support/users/qbrc/)
 * (@qbrc)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/help-with-pique-theme/#post-7047593)
 * Excellent. Thank you, Kathryn!
 * Do you have plans on allowing the user to change the grid-graphic format? (E.
   g., if the user doesn’t want the graphic to be cropped in a circle).
 * Again, thank you for your terrific work!
 *  Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * (@zoonini)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/help-with-pique-theme/#post-7047595)
 * My pleasure!
 * > Do you have plans on allowing the user to change the grid-graphic format? (
   > E.g., if the user doesn’t want the graphic to be cropped in a circle).
 * This custom CSS should override the circular effect:
 *     ```
       .pique-grid-three img.size-pique-square {
         border-radius: 0;
       }
       ```
   
 *  Thread Starter [qbrc](https://wordpress.org/support/users/qbrc/)
 * (@qbrc)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/help-with-pique-theme/#post-7047630)
 * Thank you so much, Kathryn. Do you happen to know off hand how to make the circular
   effect override panel specific? That is, override it on panel 1 and 2 but not
   3?
 *  Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * (@zoonini)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/help-with-pique-theme/#post-7047631)
 * Sure, if you right-click into a panel with a [browser inspector](https://thewc.co/articles/view/web-inspector-tutorial),
   you can see the ID for each panel, and then target your CSS to it.
 * The IDs are in this structure: `pique-panel1`
 * So you can target the aboe change to only panel 1 and 2 like this:
 *     ```
       .pique-panel1 .pique-grid-three img.size-pique-square, .pique-panel2 .pique-grid-three img.size-pique-square {
         border-radius: 0;
       }
       ```
   
 *  Thread Starter [qbrc](https://wordpress.org/support/users/qbrc/)
 * (@qbrc)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/help-with-pique-theme/#post-7047645)
 * Strangely, I’m still having alignment issues with Academic Writing and Academic
   Research. I’ve tried to ensure they are the appropriate sizes, but for whatever
   reason, those two elements of the grid are off-alignment.
 *  Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * (@zoonini)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/help-with-pique-theme/#post-7047649)
 * Your images on the third row are all different heights:
 * [http://i0.wp.com/ciscoconsulting.org/wp-content/uploads/2016/02/booka-e1455032184323.png](http://i0.wp.com/ciscoconsulting.org/wp-content/uploads/2016/02/booka-e1455032184323.png)–
   90px
 * [http://i2.wp.com/ciscoconsulting.org/wp-content/uploads/2016/02/Pencil.png](http://i2.wp.com/ciscoconsulting.org/wp-content/uploads/2016/02/Pencil.png)–
   72px
 * [http://i2.wp.com/ciscoconsulting.org/wp-content/uploads/2016/02/research.png](http://i2.wp.com/ciscoconsulting.org/wp-content/uploads/2016/02/research.png)–
   121px
 * If you make sure they’re all around the same height, they’ll look more evenly
   aligned.
 *  [emeiar](https://wordpress.org/support/users/emeiar/)
 * (@emeiar)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/help-with-pique-theme/#post-7047670)
 * Hello! I’m new to all of wordpress but i’m really enjoying creating my website.
   
   I’m having the same problem of qbrc: the main pannel is too dark. I followed 
   your instructions with the Cusotm CSS plugin and i get a lighter result. But 
   I’d still like to make it different. I see the rgba is black. I’ve tried to change
   with a different color (255,229,235,0.1), but the preview doesn’t change.
 * What am I doing wrong?
 *  Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * (@zoonini)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/help-with-pique-theme/#post-7047677)
 * emeiar – could you please start a separate thread for your question and provide
   a link to your site?
 * Also please be sure to tag your post with **wpcom-theme** in the tags area to
   be sure it will get attention, otherwise I won’t see it:
 * [⌊WordPress Support Themes and Templates⌉⌊WordPress Support Themes and Templates⌉[
 * Thanks!
 *  Thread Starter [qbrc](https://wordpress.org/support/users/qbrc/)
 * (@qbrc)
 * [10 years, 2 months ago](https://wordpress.org/support/topic/help-with-pique-theme/#post-7047680)
 * Hello, Kathryn!
 * Are there ways to change the ways the blog portion of your theme looks?
 * For example, on the [blog](http://ciscoconsulting.org/2016/01/31/how-to-avoid-being-a-praise-junky-in-graduate-school/),
   I’d like to change things like bringing the title of the full page (at the very
   top) down below our icon, have a menu similar to the scrolling page that leads
   users back to the main page, etc.
 *  Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * (@zoonini)
 * [10 years, 2 months ago](https://wordpress.org/support/topic/help-with-pique-theme/#post-7047681)
 * > Are there ways to change the ways the blog portion of your theme looks?
 * Most tweaks can be done with some code. 🙂
 * > For example, on the blog, I’d like to change things like bringing the title
   > of the full page (at the very top) down below our icon
 * Try this in your custom CSS, to move the site title down, on larger screens:
 *     ```
       @media screen and (min-width: 960px) {
         .site-branding .site-title {
           margin-top: 350px;
         }
       }
       ```
   
 * You may want to add other media queries to target different screen sizes as well.
   You can learn more about using media queries that target certain screen sizes
   here:
 * [http://en.support.wordpress.com/custom-design/custom-css-media-queries/](http://en.support.wordpress.com/custom-design/custom-css-media-queries/)
   
   [http://css-tricks.com/snippets/css/media-queries-for-standard-devices/](http://css-tricks.com/snippets/css/media-queries-for-standard-devices/)
   [http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries](http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries)
 * >  have a menu similar to the scrolling page that leads users back to the main
   > page, etc.
 * Go into Appearance > Menus, and create a custom menu. Assign it to the theme’s
   Primary Menu location.
 * [https://codex.wordpress.org/Appearance_Menus_Screen](https://codex.wordpress.org/Appearance_Menus_Screen)
 * I’m going to close this thread as the original issues have all been resolved 
   and it’s now quite long, but feel free to open a new one if you need further 
   help. Be sure to tag it with **wpcom-theme** as I explained to emeiar above, 
   so we’ll get notifications for it. Thanks!

Viewing 15 replies - 1 through 15 (of 15 total)

The topic ‘Help with Pique Theme’ is closed to new replies.

## Tags

 * [wpcom-theme](https://wordpress.org/support/topic-tag/wpcom-theme/)

 * 15 replies
 * 3 participants
 * Last reply from: [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * Last activity: [10 years, 2 months ago](https://wordpress.org/support/topic/help-with-pique-theme/#post-7047681)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics