Tagged: 

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • January 18, 2017 at 10:11 pm #735559
    chriscreative

    I’m building a site for a credit union, and they have a customer log-in widget, which when submitted takes the user to a secure third-party site to utilize the credit union’s online banking features. My client needs to position their log-in form in the top right of the page, above the navigation, and would like their logo to exist in the top left, opposite the log-in. Can you assist me with this request? I’m thinking we may need to create a custom widget section to allow this. I’ve included a link to the mockup image for reference in the private content area of this post. I also included log-in info to access the admin area of the site.

    Thanks so much for all the great support.

    -Chris

    January 20, 2017 at 3:59 pm #736548
    Yigit

    Hey chriscreative,

    Please refer to this post – http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/ and add a widget area to your header and place your content inside it :)

    Best regards,
    Yigit

    January 20, 2017 at 6:40 pm #736612
    chriscreative

    Thank you. I added the php code as described in the topic you pointed me to. This did allow me to add the content and header widget I needed, but does not reposition the slider and other page content to begin displaying below the new header content. The header now overlays the slider on all pages. Please see screenshot (link in private content area). Can this issue be fixed with CSS to push the page content down so it isn’t covered up by the new header widget? If so, can you please advise?

    Since we’re placing the client’s logo in the new header widget, I’ll also need to remove the standard logo so it no longer displays. Again, you can see this in the attached screenshot.

    Thanks so much.
    -Chris

    January 24, 2017 at 2:25 pm #737748
    Yigit

    Hi,

    I added following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (min-width: 768px) {
.container.av-logo-container { display: none !important; }}
.responsive .logo, .logo { display: none !important; }
.html_header_top.html_header_sticky.html_large.html_bottom_nav_header #main {
    padding-top: 317px;
}

    Please review your website now. Also, we would recommend you not to use a sticky header for better UX

    Best regards,
    Yigit

    • This reply was modified 7 years, 9 months ago by Yigit.
    January 27, 2017 at 6:27 pm #739515
    chriscreative

    Awesome, thank you so much.

    Do you think you’d be so kind as to also assist with some CSS so the log-in form I added to the new header widget sits on only one line? Right now, the user name sits above the password field, causing the header widget to be pretty big. I’d like this small form to be on a single line horizontally, so the space isn’t so tall vertically. The form code itself is unstyled (which you can see in Appearance>Widgets), but I’m guessing it’s taking on some default theme styling.

    Thanks again for the great support.
    -Chris

    January 27, 2017 at 10:22 pm #739608
    Yigit

    Hi,

    I added following code to Quick CSS

    #header .flex_column:nth-child(3) {
    margin-left: 0;
}
#header form input[type="password"] {
    width: 50%;
}
#header form p, #header form input {
    float: left;
    margin-right: 5px;
}

    Please review your website

    Best regards,
    Yigit

    January 30, 2017 at 7:06 pm #740357
    chriscreative

    Thank you so much for the assistance with this. I hate to be a pain, but do you think you could help me make the form fields visually match each other? Currently the password field is shaded and really long, while the user id field appears unstyled and sits higher than the password. Screenshot attached. I like the shading of the password field since it matches the site, but would like it to be less long, and then have the user id field match. I believe the form allows for 11 characters in the user field and 10 in the password, so I’d like the lengths of the empty fields to visually reflect those potential lengths.

    Thanks again for the continued support, as I know this form issue goes beyond the scope of what’s built into the theme.

    -Chris

    February 3, 2017 at 4:28 pm #742445
    chriscreative

    Hi, just checking if anyone had a chance to review my most recent post? Still trying to tighten up the CSS to address the styling issue in the log-in form within my custom header widget.

    Thank you kindly.
    -Chris

    February 3, 2017 at 7:12 pm #742533
    Andy

    Hi,

    use this code:

    #top .header_color input[type='password'] {
width: 22%;
}
input#Text1 {
width: 20%;
background-color: #f8f8f8;
height: 32px;
}

    Best regards,
    Andy

    February 3, 2017 at 7:47 pm #742542
    chriscreative

    Thanks Andy, it’s almost perfect. Only thing I’d still like to address is that the User ID field appears to have an outline while the password field does not. Any way to make the password field look the same, so it matches the styling of the User id field?

    Once this is finished I should be able to stop pestering you. :) Thank you so much.
    -Chris

    February 6, 2017 at 5:48 pm #743485
    Andy

    Hi,

    try this:

    input#Password1 {
border-width: 2px !important;
border-style: inset !important;
border-color: initial !important;
}

    and adjust if needed.

    Have in mind that we’re not here for any customizations, but only if the theme doesn’t work as it is supposed to. Here you can find a freelance developer who can help you with any custom code: http://kriesi.at/contact/customization

    Best regards,
    Andy

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