Elxis CMS Forum

Ελληνικό Forum => Διαχείριση => Topic started by: psiloscc on October 13, 2010, 12:54:53

Title: [SOLVED] TinyMCE WYSIWYG Editor - αλλαγή γραμμών και tmpl Philoxenia
Post by: psiloscc on October 13, 2010, 12:54:53
Καλημέρα,
Τώρα τελευταία έβαλα το template Philoxenia σε site με elxis 2009.2 και δεν μου αφήνει κενό όταν αλλάζω γραμμές,

δείτε φωτό:
στην φωτο 01 είναι η προεπισκόπηση με το template Philoxenia και δεν φαίνονται να έχουν καθόλου κενό οι γραμμές

στην φωτο 02 είναι η προεπισκόπηση με το template Open Mind αλλά εδώ μπορεί πάλι να μην αφήνει τόσο κενό όσο του βάζω αλλά τουλάχιστον φαίνεται σαν να έχει μια γραμμή κενή.

μετά από αναζήτηση στο φόρουμ είδα ότι είναι γνωστό το πρόβλημα γιατί δεν αλλάζει από τον κειμενογράφο το P και BR στο "Αλλαγές Γραμμών:" και χρειάζεται να πατάω SHIFT+Enter.

αλλά επειδή έχω πολλά άρθρα που δεν είχα αφήσει κενό με SHIFT+Enter, μπορώ να αλλάξω κάτι στα αρχεία του template Philoxenia για να εμφανίζονται οι κενές γραμμές έστω όπως εμφανιζόντουσαν στο Open Mind΄(φωτό 2)?


[attachment deleted by admin]
Title: Re: TinyMCE WYSIWYG Editor - αλλαγή γραμμών και tmpl Philoxenia
Post by: webgift on October 13, 2010, 13:05:01
Να δούμε φωτό άλλα δεν έχει !!!  ;D
Title: Re: TinyMCE WYSIWYG Editor - αλλαγή γραμμών και tmpl Philoxenia
Post by: psiloscc on October 13, 2010, 13:13:11
Να δούμε φωτό άλλα δεν έχει !!!  ;D

 ;D ;D ξέχασα να τις ανεβάσω, τώρα τις ανέβασα.
Title: Re: TinyMCE WYSIWYG Editor - αλλαγή γραμμών και tmpl Philoxenia
Post by: CREATIVE Options on October 13, 2010, 14:30:38
Ας αφήσουμε την προ επισκόπηση, έξω στα άρθρα ποιο είναι το πρόβλημα ;
Title: Re: TinyMCE WYSIWYG Editor - αλλαγή γραμμών και tmpl Philoxenia
Post by: psiloscc on October 13, 2010, 14:53:28
Ας αφήσουμε την προ επισκόπηση, έξω στα άρθρα ποιο είναι το πρόβλημα ;

Την ίδια ακριβώς απόσταση έχουν οι γραμμές και έξω στα άρθρα στο κεντρικό site το πρόβλημα είναι ότι στο template philoxenia δεν υπάρχει καθόλου απόσταση μεταξύ των γραμμών και θέλω να εμφανίζετε η απόσταση όπως εμφανιζόταν στο template Open Mind.
Title: Re: TinyMCE WYSIWYG Editor - αλλαγή γραμμών και tmpl Philoxenia
Post by: CREATIVE Options on October 13, 2010, 17:35:38
line-height είναι η CSS συνάρτηση που χρειάζεσαι στο template σου.
Title: Re: TinyMCE WYSIWYG Editor - αλλαγή γραμμών και tmpl Philoxenia
Post by: psiloscc on October 13, 2010, 18:31:56
Σε ευχαριστώ για την απάντηση, τώρα τα κοιτάζω για να δω τι πρέπει να αλλάξω και θα σας πω.

κάτι άλλο που είδα τώρα (επειδή οι μεγάλει τίτλοι των άρθρων κολλούσαν στα εικονίδια του email, pdf κλπ.) και θα ήθελα εαν μπορεί κάποιος να μου πεί, εάν είναι σωστό που άλλαξα στο αρχείο customize.css το:

Code: [Select]
/* email, print, rtf, pdf buttons */

div.buttonheading {

margin: -26px 5px 7px 0;

}


και να το έκανα έτσι:

