Contact Page

[Akhanom]

Hello,

My page is located here: http://staging.ad-duha.co.uk/contact

1. How do i change the contact form field areas to black instead of white? like this: http://demo.theme.co/integrity-3/contact/

2. The background image that i have set now is fine but id like to make it a little darker only for my contact page? as its conflicting with the text? is there a way of increasing the opacity?

3. The navigation menu on mobile device is too close to the content of the page / breadcrumb? is there a way to increase some space?

[mldarshana]

Hi There @Akhanom

Thanks for writing in! Please find the below answers to your question.

1.Add the following CSS rule into your X -> Theme Options -> CSS area.

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    background-color: #242424;
    border: 1px solid #262626;
}

2.Once you set a background image to a section, you can use the background upper layer to change a color, so that your text will be clearly visible.

3.Add the following CSS rule into your X -> Theme Options -> CSS area.

@media (max-width:480px){
  .x-navbar {
    min-height: 55px;
  }
}

Let us know how it goes.
Thanks!

[Akhanom]

Thank you - that worked. However i found it quite hard on the eyes - the darker version so i tried reverting to the lighter version again but then all the text looks really blurred and just looks awful. Why is it doing that?

[lely]

Hi @Akhanom,

You’re always welcome.
I tried the same process switching from dark to light. First installing a dark integrity and then switch to light. I don’t see a blurred text on my installation. Can you be specific which text is blurred when you do this. I can see your site is still in dark mode. I have also inspected your site and text doesn’t have shadows or any other properties attached to it that might result to this issue. Can you please share a screenshot showing the issue so we can help you better? Thank you.

[Akhanom]

I have attached a screenshot for your reference.

[paul.r]

Hi @Akhanom

To fix it, you can add this in Theme Options > CSS

.widget {
    text-shadow: none;
}

.widget ul li a, .widget ol li a {
    color: #fff;
}

.entry-footer a {
     color:#fff;
}

For the Headings color, you can set it under Theme Options > Typography

Thanks