Inadequate article presentation

Hello,

Please have a look on 2 screenshots below. You can also see the article on line here : http://fapisere.fr/_fapi_2012/la-federation/organisation-federation/670-les-adherents

There are 4 problems to solve :

1. How to delete unwanted points located next to the editor icon, next icon and previous icon ?

2. How to place the pdf icon against the file name?

3. How to align the text below pdf icon (aligned on the righ of pdf icon) on the left of the line ?

4. Into front end editor, how to place the editor window at the right place ?

inadequate_article_resentation.png

front_end-editor.png

Hi,

For the first issue, in override.css, replace this code:

Code: Select all

#gkComponent ul li {
    list-style: disc inside none !important;
    padding-left: 25px;
}


By:

Code: Select all

.articleContent ul li{
    list-style: disc inside none !important;
    padding-left: 25px;
}


With the second issue, edit the article and change the style for the p tag to be like this

Code: Select all

<p style="text-align: center; width: 20%;">


Add this code for the 3rd one:

Code: Select all

.wf_file_icon{
float:none;
}
.wf_file_text{
float:left;
}



For first issue - unwanted points located next to the editor icon, next icon and previous icon :
that's OK, Thanks

Regards

For second issue - how to place the pdf icon against the file name :

this solution is unsatisfactory because a large number of items (not all!) are concerned and it is not possible to systematically modify the code generated by the HTML editor.

See below the screenshot of the back end editor window

article_editor_window.png

Regards

For third issue - how to align the text below pdf icon :

this solution is unsatisfactory, see http://fapisere.fr/_fapi_2012/la-federation/organisation-federation/670-les-adherents

That I wish : see below the screenshot of the back end editor window

article_editor_window.png

Regards

For the forth issue - into front end editor, how to place the editor window at the right place :

issue is shown on screenshot below
This question is with JCE editor, not with tinyMCE editor

front_end-editor.png

Regards

3rd issue
I supplement my answer with another link on the same article :
http://fapisere.fr/_fapi_2012/la-federation/organisation-federation/670-les-adherents (single article)
http://fapisere.fr/_fapi_2012/la-federation/organisation-federation (blog articles)

The two presentations of the same article are not alike and do not resemble the format in the html editor

Regars

Hi mate,

For further check and help, can you please provide backend access of the site?

Thanks,

Hello,
See PM
Regards

@Don Lee, you might find following useful regarding editor line up issue in front end editing.

Code: Select all

