Modify Static Front Page overlay color and opacity on Pique theme.

wisconsinwebsites · Member · Feb 24, 2016 at 4:47 pm
Copy link

Add topic to favorites
Modify Static Front Page overlay on Pique theme.

There are options for modifying the color and Image Opacity for all the other Panels but just not for the Static Front Page.

Does anyone know how to do this?

Thanks,

JErry
thesacredpath · Member · Feb 24, 2016 at 6:26 pm
Copy link
I looked at the sites associated with your username and found this one that has Pique active: http://cliqsnap.com/ . Is that the one you are talking about?

I also don’t see any content on that site. Are you talking about the opacity in the footer widget area, or… ?

If the footer widget area, this is the CSS controlling the overlay there.
```
.site-footer::before {
    background: rgba(31, 29, 26, 0.875);
}
```
wisconsinwebsites · Member · Feb 26, 2016 at 6:38 pm
Copy link
Thank you for taking the time to reply.

The site is https://yourrealestateagentblog.wordpress.com/

I noticed that there is no overlay (I believe) unless a featured image is added.

I want to remove the overlay on some or all panels and maybe the footer.

I suspect I need to go premium to do this.

Am I right?

Again, thanks for your response.

Jerry
thesacredpath · Member · Feb 27, 2016 at 7:09 pm
Copy link
Jerry, thanks for the link. The overlays on the main page are set with two CSS rules. The first rule below, sets the general transparency/opacity for all of the panels on the main page. The second is the base overlay color set on the top panel.
```
.pique-panel-background::before {
    background: rgba(0, 0, 0, 0.5);
}
.pique-panel {
    background-color: #a15b06;
}
```
In the rgba() background declarations, the first three numbers in the parentheses are the RGB color code and the final number is the opacity/transparency. On that, the closer to 1, the more opaque and closer to 0 the more transparent.

Let me know how things go with this and if you have additional questions, please let me know that too.
wisconsinwebsites · Member · Feb 29, 2016 at 2:59 pm
Copy link
Thanks again for the great information.

I think I have to have a Premium Plan to make these changes.

Am I asking this question in the correct forum because I am not using the Premium Plan for this site?

Thanks,

Jerry
thesacredpath · Member · Feb 29, 2016 at 8:44 pm
Copy link
Jerry, yes you would have to have the WordPress.com Premium Plan upgrade in order to use custom CSS.

You can try out and preview custom CSS before you buy as explained here.
wisconsinwebsites · Member · Feb 29, 2016 at 8:50 pm
Copy link
Thank you again for taking the time to answer my question.

Love to go Premium but too expensive for now.

You folks provide excellent support. Thank you for that.

:-)

Jerry
thesacredpath · Member · Feb 29, 2016 at 10:57 pm
Copy link
You are welcome, and thanks.
lighthousesbc1 · Member · Apr 4, 2016 at 11:24 pm
Copy link
Thanks for the CSS code. ive tried to play around with it for the same problem. I am using the code to make the overlays of panels and front page ‘transparent’ but it does not seem to work. with a feature image on there is still some alteration to the image. when i remove the feature image (and expect to see the background come through) it goes to a random solid color.
thesacredpath · Member · Apr 5, 2016 at 11:35 pm
Copy link
Hi @lighthousesbc1, this sets the opacity to 1 instead of the transparent 0.5.
```
.pique-frontpage .pique-panel.pique-panel2 .pique-panel-background {
opacity: 1;
}
```
Pique is a bit complex. If the above doesn’t do what you are wanting, please tell me exactly where you want to make changes and I’d be happy to help out with that.
thesacredpath · Member · Apr 5, 2016 at 11:36 pm
Copy link
Oh yeah, and I’m assuming you are talking about this site: http://nispcanada.com/ . Let me know if you are not.
lighthousesbc1 · Member · Apr 6, 2016 at 12:09 am
Copy link
thanks so much for the reply. yes, nispcanada.com

someone has suggested alternate opacity code, which seems to have worked on the panels and static page. (see below)

at this point, i have removed the featured image from the front page (and have also tested with panels) and was hoping to see the background image that i loaded in the customiser appear.. but its just a semi opaque white visual.. any ideas?

too bad i chose a complicated theme for my first website.. but ill be keeping it simple for now so hopefully i dont run in to too much trouble.

this is my code if you have any suggestions (not sure whats parts of it are redundant).
```
/*sets the general transparency/opacity for all of the panels on the main page*/
.pique-panel-background::before {
	background: rgba(0,0,0,0.0);
}

/*base overlay color set on the top panel.*/
.pique-panel {
	background-color: rgba(0,0,0,0.0);
}

/* remove opacity */
.pique-panel-background {
	opacity: 1 !important;
}

/* background: rgba(0, 0, 0, 0.00);
} */
.pique-hero {
	background-color: #0000;
}

/*alternate oppacity code
.pique-frontpage .pique-panel.pique-panel2 .pique-panel-background {
opacity: 1;
}*/
```
I am also wondering if you know how to center the 3 social media icons at the bottom of the page?

desperately trying to figure out how to remove old/not currently existing subpages from goodle search (to save me from looking bad and having to design a 404 page)
https://www.google.ca/?gfe_rd=cr&ei=HVMEV86YHsKy8wfx3Z64Aw#q=nisp+canada

many many thanks from this webdesign newbie!
thesacredpath · Member · Apr 6, 2016 at 6:48 pm
Copy link
Hi, if you wish to have the industrial symbiosis section without background, the following would do that.
```
.pique-panel:nth-of-type(2n), #masthead, .overlay {
    background: transparent none repeat scroll 0 0 !important;
}
```
I can help with the front page featured image if you wish to set one and then let me know.
themusecompany · Member · Apr 15, 2016 at 2:37 am
Copy link
my website is http://www.chaplintheband.com

I want the first header picture with no overlay and i tried the codes above. please help. I found the opacity code and set to 100 still nothing.
thesacredpath · Member · Apr 15, 2016 at 3:21 am
Copy link
Hi @byashleynoel, opacity only takes values between 0 and 1, so 100 would create a syntax error issue and not apply that rule. 0 would be fully transparent and 1 would be fully opaque.

When you say first header picture, are you talking about the one with “Chaplin” in it? If so, on the main page on Pique, there is one overall translucent overlay added that covers everything in the “hero” section (the whole page as you have it. Add this custom CSS to see what I mean.
```
.pique-panel-background::before {
    background: rgba(0, 0, 0, 0);
}
```
thesacredpath · Member · Apr 15, 2016 at 3:23 am
Copy link
Ah wait, use this instead. I found a unique parent div I could use to limit it to only the top image.
```
#pique-hero .pique-panel-background::before {
    background: rgba(0, 0, 0, 0);
}
```

No items found.