Essential Grid background color and styling

whitelobster11 · January 22, 2019, 10:21pm

Hello

I am trying to implement an instance of Essential Grid on the following page

https://www.motherculture.love/welcome-test/

a couple questions

How can I change the background color of the info tab at the bottom of each post skin? I would like them to have red backgrounds
How do I change the font and font color on all of the text for each item represented in Essential Grid? I would like to make them White and remove the underline on rollover and replace it with a color change to blue on hover/rollover
How do I change the font and font color for additional text within the essential grid plugin (sort by name, filter, etc)
How do I make Essential Grid show pagination using bullets instead of numbers

Thank you so much! login info attached below in a secure note

paul.r · January 23, 2019, 9:05am

Hi,

For #1 & #2 You can edit it in Edit Skin > Title > Skin

https://www.themepunch.com/essgrid-doc/item-skin-editor/

For #3 Please refer to the link below

https://www.themepunch.com/essgrid-doc/navigation-styles-position/#styles

For #4 Sorry this is not possible. These are the only available options

https://www.themepunch.com/essgrid-doc/columns-rows-pagination/#pagination

Thanks

whitelobster11 · January 28, 2019, 5:42pm

Thank you so much for this

please see https://www.motherculture.love/welcome-test/

regarding #1- your description only allows you to change the background color for the text itself leaving a white border-- how do I make it so the entire white section of the skin is a color?

right now something very strange is happening- everytime my cursor hovers over a post in the essential grid on the page https://www.motherculture.love/welcome-test/ the post icon jitters and shows an unstyled version of the text beneath it- how can I fix this? What is causing this strange flickering on rollover/hover? Attaching screengrab of this below

How do I make the text in a very long title word automatically get chopped up with dashes so that it goes to the next line instead of running off the post grid? Please the first post in the grid where the title is very long

Regarding question #4 How do I make Essential Grid show pagination using bullets instead of numbers

I feel like there must be a way to achieve this as this is such a common goal. Do you know if there is a dedicated support for Essential Grid that I can contact directly and ask? I have been looking all over to find a way to contact them and can’t seem to find anything

attaching login info below in a secure note

Thank you so much!

rad · January 28, 2019, 5:39pm

Hi Jared,

You will need to buy a license directly from them to get a direct support and direct updates.

Please add this CSS to Theme Options > CSS to change the pagination to bulleted one.


.esg-pagination-button {
     width: 10px;
     text-indent: -90px;
     overflow: hidden;
     border-radius: 20px;
     background: #fff !important;
}
.esg-pagination-button.selected {
     background: #000 !important;
}

Thanks!

whitelobster11 · January 28, 2019, 5:44pm

Thank you so much for this

Sorry I was editing my post when you replied- pasting my new questions again below

please see https://www.motherculture.love/welcome-test/

regarding #1- your description only allows you to change the background color for the text itself leaving a white border-- how do I make it so the entire white section of the skin is a color?

right now something very strange is happening- everytime my cursor hovers over a post in the essential grid on the page https://www.motherculture.love/welcome-test/ the post icon jitters and shows an unstyled version of the text beneath it- how can I fix this? What is causing this strange flickering on rollover/hover? Attaching screengrab of this below

How do I make the text in a very long title word automatically get chopped up with dashes so that it goes to the next line instead of running off the post grid? Please the first post in the grid where the title is very long

attaching login info below in a secure note

Thank you so much!

rad · January 28, 2019, 7:27pm

Hi Jared,

What you need to change is the content background color and not the title background color.

As for the flickering effect, it’s because you have idle and hover styling that changes the font size. (the author name layer).

Change in size creates content shifting and it’s true regardless of element, even on header menu. Hover styling is best and recommended for hover colors, borders, underlines. Any styling that changes dimension would cause this issue.

How do I make the text in a very long title word automatically get chopped up with dashes so that it goes to the next line instead of running off the post grid? Please the first post in the grid where the title is very long

You mean don’t display the title at all, or just display few or single words? Because the grid items are two narrow for that. And it will affect title readability.

Thanks!