Code: [Select]
/* email, print, rtf, pdf buttons */

div.buttonheading {

margin: 10px;

}

γιατί μόνο έτσι κατάφερα να μην κολλάει ό τίτλος στα εικονίδια (δεν ξέρω όμως εάν έτσι θα υπάρχει πρόβλημα αλλού)
 
εάν είναι λάθος έτσι που έκανα τον κώδικα τί πρεπει να πειράξω;

Ευχαριστώ!
Title: Re: TinyMCE WYSIWYG Editor - αλλαγή γραμμών και tmpl Philoxenia
Post by: psiloscc on October 13, 2010, 20:30:49
Έψαξα όλα τα αρχεία του template philoxenia ένα ένα αλλά δεν έβγαλα άκρη. το μόνο κατάφερα ήταν στο αρχείο layout.css αυτό:

Code: [Select]
body, body.contentpane, div, p {

margin: 0;

padding: 0;

font-family: Tahoma, Verdana, sans-serif;

font-size: 12px;

line-height: 15px;

color: #434343;

}
---------------------
να κάνω το
margin: 0;

έτσι:
margin: 30px;

και άφηνε το κενό που ήθελα στα άρθρα αλλα δυστυχώς χαλούσε (μεγάλωνε) το footer.

μπορώ να κάνω κάτι σε αυτόν τον κώδικα ή κάτιτι αλλο για να φτιάξει;
Title: Re: TinyMCE WYSIWYG Editor - αλλαγή γραμμών και tmpl Philoxenia
Post by: datahell on October 13, 2010, 21:36:14
Για το div.buttonheading:

Αν προσέξεις το "κουτί" με τα κουμπιά δίπλα στον τίτλο του άρθρου είναι στην πραγματικότητα κάτω από τον τίτλο σε νέα γραμμή. Το πάνω αρνητικό margin -26px "σηκώνει" αυτό το κουτί ψηλότερα φέρνοντάς το στο ίδιο ύψος με τον τίτλο. Έτσι είναι σαν να βρίσκονται στην ίδια γραμμή ενώ δεν είναι. Αν θες να το αναιρέσεις αυτό βάλε margin 0 ή μεγαλύτερο του μηδενός στην κορυφή
πχ:
div.buttonheading { margin: 5px 5px 7px 0; }

Βάζοντας ένα γενικό div, p {margin: 30px; } είναι χαζομάρα αφού θα σου καταστρέψει τα πάντα στο layout.

Γιατί νομίζεις ότι δεν υπάρχουν "αποστάσεις γραμμών" στο philoxenia; Μία χαρά υπάρχουν.

Σημείωση: αν κάτι δεν υπάρχει στο css ενός template είναι γιατί δεν το χρειάζεται έτσι όπως το σχεδίασε ο αρχικός κατασκευαστής του. Αν θέλετε να το αλλάξετε προσθέστε το εσείς. Μπορείς να προσθέσεις ότι θες στο css.
Title: Re: TinyMCE WYSIWYG Editor - αλλαγή γραμμών και tmpl Philoxenia
Post by: psiloscc on October 13, 2010, 22:11:11
καταρχήν σε ευχαριστώ πάρα πολύ για την βοήθεια, οκ με το div.buttonheading: έκανα αυτά που μου είπες και είναι οκ.

με τις αποστάσεις... κατανοώ ότι έχετε βάλει τα απαραίτητα που χρειάζονται στο template, αλλά τόσο καιρό δεν είχα προσέξει (γαιτί στο template openmind μου άφηνε κανονικά κενό) στον κειμενογράφο τα P και BR και τα έβαζα όλα να γίνονται οι αλλαγές γραμμών με P.

και τώρα οι αποστάσεις στα παλιά άρθρα που δεν έχω πατήσει swift+enter όταν άλλαζα γραμμές εμφανίζονται αλλιώς στο openmind και αλλιώς στο philoxenia

σε λίγο θα ανεβάσω 2 φωτό απο ίδιο site και άρθρο να δείτε ακριβώς την διαφορά μεταξύ των 2 template...

edit:

ανέβασα  τις φωτογραφίες, δείτε την τελευταία γραμμή.

