Bad display Group Blog App with Echo
By Philippe on Tuesday, 15 August 2017
Posted in General
Likes 0
Views 1K
Votes 0
Hello,

With the Echo template, the Group Blog App is not displayed correctly.
The elements are disorganized and the design is very basic.

While User Blog App is displayed correctly and enjoys beautiful icons.
This is the model to copy.

I have not yet bought Page Blog App, but it may also be the case.

See screenshots as attachments.
Thanks to you
Philippe
Hi Philippe,

I made some mistake on the styling provided to you, my bad, sorry about that. I have already applied the following CSS block codes below into Echo template custom.css file and at the same time fixed the pages and events blog app as well. Can you please check again? Thanks.



.com_easysocial #es.es-main.view-pages .app-blog .app-contents-data .btn, 

.com_easysocial #es.es-main.view-groups .app-blog .app-contents-data .btn, 

.com_easysocial #es.es-main.view-events .app-blog .app-contents-data .btn {

    padding: 6px 0;

}

.com_easysocial #es.es-main.view-pages .app-blog .es-card__bd .g-list-inline, 

.com_easysocial #es.es-main.view-groups .app-blog .es-card__bd .g-list-inline, 

.com_easysocial #es.es-main.view-events .app-blog .es-card__bd .g-list-inline {

    padding-right: 30px;

}

.com_easysocial #es.es-main.view-pages .app-blog .es-card__bd .g-list-inline--delimited > li:first-child .fa, 

.com_easysocial #es.es-main.view-groups .app-blog .es-card__bd .g-list-inline--delimited > li:first-child .fa, 

.com_easysocial #es.es-main.view-events .app-blog .es-card__bd .g-list-inline--delimited > li:first-child .fa {

    display: inline-block;

}

.com_easysocial #es.es-main.view-pages .app-blog .es-card__bd .g-list-inline--delimited > li + li, 

.com_easysocial #es.es-main.view-groups .app-blog .es-card__bd .g-list-inline--delimited > li + li, 

.com_easysocial #es.es-main.view-events .app-blog .es-card__bd .g-list-inline--delimited > li + li {

    margin-left: 4px;

}

.com_easysocial #es.es-main.view-pages .app-blog .es-card__bd .g-list-inline--delimited > li + li:before, 

.com_easysocial #es.es-main.view-groups .app-blog .es-card__bd .g-list-inline--delimited > li + li:before, 

.com_easysocial #es.es-main.view-events .app-blog .es-card__bd .g-list-inline--delimited > li + li:before {

    content: "\00b7";

    color: #888;

    vertical-align: middle;

    padding: 0 6px;

}

.com_easysocial #es.es-main.view-pages .app-blog .es-card__bd .g-list-inline--delimited > li + li .fa, 

.com_easysocial #es.es-main.view-groups .app-blog .es-card__bd .g-list-inline--delimited > li + li .fa, 

.com_easysocial #es.es-main.view-events .app-blog .es-card__bd .g-list-inline--delimited > li + li .fa {

    display: inline-block;

}

.com_easysocial #es.es-main.view-pages .app-blog .es-card__bd .g-list-inline--delimited > li a, 

.com_easysocial #es.es-main.view-groups .app-blog .es-card__bd .g-list-inline--delimited > li a, 

.com_easysocial #es.es-main.view-events .app-blog .es-card__bd .g-list-inline--delimited > li a {

    display: inline-block;

    margin-left: 0px !important;

    padding-left: 4px;

}

.com_easysocial #es.es-main.view-pages .es-card__hd .btn-es-default-o.dropdown-toggle_, 

.com_easysocial #es.es-main.view-groups .es-card__hd .btn-es-default-o.dropdown-toggle_, 

.com_easysocial #es.es-main.view-events .es-card__hd .btn-es-default-o.dropdown-toggle_ {

    background-color: transparent !important;

    background-image: none !important;

    color: #888 !important;

    border-color: transparent !important;

}

.com_easysocial #es.es-main.view-pages .es-card__hd .btn-es-default-o.dropdown-toggle_:hover, 

.com_easysocial #es.es-main.view-groups .es-card__hd .btn-es-default-o.dropdown-toggle_:hover, 

.com_easysocial #es.es-main.view-events .es-card__hd .btn-es-default-o.dropdown-toggle_:hover, 

.com_easysocial #es.es-main.view-pages .es-card__hd .btn-es-default-o.dropdown-toggle_:focus, 

.com_easysocial #es.es-main.view-groups .es-card__hd .btn-es-default-o.dropdown-toggle_:focus, 

.com_easysocial #es.es-main.view-events .es-card__hd .btn-es-default-o.dropdown-toggle_:focus, 

