-
Author
-
October 9, 2017 at 18:40 #176133kingsanitParticipant
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
October 10, 2017 at 11:47 #176209LauraModeratorHello, 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 solutionLaura 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 π
October 10, 2017 at 17:18 #176225kingsanitParticipantHi 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
KingsanitOctober 11, 2017 at 02:54 #176300LauraModeratorHello, 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 solutionLaura 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 π
October 11, 2017 at 10:07 #176311kingsanitParticipantThanks 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
KingsanitAttachments:
You must be logged in to view attached files.October 11, 2017 at 23:49 #176390LauraModeratorHello,
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 solutionLaura 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 π
October 13, 2017 at 18:13 #176562kingsanitParticipantThanks 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
KingsanitOctober 15, 2017 at 16:53 #176726kingsanitParticipantHi 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
KingsanitOctober 16, 2017 at 02:16 #176772LauraModeratorHello, 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 solutionLaura 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 π
October 17, 2017 at 10:48 #176946kingsanitParticipantThanks 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
KingsanitAttachments:
You must be logged in to view attached files.October 18, 2017 at 01:31 #176999LauraModeratorHello π
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 solutionLaura 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 π
October 23, 2017 at 06:23 #177453LauraModeratorA pleasure π
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionLaura 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 π
-
AuthorPosts
The forum ‘General questions’ is closed to new topics and replies.