Blog Documentation Book a Demo
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Change button layout in Foundation in variables.neon

agdcagdc New
in Vanilla 3.x Help

Dear all,

I am playing with different themes now in Vanilla 2021.009. In particular, I am working with tweaking Foundation. I can change most of my forum's layout by playing with the variables in variables.neon. However, that is not true for buttons. Can someone help me with how to change the colors of buttons? I read this tutorial https://success.vanillaforums.com/kb/articles/181-customizing-button-styles, but it is not at all helpful since it doesn't tell where the JSON info goes.

This is the forum I am putting together https://miamiredhawks.fans/

I hope the buttons would be red with white labels. Also, the down arrow to the right of the "New Discussion" button is not visible.

Any help is greatly appreciated.

Have a great day!

Tagged:

Comments

  • KasparKaspar Moderator 


    a.Button.Primary.SignInPopup {
    background: indianred;
}
.Panel-main .ApplyButton {
    background: indianred;
    color: white;
}
    image.png 






    a.vanilla-1fa4sws-titleBar-guestButton {
    background: indianred;
    color: white;
}

    Due to the '1fa4sws' this likely will not stick

    image.png



    As I am not logged in your forum I cannot see the down arrow next to 'New Discussion' - so I am working off of the one here on OSS


    .ButtonGroup.Multi .Button.Handle .SpDropdownHandle:before, .ButtonGroup.Multi.Open .Button.Handle .SpDropdownHandle:before {
    visibility: visible;
}

    This is in case it is hidden, which have been experienced a couple of times

    if it is the color then use

    .ButtonGroup.Multi .Button.Handle .SpDropdownHandle:before, .ButtonGroup.Multi.Open .Button.Handle .SpDropdownHandle:before {
    color: white;
}


    You can apply the changes with https://open.vanillaforums.com/addon/cssedit-plugin


    If it does not affect the element correct then please feel free to PM a login to me (just create a standard user - please do not pm your own login credentials).

  • KasparKaspar Moderator 


    input#Form_SignUp {
    background: indianred;
}
    image.png 



    input#Form_SignIn {
    background: indianred;
}
    image.png


  • agdcagdc New

    Thank you so very much for your I have sent you a private message with login access.

  • KasparKaspar Moderator

    oh, ye, was a bit quick about it - forgot the hover colors


    a.Button.Primary.SignInPopup:hover {
    background-color: #a91214;
}



    .Button.ApplyButton:hover {
    background: lightcoral;
border-color: darkred;
}
/* this is the Register button in the sidepanel. If you do not wantthe border color changed, just remove "border-color: darkred;" */



    /* Sign In button in Signin popup */
#Form_SignIn:hover {
background-color: #a91214;
}


    image.png


    Noticed that the Register button was blue aswell


    input#Form_ApplyforMembership {
    background: indianred;
}
    image.png


    and hover for that

    input#Form_ApplyforMembership:hover {
    background: #a91214;
}


    New Discussion:

    .Button.Primary, .Button.Handle {
    background: indianred!important;
}

    hover for that

    .Button.Primary:hover, .Button.Handle:hover {
    background: indianred!important;
}
    image.png



    "Post Discussion" + "Edit"

    #Form_PostDiscussion, a.Button.WriteButton.Hidden {
    background: indianred;
}
    image.png 


    input#Form_PostDiscussion:hover, input#Form_SaveDraft:hover, a.Button.WriteButton.Hidden:hover, a.Button.Cancel:hover {
    background: darkred!important;
}

    *here hover is enabled for all at once for show - they will ofc only change when actually hovered and not all at once

    image.png


    In discussion: "Post Comment"

    input#Form_PostComment {
    background: indianred;
}

    hover for that

    input#Form_PostComment:hover {
    background: darkred;
}


    On a members profile page: "Add Comment" on wall

    input#Form_AddComment {
    background: indianred;
}

    hover for that

    input#Form_AddComment:hover {
    background: darkred;
}


    Writting on own wall : "Share"

    input#Form_Share {
    background: indianred;
}


    hover for that

    input#Form_Share:hover {
    background: darkred;
}


    Member profile page : "Edit" profile

    a.NavButton.Handle.ProfileButtons.Button-EditProfile {
    background: indianred;
}

    hover for that

    a.NavButton.Handle.ProfileButtons.Button-EditProfile:hover {
    background: darkred;
}


    on edit profile page : "Save"


    input#Form_Save {
    background: indianred;
}

    hover for that

    input#Form_Save:hover {
    background: darkred;
}


    Profile Notification Preferences : "Save Preferences"

    input#Form_SavePreferences {
    background: indianred;
}


    image.png



    New Discussion Ask question: "Ask Question"

    input#Form_AskQuestion {
    background: indianred;
}

    hover for that

    input#Form_AskQuestion:hover {
    background: darkred;
}
    image.png


    Discussion Title hover color

    a.Title:hover {
    color: indianred!important;
}
    image.png



    regarding the down arrow, it looks like it is actually not loaded - hence no element to style


    you can try this instead

    .Sprite.SpDropdownHandle:before {
    content: "\25be";
}
    image.png




    hmm, it seems you "Mebox" / "MeMenu" is 'disabled' - leaving your users with no way of logging out, finding their profile, finding their messages box or notifications.

    I looked for it, if it was hidden by CSS, cannot find it.

  • KasparKaspar Moderator

    "Search" in search menu


    button#searchBar-0-searchButton {
    background: indianred;
}


    Hover

    button#searchBar-0-searchButton:hover {
    background: darkred;
}


    image.png


    "Filter" in searchmenu


    button.vanilla-1t4wrxx-button-standard {
    background: indianred;
    color: white;
}


    Hover

    button.vanilla-1t4wrxx-button-standard:hover {
    background: darkred!important;
}


  • agdcagdc New

    Thank you so very much for your help. I cannot emphasize enough how much I appreciate it. The world is a better place because of folks like you.

    Regarding "Mebox" / "MeMenu", I am able to see them as an admin. After spending some time on this, I realized that these boxes only show up to other users when I edit the permissions for "members' and I check the box for "Users" -> "Delete." But oddly enough, all the discussions are no longer visible to other users, but the "ME"-buttons are. I am guessing this can be a bug/issue with Foundation since it happens to the original foundation theme as well.

  • agdcagdc New

    @Kaspar I have changed your user to Administrator in case you want to take a look at the buttons. Another interesting thing with foundation is that is does not show "Mark all as viewed" or "Activity," but the other default themes do. Thank you again

  • KasparKaspar Moderator
    edited October 2021

    Regarding No discussions found take a alook here https://open.vanillaforums.com/discussion/comment/263733/#Comment_263733


    Discussions did show while I looked for selecters for the button colors (from a quick glance it looks like you got all the buttons)

    I made new test user and a test role. I will take second look when you have tried the above solution.

  • agdcagdc New
    edited October 2021

    It worked! Man, you guys are the best! Thank you so much!

    The only tiny issue now is with the "All Viewed" option not being available. But we can live with that. Thank you again!

Sign In or Register to comment.