Integration with Salient Theme Ascend – displaces text

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Integration with Salient Theme Ascend – displaces text

This topic contains 2 replies, has 2 voices, and was last updated by GraemePBell GraemePBell 6 years, 3 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #7976
    GraemePBell
    GraemePBell
    Participant

    Hi

    I’m having a nightmare trying to style the search box properly. the search is located on the Advanced Search page.

    When I click into the field – the elements shift upwards, and the styling is all over the place – I’ve added :

    input[type=text], textarea, input[type=email], input[type=password], input[type=tel] {
    transition: none!important;
    }

    to the css in the Salient Theme General Admin area CSS box, it improves slightly but doesn’t get round my issue – any help would be appreciated
    many thanks
    Graeme

    #7977
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi!

    Well, there are indeed some nasty rules overriding the search input style. This custom CSS seemed to help, when I put it together on the console panel:

    .proinput input.orig, .proinput input.autocomplete {
        padding: 0 !important;
        line-height: normal !important;
        color: white !important;
        border: 0 !important;
        font-size: 12px !important;
    }

    The cause of the problem is the following lines in the ascend.css file:

    
    .container-wrap input[type="text"], .container-wrap textarea, .container-wrap input[type="email"], .container-wrap input[type="password"], .container-wrap input[type="tel"], .container-wrap input[type="url"], .container-wrap input[type="search"], .container-wrap input[type="date"] {
    	background-color: transparent!important;
    	border: 1px solid #ccc!important;
    	box-shadow: none!important;
    	-webkit-box-shadow: none!important;
    	font-size: 16px!important;
    	-o-box-shadow: none!important;
    	padding: 16px!important;
    }
    

    This basically forces padding, mfont size, background and a border to the input field. No wonder the search style was overwritten, as these are forced with the !important modifier, which should be avoided, but I guess the developer had a good reason to use it this case.

    Anyways, I’m hoping it helps 🙂

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #7978
    GraemePBell
    GraemePBell
    Participant

    Thanks for the awesome support and quick reply!! I love this plugin and really want to use it

    this will be the same for anyone using Salient theme with the Ascend profile settings, so it may be good for the knowledgebase

    Going to update now and will let you know

    thanks again
    Graeme

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.