Kleo Post Grid Customization

[kingsanit]

Hi

I would like to customize the “Kleo Post (Grid View). Like I want to change the fonts, colours, box border, remove category display and remove “read more” from the bottom of the box.

 

Please let me know, how can I do it?

 

With regards

Kingsanit

[Laura]

Hello, can you share in detail each change so i can give you the css code? 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[kingsanit]

Hi Laura

Please find the requirements below:

Each post box should have a visible black border. The purple vertical line highlighting the post headline should be removed.

The “Read more” text at bottom of the box should be removed.

The post title and post message should be in different format.

Post title should be blue in colour and bigger size.

Post message should be in red colour bigger size.

The border line above “likes” symbol should be removed.

This is for Kleo post in “Grid View”.

With regards
Kingsanit

[Laura]

Hello, here it is, just add it to style.css of child theme and quick css of theme options

COPY CODE

.post-content.animated.animate-when-almost-visible.el-appear.start-animation {
    border: 1px solid black !important;
}
.post-title {
    border: none !important;
}
.post-footer span.muted.pull-right {
    display: none !important;
}
.post-content.animated.animate-when-almost-visible.el-appear.start-animation .post-title a {
    color: blue !important;
    font-size: 24px !important;
}
.post-content.animated.animate-when-almost-visible.el-appear.start-animation .entry-summary p {
    color: red !important;
    font-size: 20px !important;
}
.post-footer {
    border: none !important;
}

( Change the font size )

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[kingsanit]

Thanks Laura

I tried putting the CSS and it works good.

We need some fine tuning as following, I have attached the snapshot for your reference.

Need to change font style.

Need to make “post title” font bold.

The categories text are merely visible. need to make it darker and change colour

The “Like” symbol and text is merely visible, need to make it darker and change colour

The top post box footer box goes hidden under the below post box as shown in the snapshot. We need to adjust it.

With regards
Kingsanit

Attachments:

You must be logged in to view attached files.

[Laura]

Hello,
Here 🙂

COPY CODE

.post-content.animated.animate-when-almost-visible.el-appear.start-animation .post-title a {
    font-weight: bold !important;
}
.post-content.animated.animate-when-almost-visible.el-appear.start-animation .meta-category a {
    color: black !important;
    font-size: 14px !important;
}
.item-likes span {
    color: black !important;
    font-size: 14px !important;
}
.item-likes:before {
    font-size: 14px !important;
    color: black !important;
}

i dont see the hidden issue

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[kingsanit]

Thanks Laura. It works beautifully.

But as said, the upper box lower part of cut off. I am observing in IPhone and all browsers.

Please have look on my site LIVE.

With regards
Kingsanit

[kingsanit]

Hi Laura

The lower part of the upper part hides behind the upper part of the lower post and the reason was because of increasing the font sizes of the title and post messages. I reduced them and it’s Ok now.

Can you please help me on the following:

Changing the font styles of the title, excerpt etc.
Changing colour, font style and font size of Post Tags.

With regards
Kingsanit

[Laura]

Hello, i still do not see the cut part, and i need to see it to find a fix
About the styles and size you can use
font-size
and font-style
This is the category class
small.meta-category a {
ADD THE CHANGES HERE
}
Which can be:
color: ;
font-size: ;
font-family: ;
font-style: ;

More here https://www.w3schools.com/css/css_font.asp

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[kingsanit]

Thanks Laura

The issue of bottom portion cut comes only, if I put the text size more than 24 or more. Now I reduced, hence the issue is not coming and you are not seeing it.

———————————————–

Also, font-family works fine but if I use the following Google Web font, it doesn’t work. Does CSS not support Google Webfont?

font-family: New Rocker;

————————————————-

If I click on member page, it redirects to Home page and only, if I login I am able to get into Hub Members. How do I open member page to anyone without requiring login? Please let me know, the settings.

————————————————-

Also can you please review the following CSS code. If you see attached screenshot, it shows the member box in blue which I changed earlier but now I am trying to make it white but doesn’t work. Need to make each member box having white background with blue border.

div.mdetcenter {text-align:center;}
#buddypress #members-list li div.item-avatar {
width: 100x;
display: block;
height: 60px;
text-align: center !important;
margin: 0 auto !important;
float: none;
}
#members-list .item-meta {text-align: center;}
#buddypress ul.item-list li div.item-title {margin-left: 0;margin-right: 0;}
#buddypress #members-list .item-title {margin-left: 0;margin-right: 0;text-align: center;}
#buddypress #members-list .item-meta {margin-left: 0;margin-right: 0;text-align: center;}
ul#members-list li.kleo-masonry-item .member-inner-list{
background-color :white !important;
}
#buddypress #friend-list div.item, #buddypress #members-list div.item, #buddypress #member-list div.item {
color:white;
}
#buddypress #members-list .item-title a {
color : white !important;
font-weight: bold;
}

li.kleo-masonry-item {width: 100% !important;float: left;}

With regards
Kingsanit

Attachments:

You must be logged in to view attached files.

[Laura]

Hello 🙂
Also, font-family works fine but if I use the following Google Web font, it doesn’t work. Does CSS not support Google Webfont?

font-family: New Rocker;

————————————————-
Some fonts need to be installed at the website http://www.wpbeginner.com/wp-themes/how-to-add-custom-fonts-in-wordpress/
————————————————-

If I click on member page, it redirects to Home page and only, if I login I am able to get into Hub Members. How do I open member page to anyone without requiring login? Please let me know, the settings.

————————————————-
Any redirection plugin? Tried with some plugins deactivated?
————————————————-

For the members box, can you share access?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[kingsanit]

Thanks Laura.

With regards
Kingsanit

[Laura]

A pleasure 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Author]

Posts