[attachment deleted by admin]
Title: Re: TinyMCE WYSIWYG Editor - αλλαγή γραμμών και tmpl Philoxenia
Post by: datahell on October 13, 2010, 22:51:30
Καταρχάς ο editor έχει μία ρύθμιση για το αν θες πατώντας enter να σου εισάγει BR ή P. Εξ ορισμού είναι P. Επειδή συνήθως το P έχει πάνω-κάτω margin η τελική απόσταση που αφήνει συνήθως είναι μεγαλύτερη από αυτή του BR που καταλαμβάνει συνήθως το ύψος μία γραμμής. Αυτό είναι ανεξάρτητο από το template σας και είναι θέμα ρύθμισης του editor.

Το ύψος που σε ενδιαφέρει δεν έχει να κάνει με αυτά που λες. Είναι η κατακόρυφη απόσταση από το τέλος του άρθρου στα link πλοήγησης. Καμία σχέση με το άρθρο, πρέπει να κοιτάξεις άλλες κλάσεις του css με πιο πιθανή την contentpaneopen_text (το κάτω margin/padding του άρθρου). Στο philoxenia αυτή η απόσταση είναι μηδέν.

div.contentpaneopen_text { text-align:justify; padding:0 4px; }

Τελος αν κάνω κάτι σαν αυτό που έγραψες πριν: p {margin: 30px; } αυτό σημαίνει πως σε κάθε κανή γραμμή στον editor (<p></p>) θα αφήνεις ένα πολύ μεγάλο κενό 60 px + ύψος της γραμμής 16px συνήθως (εδώ εξαρτάται από τον browser που χρησιμοποιείτε αν θα της δώσει ύψος εφόσον είναι κενή).

Έφτιαξα και μία εικονίτσα για να βοηθήσω να καταλάβετε τα ύψη των γραμμών καλύτερα.

[attachment deleted by admin]
Title: Re: TinyMCE WYSIWYG Editor - αλλαγή γραμμών και tmpl Philoxenia
Post by: psiloscc on October 14, 2010, 00:13:52
Είδα την ρύθμιση στον editor αλλά ενώ το ρυθμίζω να εισάγει BR μου τα βγάζει με Ρ, κάπου εδώ στο φόρουμ είδα ένα ποστ για αυτό το πρόβλημα και έγραφε κάποιος να πατάμε shift+enter.

 για το "div.contentpaneopen_text" που μου είπες το κοίταξα αλά δεν έβγαλα άκρη, αύριο πάλι θα τα κοιτάξω ένα ένα τα αρχεία και τους κώδικες μήπως το πετύχω.

Σε ευχαριστώ!
Title: Re: TinyMCE WYSIWYG Editor - αλλαγή γραμμών και tmpl Philoxenia
Post by: psiloscc on October 14, 2010, 17:19:33
Τελικά δεν πρέπει να είναι μόνο  η απόσταση από το τέλος του άρθρου, γιατί δεν μου αφήνει κενό ούτε στην μέση των άρθρων, δείτε φωτό.

Δεν έβγαλα άκρη με το philoxenia, διάβασα πάλι τον οδηγό του elxis για template και κάτι σημειώσεις που είχα και τώρα θα ξανά συγκρίνω από την αρχή το philoxenia με το openmind ή το okto, για να δώ τι διαφορές έχουν μήπως βγάλω άκρη.

[attachment deleted by admin]
Title: Re: TinyMCE WYSIWYG Editor - αλλαγή γραμμών και tmpl Philoxenia
Post by: datahell on October 14, 2010, 20:24:40
Αυτό που δείχνεις τώρα είναι άλλο θέμα. Γιατί πηδάς από θέμα σε θέμα; Αυτό που δείχνεις τώρα είναι απόσταση μεταξύ αντικειμένων λίστας (LI). Δες το margin/padding τους. Πρόκειται για 2 διαφορετικά template και είναι φυσικό να το δείχνουν διαφορετικά αφού έχουν διαφορετικό css. Χρησιμοποίησε το template που θες και άλλαξε τα σημεία που θες.

παράδειγμα 1: μηδενική απόσταση μεταξύ αντικειμένων λίστας:
li { margin: 0; }

παράδειγμα 2: μεγαλύτερη απόσταση μεταξύ αντικειμένων λίστας:
li { margin: 10px 0; }


