Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • June 8, 2014 at 5:14 pm #276247
    Sconcepts

    I am having a problem displaying a newsletter signup form on the page attached. I need the field to be wider and the signup button to be on the same line – how do i do this?

    Thanks

    • This topic was modified 10 years, 5 months ago by Sconcepts.
    June 8, 2014 at 6:01 pm #276254
    Sconcepts

    I would also like to add the site search field and button above the retaier images on the page http://www.savelolly.com/voucher-codes/ how do I do this and keep the ajax search function . The search field would need to be quite wide with search button next to it similar to search feild on http://www.vouchercodes.co.uk/

    • This reply was modified 10 years, 5 months ago by Sconcepts.
    June 9, 2014 at 2:10 am #276319
    Yigit

    Hi!

    1- Please add following code to Quick CSS in Enfold theme options under General Styling tab

    input#mc4wp_email { width: 30% !important; float: left; margin-right: 10px !important; }

    2- Please add a Code Block element above your images and add following code inside it

    <form action="http://www.savelolly.com/" id="searchform" method="get" class=""><div> <input type="submit" value="" id="searchsubmit" class="button avia-font-entypo-fontello"> <input type="text" id="s" name="s" value="" placeholder="Search"></div></form>

    Then you can turn on custom CSS field for ALB elements and add a custom class to your Code Block element, i.e. “custom-search-form” and add following code to Quick CSS in Enfold theme options under General Styling tab to adjust it 

    .custom-search-form input#s { padding: 20px 80px 20px 20px !important; }

    Best regards,
    Yigit

    June 9, 2014 at 9:22 am #276367
    Sconcepts

    Hi

    1) can signup button be move up a pixel or 2?

    2) The search box on both sections now does not work as it was working before (ajax lookup of pages etc)

    I am unsure how to do styling on http://www.savelolly.com/voucher-codes/ as this should be centred and bigger but not sure if i have added correctly?

    Thanks

    David

    June 9, 2014 at 9:43 am #276369
    Sconcepts

    also on 1) this is affecting the email signup on eg http://www.savelolly.com/voucher-codes/ and also looks very small when viewing on a mobile device

    June 9, 2014 at 10:34 am #276376
    Yigit

    Hey!

    Please add following code to Quick CSS as well
    1- 

    #mc4wp-form-1 input[type="submit"] {
margin-top: 0px;
height: 33px;
}

    2- I checked your website and it does work as the one on 404 page.
    3- 

    .avia_codeblock_section form#searchform > div {
margin-left: auto;
margin-right: auto;
}

    Best regards,
    Yigit

    June 9, 2014 at 10:43 am #276385
    Sconcepts

    Thanks
    2) Is it possible to have the search box size increased and also have same ajax lookup(auto complete) as the one in the menu bar?

    June 9, 2014 at 10:46 am #276388
    Sconcepts

    Also just noticed that the styling of the newsletter signup section on http://www.savelolly.com/ and http://www.savelolly.com/voucher-codes/ has been affected?

    June 9, 2014 at 11:45 am #276409
    Yigit

    Hi!

    Please add following code to Quick CSS 

    .page-id-3905 #mc4wp-form-1 input[type="submit"] { margin-top: 0px; height: 33px; }
.page-id-3905 input#mc4wp_email { width: 30% !important; float: left; margin-right: 10px !important; }

    and remove first codes i posted here – https://kriesi.at/support/topic/form-styling-2/#post-276376 and here – https://kriesi.at/support/topic/form-styling-2/#post-276319 It should only apply to your page with ID 3905.
    You can adjust the width with following code

    .avia_codeblock_section form#searchform>div { max-width: 450px!important; }

    To have ajax search is possible but unfortunately we cannot help you with that. Please hire a freelance developer if you really need it

    Best regards,
    Yigit

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