[Support request] Footer Widget Color, Header and Contact Form Font + Color

Home Forums Support [Support request] Footer Widget Color, Header and Contact Form Font + Color

Home Forums Support Footer Widget Color, Header and Contact Form Font + Color

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #583691
    Wolf

    I am currently trying to move my old static html website to wordpress. To do this I decided to use GeneratePess ( Premium ) and Elementor. I managed to get almost everything done as I wanted it to be. However there are 3 things I can’t figure out how to do, the first and most important thing is the color of the widget area, it looks like this Screenshot, I changed the color using the customizer. Color module is activaed.

    The next ‘problem’ is the header, if any admin is free and could help me out there I would appreciate if he could dm me if this is possible in this forum. The website URL I posted is for the WordPress website and the plain domain for the static one. I basically want a 1:1 copy of the header if this is even possible.

    And a thing that is not theme related. How do I change the color and font of a contact form 7 form ?

    Thanks in Advance Wolf

    #583718
    David
    Staff
    Customer Support

    Hi Wolf, welcome aboard!

    Looks like you are using one of the sites from the GP Sites library.

    First thing the footer, if you remove that footer-widgets CSS in your image then you can change the background color via the Customiser > Colors > Footer Widgets.

    This Site has some CSS added for the Contact Form 7. Like so:

    label {
      color: #ffffff;
      font-size: 18px;
      font-weight: 600;
      text-transform: uppercase;
      font-family: Montserrat;
      font-variant: normal;
    }
    .wpcf7-form-control.wpcf7-submit {
      color: #ffffff;
      font-size: 18px;
      font-weight: bold;
      font-variant: normal;
      text-transform: uppercase;
      font-family: Montserrat;
      background-color: #163651;
    }
    
    input[type=submit]:hover {
      background-color: #ffffff;
      font-size: 18px;
      font-weight: bold;
      font-variant: normal;
      text-transform: uppercase;
      font-family: Montserrat;
      color: #163651;
    }
    .wpcf7-form {
      padding: 5px;
    }
    .wpcf7 input.wpcf7-text { width: 100%; } 

    You can either edit that directly or comment it out and it should inherit the body font which can also be set via the customiser.

    For the header if you want to match the full screen image with sticky menu below then we can use a GP Page Header instead of the Elementor section to do this. Let me know if thats what you need.

    #583733
    Wolf

    Footer:
    Check, removed the css everything worked perfec ( why didn’t I think of this )

    Contact Form:
    I managed to remove the lines regarding the font of the contact form ( thanks for the info) but Screenshot I want to change the color of this text and the color of the button.

    Header:
    Yes I know that I can created non global headers and assign them to pages, but how do I get this ‘slit slider effect’ + the nav bar only after scrolling down an then attaching.

    #583737
    Wolf

    PS figured out how to edit the buttons’ color

    #583752
    David
    Staff
    Customer Support

    The contact form inherits the body text color set in the customiser or you can try targeting it like so:

    .wpcf7-form-control-wrap span {
        color: #fff;
    }

    The header, i am not aware of a slit slider plugin for WordPress, there is a codrops for it here:

    https://tympanus.net/codrops/2012/06/05/fullscreen-slit-slider-with-jquery-and-css3/

    The navigation below the header can be achieved using a GP Page Header – it requires a code snippet which Tom covers off here:

    https://generatepress.com/forums/topic/page-header-image-above-menu/#post-288568

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.