Δωρεάν σεμινάριο: CSS Basics 2
https://www.elxis.org/el/webinars/ (https://www.elxis.org/el/webinars/)
Title: Re: TinyMCE WYSIWYG Editor - αλλαγή γραμμών και tmpl Philoxenia
Post by: psiloscc on October 14, 2010, 22:51:17
Εγώ νόμιζα ότι ήταν το ίδιο θέμα γιατί εγώ βλέπω σαν γενικό πρόβλημα οτι δεν υπάρχουν κενά στις γραμμές, νόμιζα δλδ ότι θα μου λέγατε να άλλαζα ένα κομμάτι μόνο στον κώδικα και θα έφτιαχναν όλα, αλλά τώρα καταλαβαίνω ότι παίζουν πολλά πράγματα σημασία.

Το σεμινάριο CSS Basics 2 το είχα παρακολουθήσει, το απόγευμα διάβαζα τις σημειώσεις που είχα κρατήσει, (βλέπω και τα site για Online βοήθεια που μας είχες δώσει) αλλά δεν τα πολυκαταλαβαίνω.

Θα το κοιτάξω πάλι αύριο και αν δεν βγάλω άκρη ή θα ξανά βάλω το template openmind που είχα ή θα πώ σε κάποιον να μου φτιάξει το συγκεκριμένο κομμάτι.
Title: Re: TinyMCE WYSIWYG Editor - αλλαγή γραμμών και tmpl Philoxenia
Post by: psiloscc on October 14, 2010, 23:45:16

Το ύψος που σε ενδιαφέρει δεν έχει να κάνει με αυτά που λες. Είναι η κατακόρυφη απόσταση από το τέλος του άρθρου στα link πλοήγησης. Καμία σχέση με το άρθρο, πρέπει να κοιτάξεις άλλες κλάσεις του css με πιο πιθανή την contentpaneopen_text (το κάτω margin/padding του άρθρου). Στο philoxenia αυτή η απόσταση είναι μηδέν.

div.contentpaneopen_text { text-align:justify; padding:0 4px; }


Τώρα μόνο συνειδητοποίησα ότι μάλλον στην αρχή κατάλαβες ότι ενοούσα ότι δεν υπάρχει απόσταση μεταξύ κειμένου με τα "επόμενο και προηγούμενο" γιαυτό μου είπες ότι αλλάζω θέμα (και έσπαγα το κεφάλι μου να καταλάβω τι σχέσει έχουν αυτά που μου είπες να αλλάξω στο "/* more links */" με το κείμενο  :D )

εγώ ενοούσα από την αρχή το κενό μέσα στο κείμενο δες την φωτο που έφτιαξα,

Σε παρακαλώ επιβεβαίωσέ μου εάν όντως στην αρχή μιλούσαμε για διαφορετικό πράγμα ο κάθε ένας για να διορθώσω κάποιες σημειώσεις που έχω κρατήσει.

Σε ευχαριστώ!


[attachment deleted by admin]
Title: Re: TinyMCE WYSIWYG Editor - αλλαγή γραμμών και tmpl Philoxenia
Post by: CREATIVE Options on October 15, 2010, 11:51:35
Δεν έχω καταλάβει γιατί παιδεύεσαι τόσο πολύ.
Έχεις το add-on "web developer" στον Firefox ;

Εάν ναι και δεν βγάζει άκρη, στείλε με πρόσβαση + FTP σε PM και το τηλέφωνο σου ή Skype, να σου το φτιάξω και μιλάμε ταυτόχρονα.
Και να πάψεις να ταλαιπώρησε και να σου εξηγήσω το πώς και τι έφτιαξα.
Title: Re: TinyMCE WYSIWYG Editor - αλλαγή γραμμών και tmpl Philoxenia
Post by: psiloscc on October 15, 2010, 13:04:19
Δεν έχω καταλάβει γιατί παιδεύεσαι τόσο πολύ.
Έχεις το add-on "web developer" στον Firefox ;

Εάν ναι και δεν βγάζει άκρη, στείλε με πρόσβαση + FTP σε PM και το τηλέφωνο σου ή Skype, να σου το φτιάξω και μιλάμε ταυτόχρονα.
Και να πάψεις να ταλαιπώρησε και να σου εξηγήσω το πώς και τι έφτιαξα.

Δεν το έχω αυτό που λές, τώρα θα το βάλω να δω τι κάνει...

