This topic has 12 replies, 2 voices, and was last updated 6 years by Laura.

  • Author
  • #176133
     kingsanit
    Participant

    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

    #176209
     Laura
    Moderator

    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 πŸ™‚

    #176225
     kingsanit
    Participant

    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

    #176300
     Laura
    Moderator

    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 πŸ™‚

    #176311
     kingsanit
    Participant

    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.
    #176390
     Laura
    Moderator

    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 πŸ™‚

    #176562
     kingsanit
    Participant

    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

    #176726
     kingsanit
    Participant

    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

    #176772
     Laura
    Moderator

    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 πŸ™‚

    #176946
     kingsanit
    Participant

    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.
    #176999
     Laura
    Moderator

    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 πŸ™‚

    #177215
     kingsanit
    Participant

    Thanks Laura.

    With regards
    Kingsanit

    #177453
     Laura
    Moderator

    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 πŸ™‚

Viewing 13 posts - 1 through 13 (of 13 total)

The forum ‘General questions’ is closed to new topics and replies.

Log in with your credentials

Forgot your details?