/* Fix for the editor */
    .item-page.edit .formelm { clear: both; float: left; margin-right: 5px}
    .item-page.edit .formelm .button2-left { margin-top: 6px;}
    .item-page.edit .formelm-area label { display: block; width: 100%;}
    .item-page.edit .formelm-buttons { margin-top: 5px;}
    .item-page.edit .fltlft {float: left; }
    .item-page.edit legend { font-size: 140%; font-style: italic;}
    .item-page.edit .toggle-editor { margin-top: -5px;}

    /* Buttons */
    #editor-xtd-buttons { padding: 5px;}
    .button2-left,
    .button2-right,
    .button2-left div,
    .button2-right div { float: left;}

    .button2-left a,
    .button2-right a,
    .button2-left span,
    .button2-right span { display: block; height: 22px; float: left; line-height: 22px; font-size: 11px; color: #666; cursor: pointer;}
    .button2-left span,
    .button2-right span { cursor: default; color: #999;}
    .button2-left .page a,
    .button2-right .page a,
    .button2-left .page span,
    .button2-right .page span { padding: 0 6px; }
    .button2-left a:hover,
    .button2-right a:hover { text-decoration: none; color: #0B55C4;}

    .button2-left a,
    .button2-left span { padding: 0 24px 0 6px;}

    .button2-right a,
    .button2-right span { padding: 0 6px 0 24px;}
    .button2-left { background: url(../images/joomla/j_button2_left.png) no-repeat; float: left; margin-left: 5px; }
    .button2-right { background: url(../images/joomla/j_button2_right.png) 100% 0 no-repeat; float: left; margin-left: 5px; }
    .button2-left .image { background: url(../images/joomla/j_button2_image.png) 100% 0 no-repeat; }
    .button2-left .readmore,
    .button2-left .article { background: url(../images/joomla/j_button2_readmore.png) 100% 0 no-repeat;}
    .button2-left .pagebreak { background: url(../images/joomla/j_button2_pagebreak.png) 100% 0 no-repeat; }
    .button2-left .blank { background: url(../images/joomla/j_button2_blank.png) 100% 0 no-repeat; }
    /* Calendar */
    a img.calendar { width: 16px; height: 16px; margin-left: 3px; background: url(../images/joomla/calendar.png) no-repeat; cursor: pointer; vertical-align: middle;}

    span#jform_articletext_parent {width: 100%; display: block; clear: both; float: none }


See you around...

Hello,

I pasted the code given by normalUK in the override css file, but no improvement: the front end editor window is always shifted to the right.

I still have three problems (2d, 3rd and 4th) to be solved before starting the operating site...

@Norman: thank you mate for your suggestion

@casdyn: That code is just for me to consult I have got your PM and tried to login but the credentials don't work, can you please correct? Thanks.

Cheers,

@Don Lee

You were into editor group (frontend access). You are now administrator (backend access).

Please note also :
- the login is with "g", not "G",
- password (cf PM) is OK (I tried),
- I removed the normanUK code from override.css file.

Regards

I have just added some style set for the last code of your article's content to be:

Code: Select all

<p style="text-align: center; width: 140px; margin: 0 auto;"><a class="wf_file" href="images/2012/telechargements/federation_organisation/bulletinadhesion2012-3.pdf"><img style="border: 0px none; vertical-align: middle;" class="wf_file_icon" src="media/jce/icons/pdf.png" alt="pdf" /><span class="wf_file_text">bulletin d'adhésion</span></a></p>
<p style="clear: both;">Pour s'inscrire, remplir et envoyer&nbsp; au siège de la FAPI lebulletin d'adhésion accompagné du chèque correspondant au type d'adhésion.</p>


and I think it's fine now.

Add this code to fix the problem with frontend editor:

Code: Select all

#jform_articletext_tbl{
position: absolute!important;
}


Cheers,

Add this code to fix the problem with frontend editor: .....

That's OK, thanks

I have just added some style set for the last code of your article's content to be: ........... and I think it's fine now.

That's OK for this article, but this solution is not satisfactory. Indeed, all articles on the site are concerned and it is not possible to modify the html code of each article.

To better understand the problem, see an article here http://fapisere.fr/_fapi_2012/actualite ... moine-2012 and the same article here (the 1st article) http://fapisere.fr/_fapi_2012/actualites-du-patrimoine (blog page).
It is not acceptable to obtain two different presentations for the same article. The blog presentation is correct, the presentation of the individual article is not satisfactory.

The formatting of the text should be completely controlled with the JCE HTML EDITOR : how to get that?

Regards

Hi,

I'm checking and seeing the same layout in the both links, can you please clarify?

Thanks,

Hello,

Firts link (single article) :

first_link.PNG

Second link (blog article) :

second_link.PNG

Same screenshots with red comments

first_link.PNG

second_link.PNG

I don't see the same:

- Article layout: http://easycaptures.com/fs/uploaded/627/6656158535.png

- Blog layout: http://easycaptures.com/fs/uploaded/627/0978175638.png

Thanks,

That's very strange.

Your Article layout screenshot: http://easycaptures.com/fs/uploaded/627/6656158535.png is the same as mine.

Your Blog layout screnshot: http://easycaptures.com/fs/uploaded/627/0978175638.png is different from mine on 3 points:
- file icon position
- article title format
- site header image size

I tested with different browsers (Firefox, Internet Explorer, Safari, and Google Chrome) and in all cases the screenshots are the same as those I sent you.

That's very amazing : what possible explanation ?

My page screenshots :
- article layout : http://easycaptures.com/0212981647
- blog layout : http://easycaptures.com/0536944319

Oh it's really really weird, I see the problem now, there might be some problem with the browser, and this issue may be caused by browsers as well. I have been trying to do some tricks but still out of idea, please give me some more time for this, if I can't, I will ask some developer to check with.

Thanks,

Can you please try this:

- Open file: /templates/gk_twn2/css/joomla.css

- Remove:

Code: Select all

.articleContent img,.feed-item-description img {
   float: left;
   margin: 0 10px 10px 0;
   display: block;
   padding: 0;
   background: #fff;
}


- Open file: /templates/gk_twn2/css/override.css

- Remove:

Code: Select all

.articleContent img {
    background: none repeat scroll 0 0 #FFFFFF;
    display: block !important;
    float: left !important;
    margin: 0;
    padding: 0 !important;
}


That seems to fix the problem http://easycaptures.com/fs/uploaded/627/6411355893.png

Thanks,

Hello,

File icon problem seems to be resolved, thank you very much.

I return to the problem of content list dots discussed earlier in this topic : this problem is not completely resolve.
See screenshot :

dots.png

The code in override.css file is :
#gkComponent ol li {
list-style: decimal inside none!important;
padding-left:20px;
}
#gkComponent ul li{
list-style: disc inside none !important;
padding-left: 25px;
}
#gkComponent ul li, #gkComponent ol li{
line-height: 20px!important;
}

