Change color for buttons and remove no break space from link?

scarney

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

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;
}

paulus1031

Hi Sean,

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

scarney

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. :-)

scarney

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

Hi Sean,

This is what I see

scarney

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. :-)

aman204

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;}

scarney

Thanks for all the help.

This ticket can be closed.

Sean

paulus1031

Thanks Sean