Το μόνο που κατάφερα και έφτιαξα χωρίς να βλέπω κάποιο εμφανές πρόβλημα είναι:

αφαίρεσα το margin εντελώς από τον κώδικα:

Code: [Select]
* { margin:0; padding:0; }

body, body.contentpane, div, p {

margin: 0;

padding: 0;

font-family: Tahoma, Verdana, sans-serif;

font-size: 12px;

line-height: 15px;

color: #434343;

}

body { background: #FFFFFF url(../images/blue_shadow.png) top left repeat-x; }

body.contentpane { background-color: #FFFFFF; background-image: none; }

και έγινε έτσι:

Code: [Select]
* { margin:0; padding:0; }

body, body.contentpane, div, p {

margin: none;

padding: 0;

font-family: Tahoma, Verdana, sans-serif;

font-size: 12px;

line-height: 15px;

color: #434343;

}

body { background: #FFFFFF url(../images/blue_shadow.png) top left repeat-x; }

body.contentpane { background-color: #FFFFFF; background-image: none; }


Εάν είναι σωστό έτσι το αφήνω, αλλιώς θα επικοινωνήσουμε να μου το φτιάξεις.

Σε ευχαριστώ.
Title: Re: TinyMCE WYSIWYG Editor - αλλαγή γραμμών και tmpl Philoxenia
Post by: CREATIVE Options on October 15, 2010, 13:59:17
Το none στο margin είναι λάθος.

http://www.w3schools.com/css/css_margin.asp
Title: Re: TinyMCE WYSIWYG Editor - αλλαγή γραμμών και tmpl Philoxenia
Post by: psiloscc on October 15, 2010, 16:04:09
sorry εντελώς είχα βγάλει το margin, αλλά μάλον ούτε αυτό είναι σωστό.

δλδ είχα έτσι τον κώδικα:

Code: [Select]
* { margin:0; padding:0; }

body, body.contentpane, div, p {

padding: 0;

font-family: Tahoma, Verdana, sans-serif;

font-size: 12px;

line-height: 15px;

color: #434343;

}

body { background: #FFFFFF url(../images/blue_shadow.png) top left repeat-x; }

body.contentpane { background-color: #FFFFFF; background-image: none; }

πρίν κοίταζα να κάνω μόνο το <p να αλλάζει αλλά δεν ξέρω τι πρέπει να κάνω και τι να προσθέσω γιατί δεν έχω καταλάβει ακόμα πως είναι συνδεδεμένο το ένα κομμάτι με το άλλο μέσα στο template. δλδ από τον παραπάνω κώδικα, αφαιρούσα το "p" και το πρόσθετα από κάτω, κάπως έτσι:

Code: [Select]
p {

margin: 10px 0;

}


το "web developer" το είχα περασμένο τελικά αλλά δεν το θυμόμουν γιατί όταν το πέρασα δε ήξερα τι ακριβώς κάνει, (τώρα το κοιτάζω μήπως καταλάβω που ακριβώς είιναι και τί κανουν τα: div, li, p, h κλπ) τα αρχεία τα επεξεργάζομαι μόνο με το dreamweaver.
Title: Re: TinyMCE WYSIWYG Editor - αλλαγή γραμμών και tmpl Philoxenia
Post by: psiloscc on October 15, 2010, 19:52:56
Δεν έχω καταλάβει γιατί παιδεύεσαι τόσο πολύ.
Έχεις το add-on "web developer" στον Firefox ;

Εάν ναι και δεν βγάζει άκρη, στείλε με πρόσβαση + FTP σε PM και το τηλέφωνο σου ή Skype, να σου το φτιάξω και μιλάμε ταυτόχρονα.
Και να πάψεις να ταλαιπώρησε και να σου εξηγήσω το πώς και τι έφτιαξα.

Όλα οκ, σε ευχαριστώ πάρα πολύ!!!

Τελικά το πρόβλημα λύθηκε, μου το έφτιαξε ο Νίκος (Sirigos), και μου είπε τώρα πως θα κοιτάζω παρόμοια προβληματα.

η γραμμή 437 του αρχείου customize.css έγινε έτσι:

Code: [Select]
div.contentpaneopen_text { margin: 0 0 15px!important 0;}
σας ευχαριστώ πάρα πολύ όλους!!!