whitelobster11 · January 31, 2019, 12:40am

Hi Rad

Thank you so much for this

with the last question- I am wondering about how to make it so that a long post title get’s broken up with dashes if the individual words are too long such as with the first post title which contains the very long word ‘OOUOLYAMTELBELLEMBEM’

How can I make it so that titles like this are automatically broken up with dashes instead of how it is right now where they run outside of the boundary of their container within the grid?

Also~ with your earlier code for switching pagination to bullets- how can I change the active bullet color to be red instead of black? Is it possible to change the pagination bullets to be perfect circles instead of ovals? Right now it is doing this weird thing where it only displays some bullets with ‘…’ in between the bullets- how can I make it show all of the bullets that are available? right now it is very confusing which page of the pagination you are actually on

Also right now I have the pagination arrows set to be in the middle of the essential grid height but instead they are showing up below the grid stacked ontop of each other- how can I make them properly display at mid-height within the grid on the left and right sides?

How do I change the color of the pagination arrows in hover and idle states?

https://www.motherculture.love/welcome-test/

login info attached below

ruenel · January 31, 2019, 4:07am

Hello Jared,

Thanks for updating in!

1.) Your long post titles were already broken down with a dash in it.

2.) To change the color of the bullet into red, please have the css code updated and use this:

.esg-pagination-button {
     width: 10px;
     text-indent: -90px;
     overflow: hidden;
     border-radius: 20px;
     background: #fff !important;
}
.esg-pagination-button.selected {
     background: red!important;
}

Hope this helps.

whitelobster11 · February 1, 2019, 6:46pm

Hi Rad!

Thank you so much for this

I think you got confused between instances of The Grid and instances of Essential Grid, the posts you screen grabbed were from The Grid- if you visit https://www.motherculture.love/welcome-test/ you will see the instance of Essential Grid where the words are not being broken up with dashes-how do I fix this? Login attached below thanks!

Also right now with the pagination it is doing this weird thing where it only displays some bullets with ‘…’ in between the bullets- how can I make it show all of the bullets that are visible? right now it is very confusing which page of the pagination you are actually on

Also right now I have the pagination arrows set to be in the middle of the essential grid height but instead they are showing up below the grid stacked ontop of each other- how can I make them properly display at mid-height within the grid on the left and right sides?

ruenel · February 1, 2019, 9:59pm

Hello Jared,

Sorry for the confusion.

1.) To resolve it, please make use of this custom css:

.esg-grid a {
    word-break: break-word;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

2.) All the bullets will not show because that is how it is designed by its creators. You may hide the ... instead by using this css code:

.esg-navigationbutton:nth-last-child(2){
    display: none !important;
}

3.) You can resolve by updating the custom css of the skin:

/********************************
-	TEXT LIGHT BUTTONS -
*********************************/

.text-light .navigationbuttons,
.text-light .esg-pagination,
.text-light .esg-filters {
	text-align: center;
	z-index:2;
}

Hope this helps.

whitelobster11 · February 2, 2019, 1:58am

Hello!

Thank you so much for this

regarding your response to the second question- this fixed it but only when you are looking at the first bullet, if you click to the last bullet it will show the ‘…’ again in between the bullets~ how can I fix this so that it never shows the ‘…’?

ruenel · February 2, 2019, 3:47am

Hi Jared,

Please update the code for #2 and use this instead:

.esg-navigationbutton:not(.esg-pagination-button){
    display: none !important;
}

This code should hide the ... button.

Please let us know how it goes.

whitelobster11 · February 2, 2019, 4:03am

Thank you for this

This works great except it also makes the pagination buttons for navigating right and left invisible- how can I hide the ‘…’ without making the pagination buttons invisible?

Login info attached to my previous post in this thread

ruenel · February 2, 2019, 4:19am

Hey Jared,

Sorry the code did not quite work. Please update it again with this:

.esg-pagination .esg-navigationbutton:not(.esg-pagination-button){
    display: none !important;
}

Please let us know if this works out for you.

system · February 12, 2019, 4:19am

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.