.com_easysocial #es.es-main.view-pages .es-card__hd .btn-es-default-o.dropdown-toggle_:active, 

.com_easysocial #es.es-main.view-groups .es-card__hd .btn-es-default-o.dropdown-toggle_:active, 

.com_easysocial #es.es-main.view-events .es-card__hd .btn-es-default-o.dropdown-toggle_:active, 

.com_easysocial #es.es-main.view-pages .es-card__hd .btn-es-default-o.dropdown-toggle_.active, 

.com_easysocial #es.es-main.view-groups .es-card__hd .btn-es-default-o.dropdown-toggle_.active, 

.com_easysocial #es.es-main.view-events .es-card__hd .btn-es-default-o.dropdown-toggle_.active {

    background-color: transparent !important;

    background-image: none !important;

    border-color: transparent !important;

}
Eugene Chew
·
Thursday, 17 August 2017 10:33
·
0 Likes
·
0 Votes
·
0 Comments
·
Good catch and I have assigned this into our issue tracker for Echo
Mark
·
Tuesday, 15 August 2017 23:45
·
0 Likes
·
0 Votes
·
0 Comments
·
Thank you
Philippe
·
Wednesday, 16 August 2017 01:43
·
0 Likes
·
0 Votes
·
0 Comments
·
No problem sir
Mark
·
Wednesday, 16 August 2017 02:11
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Philippe,

Can you please insert this code below into your custom.css? Let me know if the the styling is working. A fix will be reflected in echo's next release.



.com_easysocial #es.es-main.view-groups .app-blog .app-contents-data .btn {

    padding: 6px 0;

}

.com_easysocial #es.es-main.view-groups .app-blog .es-card__bd  .g-list-inline {

    padding-right: 30px;

}

.com_easysocial #es.es-main.view-groups .app-blog .es-card__bd  .g-list-inline--delimited > li:first-child fa {

    display: inline-block;

}

.com_easysocial #es.es-main.view-groups .app-blog .es-card__bd  .g-list-inline--delimited > li + li {

    margin-left: 4px;

}

.com_easysocial #es.es-main.view-groups .app-blog .es-card__bd  .g-list-inline--delimited > li + li:before {

    content: "\00b7";

    color: #888;

    vertical-align: middle;

    padding: 0 6px;

}

.com_easysocial #es.es-main.view-groups .app-blog .es-card__bd  .g-list-inline--delimited > li + li fa {

    margin-left: 4px;

}

.com_easysocial #es.es-main.view-groups .app-blog .es-card__bd  .g-list-inline--delimited > li a {

    padding-left: 4px;

}


Thank you.
Eugene Chew
·
Wednesday, 16 August 2017 16:45
·
0 Likes
·
0 Votes
·
0 Comments
·
Thanks Eugene, but it must be the old css because there is no change

I have cleared my cache.
My custom css works, I use it for other customizations.

Philippe
Philippe
·
Wednesday, 16 August 2017 20:47
·
0 Likes
·
0 Votes
·
0 Comments
·
It would be best if you can provide us with your Joomla backend and FTP access so our designer can better have a check whether that is conflict with your current template styling or other styling css stylesheet.

Because it seems work fine for me with my designer fix, you can check my attached screenshot below.
Arlex Wong
·
Wednesday, 16 August 2017 23:05
·
0 Likes
·
0 Votes
·
0 Comments
·
Okay Arlex. I just added the Joomla and FTP access codes.

Thank you
Philippe
·
Wednesday, 16 August 2017 23:38
·
0 Likes
·
0 Votes
·
0 Comments
·
Thanks Philippe, I already applied this following CSS block code into Echo template custom.css file, it should render correctly now, can you give it a check? 



.com_easysocial #es.es-main.view-groups .app-blog .es-card__bd .g-list-inline--delimited>li a {

    margin-left: 0px !important;

}


Make sure you have clear your browser cache as well.
Arlex Wong
·
Wednesday, 16 August 2017 23:47
·
0 Likes
·
0 Votes
·
0 Comments
·
Thank you. It's better.
But why I do not have icons like you and with User Blog App ?
Philippe
·
Wednesday, 16 August 2017 23:53
·
0 Likes
·
0 Votes
·
0 Comments
·
Ah Super ! It's perfect.
Thank you very much Eugene.

Philippe
Philippe
·
Thursday, 17 August 2017 16:30
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi there,

You are most welcome. Glad to hear that your issue has been resolved now.

As a gentle reminder, kindly start a new thread if you have any other issue in the future so it will be easier for us to manage your inquiry. I will lock and mark this thread as resolved.
Arlex Wong
·
Thursday, 17 August 2017 16:46
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post