Edit footer

Support
#1

Hey there,
I’d like the text, including the warnings, of my cf 7 to look like the text above it. I marked the contact form in the screenshot http://prntscr.com/j0v4ld
furthermore I’d like to some space between the check mark and the text on the right of it.
https://zerotoone.de/
Thanks for your help!

#2

Hello @zerotoone.de,

Thanks for asking. :slight_smile:

You can add following CSS under Pro > Theme Options > CSS:

span.wpcf7-list-item input[type="checkbox"] {
    margin-right: 20px;
}

.wpcf7-response-output {
    text-transform: lowercase;
}

.wpcf7 p {
    text-transform: lowercase;
}

Let us know how it goes.

Thanks.

#4

thanks, I managed to set the font globally. Now I need the font of my cookie consent to use my global font. Should I do this by referencing to my global font? (if yes how do I do it)
or should I name the font specifically in the .css of the cookie consent notice?
What of those options is best practice?
Thanks for our help!

http://zerotoone.de/wp-content/themes/pro-child/cookieconsent.css

and this is the hook I’am going to be using

#5

Hi there,

To set the font of the cookie area using the font set in your Global Settings, please add this CSS:

.cc-theme-edgeless.cc-window {
    font-family: inherit;
}

The result should be like this:

#6

thank you :heart_eyes:

#7

You are most welcome. :slight_smile:

#8

Can you tell me how I can add my .svg arrow behind the link? http://prntscr.com/j1ae8g

this is how I defined the .svg on my website
class=“arrow-s” src=“https://zerotoone.de/wp-content/uploads/blau_pfeil.svg”

#9

Hi there,

Please try this:

.cc-link:after {
    background-image: url(https://zerotoone.de/wp-content/uploads/blau_pfeil.svg);
    background-size:contain;
    display: inline-block;
    width: 15px; 
    height: 15px;
    content:"";
    position: relative;
    top: 2px;
    left: 5px;
}
#10

thank you bud the .svg did not appear

#11

Hi there,

The code works fine when I tried it on the code inspector and the result is this:

Kindly double check that there is not CSS error in the codes that you have in the global CSS panel as it would cause some codes not to take effect.

#12

Double checked no errors
I added it to the css of the cookie consent before. now put it in global css and nothing changed.
furthermore I’d like to get rid of the decoration chrome is putting out on the button, when activated.
Thanks a lot!

#13

Hi,

I’ve checked your website and I can see you added this code in Global CSS:

//Blauer blau_pfeil .cc-link:after{background-image:url(https://zerotoone.de/wp-content/uploads/blau_pfeil.svg);background-size:contain;display:inline-block;width:15px;height:15px;content:"";position:relative;top:2px;left:5px}

Using the comment line //Blauer blau_pfeil is preventing the CSS code from working correctly, as this isn’t the correct method of writing comments in CSS. To write comments in CSS, please use this structure /* Your Comment Here */. Check this reference for more details.

Regarding the text decoration that you want to remove, could you please let me know which link/button exactly you want to remove the decoreation from?

Thanks.

1 Like
#14

Thank you this worked. however, there is some kind of filter activated on the .svg. The color changes on hover. How can I get rid of that color change ?

#15

Hi There,

Please also add this custom CSS:

a.cc-link {
    opacity: 1;
}

Hope it helps :slight_smile:

1 Like
#16

Thank you, worked great! I tried to add the blur filter to the bg of the cookie consent window

-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);

It applied to on top of the whole thing and not only on the background, could you give me a hint?

#17

Hi There,

You can try with the RGBA background color instead:

.cc-window.cc-floating {
    background: rgba(230, 230, 230, 0.75);
}

Let us know how it goes!

#18

I added a white background color with the reduced opacity already. My question was: How can I add my css blur code to the background?

#19

Hi there,

I don’t think you can apply it directly to the background, it should be an overlay element.

But I don’t think it needs any blur effect since it’s a white transparent effect. Blurr is only noticeable on images or colored elements. Would you mind providing a mockup design of what you wish to implement?

Thanks!

#20

#21

Hi There,

You can try with this box-shadow instead. Please update the previous CSS to this:

.cc-window.cc-floating {
    color: rgb(0, 0, 0);
    background-color: rgba(255, 255, 255, 0.314);
    -webkit-box-shadow: 0px 0px 2px 2px rgba(196,196,196,0.5);
    -moz-box-shadow: 0px 0px 2px 2px rgba(196,196,196,0.5);
    box-shadow: 0px 0px 2px 2px rgba(196,196,196,0.5);
}

Let us know how it goes!