Changing color of contact form

gorinee · Member · Aug 26, 2016 at 3:14 am
Copy link

Add topic to favorites
Hi, how I set background of contact form to transparent? what is the syntax? Please, help.

The blog I need help with is: (visible only to logged in users)
gorinee · Member · Aug 26, 2016 at 3:16 am
Copy link
site is https://holistickeys.com
thesacredpath · Member · Aug 27, 2016 at 3:05 am
Copy link
Hi there, give this a try and let me know if you wish to make other adjustments. The second rule below makes the labels (name, email) white so they show up.
```
.pique-panel-content form {
    background-color: rgba(0, 0, 0, 0);
}
.contact-form label {
    color: #fff;
}
```
gorinee · Member · Aug 27, 2016 at 1:58 pm
Copy link
Hello, now I’m very happy with this code.
Thank you so much!
thesacredpath · Member · Aug 27, 2016 at 11:33 pm
Copy link
Hooray and you are welcome!
gorinee · Member · Aug 28, 2016 at 8:46 pm
Copy link
Hello,
I have a new issue with this page. After I have deleted the image, how to divide this grid page evenly between two only column? Thanks
thesacredpath · Member · Aug 29, 2016 at 7:00 pm
Copy link
This theme makes use of some more advanced CSS, Add the following to make those two each take up half the width.
```
.pique-grid-three article {
    float: left;
    width: calc((100% - 80px) / 2);
}
```
gorinee · Member · Aug 29, 2016 at 7:39 pm
Copy link
Thanks, but how we can do it personally just for panel 1?
Is there way to change CSS only there? Can we add the name of the page in CSS?
Ths.
thesacredpath · Member · Aug 30, 2016 at 2:48 am
Copy link
If you are talking about only doing it for the monthly newsletter, then add this instead.
```
.post-811 .pique-grid-three article {
    float: left;
    width: calc((100% - 80px) / 2);
}
```
gorinee · Member · Aug 30, 2016 at 3:30 am
Copy link
Yes! It works! Next step – centering the buttons in ‘Holistic Keys’ page, buttons and titles too. Thank you for help! Happy!
thesacredpath · Member · Aug 30, 2016 at 9:15 pm
Copy link
Hi there, on the Holistic Keys page, you need to take the buttons out of the previous paragraph and into their own paragraph. Open those child pages in the page editor and while in the Visual tab, place your cursort at the beginning of the button text link, hit backspace/delete twice to move it up to the end of the previous paragraph and then press the enter/return key to start a new paragraph. Then add the following to the bottom of your custom CSS.
```
#post-763 .pique-grid-three p:last-of-type {
    text-align: center !important;
}
```
gorinee · Member · Aug 30, 2016 at 10:24 pm
Copy link
Works wonderfully! Thanks! Interesting how now we can center the titles of the two children? Appreciate so much your help!
thesacredpath · Member · Aug 31, 2016 at 4:01 am
Copy link
We can do that. I’ve actually targeted this to the “home” page only so there isn’t any chance that it will mess up something else on another page. I’ve used the unique post id css classes for each of those child pages and the “home” CSS class set in the opening body tag.
```
.home #post-768 h3, .home #post-773 h3, .home #post-778 h3 {
    text-align: center;
}
```
gorinee · Member · Aug 31, 2016 at 3:29 pm
Copy link
Thank you so much! I wonder how to access the control of opacity for first static page ‘Home’? For all others panels I do have it.
gorinee · Member · Aug 31, 2016 at 4:33 pm
Copy link
The same story like in Newsletter panel with using grid page for Services panel, where only 2 columns. Trying to write my CSS but don’t know where to get post id..and which one?
Please help. Ths.
thesacredpath · Member · Aug 31, 2016 at 10:10 pm
Copy link
On the “home” section at the top, again we will have to use the post id class, which is in the opening article HTML tag for that section. You can find that using your web inspector, or by viewing the source code. For the home section it is post-715. In this case, there are two things that control the overlay, a background color in a :before pseudo CSS rule, and an opacity. These would be the two rules with their original settings.
```
.post-715 .pique-panel-background:before {
    background-color: rgba(0, 0, 0, 0.5);
}
.post-715 .pique-panel-background {
    opacity: 0.5;
}
```
In the background-color declaration in the first rule, the first three numbers between the parentheses are the RGB color code for black and the fourth number, 0.5 is the alpha transparency. The closer to 0, the more transparent and the closer to 1, the more opaque.

I would suggest putting both of these in and then play with one and then the other to see how they effect things and then you can adjust each as desired.

If you are not familiar with the web inspector in your browser, take a look at our support page on How to Find Your Theme’s CSS where you will find some brief screencasts to get you started with it. I find it an invaluable tool when working with CSS.

For the Monthly newsletter section, you can copy the rules above and then change the post id #. In the case of the Newsletter section, it is post-811.
gorinee · Member · Aug 31, 2016 at 10:48 pm
Copy link
Hi, I really make you work hard! Thanks! I’ve figured out the post id #.
Background works nicely.

Now, I’m trying to position column with Gallery in Services page using the code for Newsletter, but don’t know how to give the writing(left side) only 1/3 part of width and for Gallery of images 2/3, the rest.

Yes, I’m looking at source of CSS to learn more, not easy though…
Thank you so much for help!
thesacredpath · Member · Sep 1, 2016 at 7:38 pm
Copy link
This is a bit trickier. Working on this, it appears best to do the 1/3, 2/3 at 768px and wider and then let the two sections go to 100% width (text on top and gallery on bottom) at 767px and narrower.

Remove this from your custom CSS
```
.post-1039 .pique-grid-three article {
    width: calc((100% - 60px) / 2);
}
```
and then add this to the bottom of your custom CSS.
```
@media screen and (min-width: 768px) {
	.home #post-1042 {
    width: calc((100% - 60px) * 0.33);
  }
  .home #post-898 {
    width: calc((100% - 60px) * 0.66);
  }
}
@media screen and (max-width: 767px) {
	.home #post-1042, .home #post-898 {
		width: 100%;
	}
	.home #post-1042 a.button {
		max-width: 240px;
	}
}
.home #post-1042 p {
	text-align: center;
}
```
Also, you have added spaces before some of the lines in the text section, and that isn’t the best way to do alignment of text. I would suggest removing all those spaces at the beginnings of those lines. I’ve included a rule (the last one) to center align all those lines.
gorinee · Member · Sep 1, 2016 at 10:44 pm
Copy link
Thanks! Now it feels like advanced math or cosmic science.
Please, take look if I did everything like you said. I know I did, but who knows what happens, when one long time staring on numbers…
The text on the left, images – on the right. Spaces I blew away…

Now, next step, I’d love to see when visitor clicks on any image it shows the title of image with smooth surface around, CSS effect with mouth hover. Is that too much to ask?
Thank you!!!
thesacredpath · Member · Sep 2, 2016 at 6:32 pm
Copy link
Are you taking about on the Gallery in the Services section? The Alt or Title text would, I think, be impossible to style and position since that is shown by the browser itself.

You may want to add a caption to your images, or perhaps add a caption to one of your images and then let me know and I’ll see if I can do that with the caption.

No items found.