Upfront 1.0 not showing settings and other display issues

Greetings! After the big update for Upfront, I noticed that the different settings for each element (white tabs) don't display the icons as well as the settings aren't displaying in the left side bar when clicked on. You can see what I'm referring to in the screenshot.

I'm not sure if there are any other instances similar.

Hope ya'll can help! Looking forward to learning the changes of this new release

Much Love
Ciro Bey

  • Ciro Bey

    Greetings @adamczajczyk
    Clearing the cache worked for most. However It seems the Search Widget that is in the first screenshot won't load the settings (as if there aren't any?). I was attempting to edit the CSS for the search widget so that the "magnifying glass icon" is centered once more in the search field.

    I also noticed that the search/text field didn't expand the entire white space there. You have to click towards the right of the text field in order to start typing.

    Hope you can help with the search widget issues!

    Much Love
    Ciro Bey

  • Adam Czajczyk

    Hello Ciro Bey!

    Once you add a search widget in place, you will want to click on "Settings" icon for it (the gray "gear" icon over widget element) and in an Upfront panel on the left you'll be presented with warning about editing default preset.

    Instead of editing it, click on preset drop-down list and add a new preset, then scroll down and click on "Edit preset CSS" button. This is where you will want to add a custom CSS to make search form look as you wish.

    In case you'd need further assistance with this, please add the search widget (the way my colleague Predrag explained) and then point me to the page where you added it and I'll be glad to help you with this.

    Best regards,
    Adam

  • Ciro Bey

    Thank you @adamczajczyk
    The problem is, I don't have access to the previous CSS that made the search bar look like the screenshot above.

    I've added the new search widget by the process mentioned above. I would need some help stylizing it how the previous one was. It is visible on all pages in the Global menu region. tamanasprings.com/?editmode=true/ should work just fine. Support access is granted as well.

    Much Love
    Ciro Bey

  • Milan

    Hello Ciro,

    I hope you are well today. :slight_smile:

    First of all let me tell it was not completely possible to make search widget element exactly copy of your previous search element because the way search widget element renders its markup is such that it wont' allow us to move submit button inside input box. Furthermore its not possible to customize search widget element's markup with provided customization tools.

    So I used custom code element and created one search form on behalf of you which will provide you exactly copy of your previous search element. Plus I was not able to find your previous search element which most probably you've removed in process of replicating it with search widget element. So I used your attached screenshot as reference while creating custom search form. If you see that I've missed something please let me know I will give you further customization with it. :slight_smile:

    I hope you won't mind that I did those changes on behalf of you without asking permission.

    Let me know what are your views on those changes. :slight_smile:

    Cheers,
    Milan

  • Ciro Bey

    No worries Milan thank you for the CSS!

    1) I added some changes myself, but I'm not sure how I could change the font inside ("Search") to a slightly smaller size as well as the font style to "roboto". Could you help with that?

    2) I also was trying to figure out how to change the "magnifying glass" icon to match the color of the text (and for both to be slightly lighter in color).

    3) I also noticed that the main menu (right next to the search bar) had changed somewhat. Was that due to the changes with the search widget? If at all possible I'd like the main menu to be reverted to how it was as well. I noticed some of the spacing was off, the height of the hover effect, border radius gone, and possible the font and/or size was changed? Not sure how this happened, if it was due to the search widget or not. Hoping you can clarify with that!

    Much Love
    Ciro Bey

  • Milan

    Hello @ciroabey,

    I hope you are well today. :slight_smile:

    Now let me go bit by bit to answer you well. :slight_smile:

    1) I added some changes myself, but I'm not sure how I could change the font inside ("Search") to a slightly smaller size as well as the font style to "roboto". Could you help with that?

    I've customized css a bit more with below changes and have applied on your site. Please confirm and let me know if there is anything else you want to tweak further regarding search widget. :slight_smile:

    .search {
      position: relative;
    }
    
    .search input {
        width: 100%;
        background: #ffffff;
        border: 0px solid #aaa;
        border-radius: 300px;
        box-shadow: 0 0 01px #ccc, 0 10px 15px #ebebeb inset;
        Font: roboto 14px;
        font-style: italic
    }
    
    .search input { text-indent: 8px;}
    
    .search button[type="submit"]{
      position: absolute;
      top: 10px;
      left: 171px;
      background: transparent;
      /*Change this color property's value to make your search icon box look in color you want*/
      color:#CDC9C9;
    }
    
    .search input::-webkit-input-placeholder { font-size: 12px;  padding-top: 2px; font-family: roboto; }
    .search input::-moz-placeholder { font-size: 14px; font-family: roboto;} /* firefox 19+ */
    .search input:-ms-input-placeholder { font-size: 12px;  padding-top: 2px; font-family: roboto; } /* ie */
    .search input:-moz-placeholder { font-size: 12px;  padding-top: 2px; font-family: roboto; }

    2) I also was trying to figure out how to change the "magnifying glass" icon to match the color of the text (and for both to be slightly lighter in color).

    Right now I've changed that icon's color to lighter white and its looking good now. :wink: Please confirm it first and if you want to change it to something else please modify "color" properly value to your desire color of .search button[type="submit"] selector.

    3) I also noticed that the main menu (right next to the search bar) had changed somewhat. Was that due to the changes with the search widget? If at all possible I'd like the main menu to be reverted to how it was as well. I noticed some of the spacing was off, the height of the hover effect, border radius gone, and possible the font and/or size was changed? Not sure how this happened, if it was due to the search widget or not. Hoping you can clarify with that!

    I don't think my customization with search widget has bring these changes. This surprise change has made me somewhat confuse now. Furthermore I can see that you have already created one preset ( named as "test" in customization panel ) and did very good amount of work with it to make your menu the way you want to see. And it seems to me that you've already fixed many of the css issue you tagged in your this question. So if you still need any customization with menu too please let me know. :slight_smile:

    I hope this reply helps you regarding your issues. :slight_smile:

    Cheers,
    Milan

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.