When I replace
#gkComponent ul li{
list-style: disc inside none !important;
padding-left: 25px;
}
by
.articleContent ul li{
list-style: disc inside none !important;
padding-left: 25px;
}*
dots near previous and next links disappear - that's OK - but content list dots in the the article disappear also - that's not OK. How to fix this?

I have just tried that with Firebug and it worked well. Can you please change the code like that in override.css again for me to check?

Thanks,

I made two copies of the site :
- Copy A : http://fapisere.fr/_fapi_2012/ with
.articleContent ul li{
list-style: disc inside none !important;
padding-left: 25px;
}
- Copy B : http://fapisere.fr/_fapi_test with
#gkComponent ul li{
list-style: disc inside none !important;
padding-left: 25px;

- Copy A is OK for previous and next links and for content lists.
See http://fapisere.fr/_fapi_2012/les-associations/agenda-associations/agenda-associations-archives/640-samedi-9-juin-2012-conference-sur-lhistoire-de-la-maison-forte-de-la-veyrie-de-bernin
and http://fapisere.fr/_fapi_2012/la-federation/organisation-federation/652-content-list
- Copy A is not OK for sitemap page.
See http://fapisere.fr/_fapi_2012/plan-du-site

Copy B is not OK for previous and next links.
See http://fapisere.fr/_fapi_test/les-associations/agenda-associations/agenda-associations-archives/640-samedi-9-juin-2012-conference-sur-lhistoire-de-la-maison-forte-de-la-veyrie-de-bernin
Copy B is OK for content lists. See http://fapisere.fr/_fapi_test/la-federation/organisation-federation/652-content-list
Copy B is nearly OK for sitemap page.
See http://fapisere.fr/_fapi_test/plan-du-site

Sitemap page should be better with disks, circles and squares :

Sitemap_page.PNG

Hi,

Add this code to the site A to fix the problem with sitemap page:

Code: Select all

#xmap ul li {
    list-style: disc inside none!important;
    padding-left: 25px!important;
}


Let me know if it works.

Thanks,

Hello,
That's OK, thanks.
Best regards

No problem at all, glad I could help.

Have a nice day,

Hello,

I see that the the site map problem is set, but the content lists issue is not yet set.

See http://fapisere.fr/_fapi_test/la-federation/organisation-federation/654-les-referents-par-territoire (article layout),
and http://fapisere.fr/_fapi_test/la-federation/organisation-federation (blog layout).
In such cases, content list dots are missing in blog layout, and css is :
.articleContent ul li{
list-style: disc inside none;
padding-left: 25px;
}

Please compare with the other copy of the site.
See http://fapisere.fr/_fapi_2012/la-federation/organisation-federation/654-les-referents-par-territoire (article layout),
and http://fapisere.fr/_fapi_2012/la-federation/organisation-federation (blog layout).
In such cases, the issue is an unexpected dot near previous and next links in article layout, and css is :
#gkComponent ul li{
list-style: disc inside none!important;
padding-left: 25px!important;
}

Hi,

Please add this code plus:

Code: Select all

.items-leading ul li {
    list-style: disc inside none!important;
}


Thanks,

Hi,
That's OK.
Thanks

No problem at all

Have a nice day mate,

Hi,

There is a new problem with RapidGallery thumbnails. See http://fapisere.fr/_fapi_test/la-federation/actualites-federation

Horizontal and vertical spacing beetween thumbnails is 4 px and that is OK with Safari and Google Chrome browsers, but that's not OK with other browsers:
- with Internet Explorer, vertical spacing is too high
- with Firefox, horizontal spacing is very very hight : about 12 px !

Is it possible to fix this?

Hi,

I have tried but this seems to be impossible for me to fix the problem is really weird. I'll spend some more time to work with it later.

Thanks,