On this page you will see sixteen little icons which also have buttons with labels. The labels are white and the buttons are white. So, the buttons appear not there. I want to change the color of the buttons. I also want to remove a non breaking space which appears to be between the two word labels because when the browser width is reduced the text is too wide for the allotted space. So, word wrapping would be great.

    scarney
    I noticed in the developer tools if I remove the fff value for background color then I get a blue background color that appears to be coming from the template. I would be happy to just do that. Otherwise, I guess I could call out a color. Here is the code that I am seeing in developer tools:

    #es .es-create-category-select .btn {
    width: 100%;
    text-align: center;
    padding: 15px;
    line-height: 24px;
    font-size: 18px;
    text-shadow: none;
    min-height: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: #fff;
    border: 1px solid #e1e1e1;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    }

      Hi Sean,

      Do I need to be able to login to see the page?

      Hi Paul,
      You are probably right. Yep, you are correct. You will have to login but you should be able to login with the site admin information. If that does not work for you I will figure out a way. :-)

      Paul, I tried changing some code but it did not work. I wonder if you might know what does work.

      You can login at the following page: https://www.drcarney.com/login

      Then you will see the buttons with the white backgrounds here: https://www.drcarney.com/club/groups/create-group
      This is the CSS code I tried to use:

      /* Change ES Group Buttons background color */
#es .es-create-category-select .btn { 
background-color: #25244E; 
white-space: normal;
}

      It did not work for me. I had turned off the server caching and the browser caching and cleared my personal browser cache as well.

      Sean

      paulus1031 I see that now as well. That is sort of what I was aiming for. Is there a command you know that will work to make the category titles text wrap?

      I had tried to use white-space: normal;

      But, that does not seem to work. I had hoped that the two word categories would have the text wrap so both words will be completely visible.

      I am thinking that the grid that is displayed is created by EasySocial and not the template. So, I will ask them if I can get less columns. That might also help. :-)

          scarney That is sort of what I was aiming for. Is there a command you know that will work to make the category titles text wrap?

          You can try add this css :

          #es .es-create-category-select .es-title{text-overflow: initial !important;white-space: normal !important;overflow-wrap: break-word !important;}

            6 days later

            Thanks for all the help.

            This ticket can be closed.

            Sean

            Write a Reply...
            You need to Login to view replies.