Editors not displaying correctly in Frontend

[gordonLunar]

Hi,
I'm having problems when using an editor in the frontend of my website.
This issue happens with both TinyMCE, and JCE. It only happens in the frontend, not in the backend.
I'm using my own template, so I think the issue is due to the fact it's not using Twitter Bootstrap ( the editors seem to use it).
The publishing options such as Category, tags, etc., do not render correctly. The buttons show up as
hypertext, and the publishing options show up in a messy way.
There are no CSS ids or classes so I don't know how to change them. I had a quick look at Bootstrap, but that messes up my design.

Any help would be great - I'm at a loss of what to do.

(I don't know how to post my css file here, but I think it's okay)

PublishingOptionsProb.jpg

FPA:

Editors displaying incorrectly in front end

Tried using css to correct it,
but there are lots of divs without ids or
classes

Joomla! Instance ::
Joomla! 3.3.3-Stable (Ember)
25-July-2014
Joomla! Platform :: Joomla
Platform 13.1.0-Stable (Curiosity) 24-Apr-2013
Joomla! Configured ::
Yes | Read-Only
(444) | Owner: apache (uid: 1/gid: 1) |
Group: www-users (gid: 1) | Valid For: 1.5
Configuration Options :: Offline:
0 | SEF: 1 | SEF Suffix: 0 | SEF ReWrite: 0 |
.htaccess/web.config: No | GZip: 0 |
Cache: 0 | FTP Layer: 0 | SSL: 0 | Error
Reporting: default | Site Debug: 0 | Language Debug: 0
| Default Access: N/A | Unicode Slugs: N/A | Database
Credentials Present: Yes

Host Configuration :: OS: Linux |
OS Version: 3.11.10-301.fc20.x86_64 | Technology: x86_64 |
Web Server: Apache/2.4.10 (Fedora) PHP/5.5.16 | Encoding:
gzip, deflate | Doc Root: /var/www/html | System TMP
Writable: Yes

PHP Configuration :: Version:
5.5.16 | PHP API: apache2handler |
Session Path Writable: Yes | Display
Errors: | Error Reporting: 22527 | Log Errors To: |
Last Known Error: | Register Globals: | Magic
Quotes: | Safe Mode: | Open Base: | Uploads:
1 | Max. Upload Size: 2M | Max. POST Size: 8M | Max.
Input Time: 60 | Max. Execution Time: 30 | Memory
Limit: 128M

MySQL Configuration :: Version:
5.5.38-MariaDB (Client:mysqlnd 5.0.11-dev - 20120503 - $Id:
bf9ad53b11c9a57efdb1057292d73b928b8c5c77 $) | Host:
--protected--
(--protected--) | Collation:
utf8_general_ci (Character Set: utf8) | Database Size:
4.42 MiB | #of Tables: 80

PHP Extensions ::
Core (5.5.16) | date (5.5.16) | ereg () |
libxml () |
openssl () | pcre () |
zlib (2.0) | filter (0.11.0) | hash (1.0)
| Reflection ($Id: 31d836a7ac92a37b5c580836d91ad4736fe2f376 $) | SPL
(0.2) | session () | standard (5.5.16) |
apache2handler () | bcmath () | bz2 () | calendar
() | ctype () | curl () | dom (20031129) |
mbstring () | fileinfo (1.0.5) | ftp () |
gd () | gettext () | iconv () | json
(1.3.6) | exif (1.4 $Id: 38907b4d942a8d2419060a688aa3c5e5dedcb118 $) |
mcrypt () | mysqlnd (mysqlnd 5.0.11-dev -
20120503 - $Id: bf9ad53b11c9a57efdb1057292d73b928b8c5c77 $) |
mysql (1.0) |
mysqli (0.1) | PDO (1.0.4dev) | pdo_mysql
(1.0.2) | pdo_sqlite (1.0.1) | Phar (2.0.2) | posix () | shmop () |
SimpleXML (0.1) | sockets () | sqlite3 (0.7-dev) | sysvmsg () | sysvsem
() | sysvshm () | tidy (2.0) | tokenizer (0.1) |
xml () | wddx () | xmlreader (0.1) |
xmlwriter (0.1) | xsl (0.1) | zip (1.12.4)
| mhash () | Zend Engine (2.5.0) |
Potential Missing Extensions ::
suhosin |

Switch User Environment
(Experimental) :: PHP CGI: No | Server
SU: No | PHP SU: No | Custom SU
(LiteSpeed/Cloud/Grid): No
Potential Ownership Issues: Maybe

Apache Modules :: core | mod_so |
http_core | mod_access_compat | mod_actions | mod_alias |
mod_allowmethods | mod_auth_basic | mod_auth_digest | mod_authn_anon |
mod_authn_core | mod_authn_dbd | mod_authn_dbm | mod_authn_file |
mod_authn_socache | mod_authz_core | mod_authz_dbd | mod_authz_dbm |
mod_authz_groupfile | mod_authz_host | mod_authz_owner | mod_authz_user
| mod_autoindex | mod_cache | mod_cache_disk | mod_data | mod_dbd |
mod_deflate | mod_dir | mod_dumpio |
mod_echo | mod_env | mod_expires |
mod_ext_filter | mod_filter | mod_headers | mod_include | mod_info |
mod_log_config | mod_logio | mod_macro | mod_mime_magic | mod_mime |
mod_negotiation | mod_remoteip | mod_reqtimeout |
mod_rewrite | mod_setenvif |
mod_slotmem_plain | mod_slotmem_shm | mod_socache_dbm |
mod_socache_memcache | mod_socache_shmcb | mod_status | mod_substitute |
mod_suexec | mod_unique_id | mod_unixd | mod_userdir | mod_version |
mod_vhost_alias | mod_dav | mod_dav_fs | mod_dav_lock | mod_lua |
prefork | mod_proxy | mod_lbmethod_bybusyness | mod_lbmethod_byrequests
| mod_lbmethod_bytraffic | mod_lbmethod_heartbeat | mod_proxy_ajp |
mod_proxy_balancer | mod_proxy_connect | mod_proxy_express |
mod_proxy_fcgi | mod_proxy_fdpass | mod_proxy_ftp | mod_proxy_http |
mod_proxy_scgi | mod_systemd | mod_cgi |
mod_php5 | Apache/2.4.10 (Fedora) PHP/5.5.16 |
Potential Missing Modules ::
mod_security |
mod_evasive | mod_dosevasive
| mod_ssl | mod_qos |
mod_userdir |

Core Folders ::
images/ (775) | components/
(775) | modules/ (775) |
plugins/ (775) | language/
(775) | templates/ (775) |
cache/ (775) | logs/ (775)
| tmp/ (775) | administrator/components/
(775) | administrator/modules/
(775) | administrator/language/
(775) | administrator/templates/
(775) |

Elevated Permissions (First 10) ::
templates/ (775) | templates/beez3/
(775) | templates/beez3/html/
(775) | templates/beez3/images/
(775) | templates/beez3/images/nature/
(775) | templates/beez3/images/personal/
(775) | templates/beez3/images/system/
(775) | templates/beez3/javascript/
(775) | templates/beez3/language/
(775) | templates/beez3/language/en-GB/
(775) |

Components :: SITE ::
com_mailto (3.0.0) | com_wrapper (3.0.0) |
WF_VISUALBLOCKS_TITLE (2.4.3) | WF_KITCHENSINK_TITLE (2.4.3) |
WF_FULLSCREEN_TITLE (2.4.3) | WF_CLEANUP_TITLE (2.4.3) |
WF_AUTOSAVE_TITLE (2.4.3) | WF_LISTS_TITLE (2.4.3) |
WF_STYLESELECT_TITLE (2.4.3) | WF_XHTMLXTRAS_TITLE (2.4.3) |
WF_IMGMANAGER_TITLE (2.4.3) | WF_ANCHOR_TITLE (2.4.3) |
WF_INLINEPOPUPS_TITLE (2.4.3) | WF_FONTSIZESELECT_TITLE (2.4.3) |
WF_CONTEXTMENU_TITLE (2.4.3) | WF_SOURCE_TITLE (2.4.3) |
WF_FORMATSELECT_TITLE (2.4.3) | WF_LAYER_TITLE (2.4.3) |
WF_NONBREAKING_TITLE (2.4.3) | WF_FONTCOLOR_TITLE (2.4.3) |
WF_PREVIEW_TITLE (2.4.3) | WF_PRINT_TITLE (2.4.3) | WF_TABLE_TITLE
(2.4.3) | WF_MEDIA_TITLE (2.4.3) | WF_FONTSELECT_TITLE (2.4.3) |
WF_SEARCHREPLACE_TITLE (2.4.3) | WF_CLIPBOARD_TITLE (2.4.3) |
WF_ARTICLE_TITLE (2.4.3) | WF_LINK_TITLE (2.4.3) | WF_BROWSER_TITLE
(2.4.3) | WF_VISUALCHARS_TITLE (2.4.3) | WF_TEXTCASE_TITLE (2.4.3) |
WF_CHARMAP_TITLE (2.4.3) | WF_STYLE_TITLE (2.4.3) |
WF_SPELLCHECKER_TITLE (2.4.3) | WF_DIRECTIONALITY_TITLE (2.4.3) |
WF_LINK_SEARCH_TITLE (2.4.3) | WF_AGGREGATOR_[youtube]_TITLE (2.4.3) |
WF_AGGREGATOR_VINE_TITLE (2.4.3) | WF_AGGREGATOR_VIMEO_TITLE (2.4.3) |
WF_MEDIAPLAYER_JCEPLAYER_TITLE (2.4.3) | WF_LINKS_JOOMLALINKS_TITLE
(2.4.3) | WF_FILESYSTEM_JOOMLA_TITLE (2.4.3) | WF_POPUPS_WINDOW_TITLE
(2.4.3) | WF_POPUPS_JCEMEDIABOX_TITLE (2.4.3) |
Components :: ADMIN :: com_installer
(3.0.0) | com_config (3.0.0) | com_cpanel (3.0.0) | com_joomlaupdate
(3.0.0) | com_weblinks (3.0.0) | com_tags (3.1.0) | com_search (3.0.0) |
com_redirect (3.0.0) | com_menus (3.0.0) | com_newsfeeds (3.0.0) |
com_checkin (3.0.0) | com_users (3.0.0) | com_plugins (3.0.0) |
com_finder (3.0.0) | com_messages (3.0.0) | com_cache (3.0.0) |
com_admin (3.0.0) | com_postinstall (3.2.0) | com_templates (3.0.0) |
com_login (3.0.0) | com_contenthistory (3.2.0) | com_content (3.0.0) |
COM_UAM (0.18a) | com_modules (3.0.0) | com_categories (3.0.0) | JCE
(2.4.3) | Unknown (-) | com_languages (3.0.0) | com_media (3.0.0) |
com_banners (3.0.0) | com_ajax (3.2.0) | com_phocadownload (3.0.5) |

Modules :: SITE :: mod_footer (3.0.0) |
mod_syndicate (3.0.0) | mod_articles_news (3.0.0) |
ARTICLES_PLACED_ANYWHERE (1.1.6) | mod_wrapper (3.0.0) | mod_login
(3.0.0) | mod_menu (3.0.0) | mod_articles_category (3.0.0) |
mod_users_latest (3.0.0) | mod_articles_archive (3.0.0) | mod_search
(3.0.0) | mod_whosonline (3.0.0) | mod_tags_similar (3.1.0) |
mod_breadcrumbs (3.0.0) | mod_custom (3.0.0) | mod_tags_popular (3.1.0)
| mod_weblinks (3.0.0) | mod_articles_latest (3.0.0) | mod_finder
(3.0.0) | mod_languages (3.0.0) | mod_banners (3.0.0) | mod_stats
(3.0.0) | mod_feed (3.0.0) | mod_articles_popular (3.0.0) |
mod_articles_categories (3.0.0) | mod_related_items (3.0.0) |
mod_random_image (3.0.0) | Slideshow CK (1.4.5) |
Modules :: ADMIN :: mod_latest (3.0.0) |
mod_login (3.0.0) | mod_multilangstatus (3.0.0) | mod_stats_admin
(3.0.0) | mod_menu (3.0.0) | mod_logged (3.0.0) | mod_quickicon (3.0.0)
| mod_version (3.0.0) | mod_popular (3.0.0) | mod_submenu (3.0.0) |
mod_custom (3.0.0) | mod_status (3.0.0) | mod_toolbar (3.0.0) | mod_feed
(3.0.0) | mod_title (3.0.0) |

Plugins :: SITE :: plg_search_categories
(3.0.0) | plg_search_content (3.0.0) | plg_search_weblinks (3.0.0) |
plg_search_newsfeeds (3.0.0) | plg_search_contacts (3.0.0) |
plg_search_tags (3.0.0) | plg_authentication_cookie (3.0.0) |
plg_authentication_ldap (3.0.0) | plg_authentication_joomla (3.0.0) |
plg_authentication_gmail (3.0.0) | plg_content_loadmodule (3.0.0) |
plg_content_finder (3.0.0) | plg_content_emailcloak (3.0.0) |
plg_content_joomla (3.0.0) | plg_content_vote (3.0.0) |
plg_content_pagebreak (3.0.0) | plg_content_pagenavigation (3.0.0) |
plg_editors-xtd_readmore (3.0.0) | plg_editors-xtd_image (3.0.0) |
plg_editors-xtd_pagebreak (3.0.0) | plg_editors-xtd_article (3.0.0) |
plg_extension_joomla (3.0.0) | plg_finder_categories (3.0.0) |
plg_finder_content (3.0.0) | plg_finder_weblinks (3.0.0) |
plg_finder_newsfeeds (3.0.0) | plg_finder_contacts (3.0.0) |
plg_finder_tags (3.0.0) | plg_user_joomla (3.0.0) |
plg_user_contactcreator (3.0.0) | plg_user_profile (3.0.0) |
plg_quickicon_joomlaupdate (3.0.0) | plg_quickicon_jcefilebrowser
(2.4.3) | plg_quickicon_extensionupdate (3.0.0) | plg_twofactorauth_totp
(3.2.0) | plg_twofactorauth_yubikey (3.2.0) | plg_system_debug (3.0.0) |
plg_system_p3p (3.0.0) | plg_system_redirect (3.0.0) | plg_system_cache
(3.0.0) | plg_system_remember (3.0.0) | plg_system_languagecode (3.0.0)
| plg_system_logout (3.0.0) | plg_system_languagefilter (3.0.0) |
plg_system_sef (3.0.0) | plg_system_log (3.0.0) | plg_system_highlight
(3.0.0) | plg_captcha_recaptcha (3.0.0) | plg_editors_codemirror (3.15)
| plg_editors_tinymce (4.1.2) | plg_editors_jce (2.4.3) |

Templates :: SITE ::
beez3 (3.1.0) | protostar (1.0) | cvni_template (1.0.0) |
cvni_template (1.0.0) |
Templates :: ADMIN :: isis (1.0) | hathor
(3.0.0) |

[Rajoz]

Hi,

What is the result with another template such as Protostar?

Regards,

[gordonLunar]

Hi,

What is the result with another template such as Protostar?

Regards,

Thanks for the post.
Protostar works fine in the frontend. I think that also uses Bootstrap.
Cutting and pasting from the Protostar code is having some effect. At least managed to get them to disappear so far.

[gordonLunar]

I'm still very confused about this. I've kinda hit a wall, due to my lack of knowledge. I understand Joomla to admin level, but I'm struggling with the development side (and don't know what Bootstrap is all about).
What I'd like is to have the editor displaying correctly within my own template.

What way should I be thinking of approaching this?
Should I be attempting to: a) Link the protostar template to my own? b) Learn Bootstrap, and how to customize it? (From what I looked at it seems you're locked into a particular way of doing things - or am I wrong? c) Change the components' css?
Any pointers of what to do, or how would be great.

[Rajoz]

Hi,

Bootstrap is a framework. That means it brings building blocks of CSS and JS ready to use to facilitate and speed up the build of a new template. The documentation on Bootstrap is on http://getbootstrap.com/2.3.2/

Bootstrap v2.3.2 is included in Joomla! since v3.0. It is used for the backend template Isis, for the frontend template Protostar (it could be also used in Beez3), and, very important, it is used for the views in the frontend (they are the displays for components such as articles, blog, list of articles, contact, newsfeeds, weblinks, etc.).

That means to have a correct display in frontend your template should have to use Bootstrap or to override (rewrite) the components views. That's the problem you currently have with your own template.

Regarding the override:
Beez3, for exemple, uses overrides to correctly display the views. You can have a look to all the PHP files in templates/beez3/html subdirectories. These PHP files based on Beez3 CSS classes are replacing (overriding) the standard components views based on Bootstrap classes.
To be clear, if you don't have a very good knowledge of PHP and CSS, I do not recommend at all to use overrides.

So what is the approach you should use for your template building? I think you have following options:

1) Start a new template from scratch
Building a template from scratch is the best way to learn how a template works. But it needs a learning curve as nothing works at the beginning. To do that you can read for example:

• http://www.joomla-css.nl/en/create-your ... o-you-need
• http://www.inmotionhosting.com/support/ ... e-template
• http://cocoate.com/jtemplate

2) Start from Protostar
Protostar is a simple template included in Joomla!. It is based on Bootstrap, so it is responsive and works with all Joomla views. It has two main advantages: it already works and it is very easy to modify and customize. There is a lot to learn with Protostar on adding positions, customizing layouts, fonts and corlors and including on advanced technologies such as LESS which is a CSS preprocessor (http://lesscss.org/).
There is a very large knowledge on Protostar in Joomla! community. So it is very easy to get support on it in this forum and in Google.
You can mixt this approach with the first one, learning first how Protostar works and later building your own template.
As it is a core Joomla template it could be modified at each Joomla update, remember to work on a copy of Protostar to avoid your modifications to be erased during update process.

3) Start from a vendor framework
Most of the templates vendors use their own framework to build their templates. These frameworks are often based on Boostrap. They includes more CSS, JS and PHP building blocks, and also more parameters to configure the template.
The vendors usually propose for free the framework and a basic template.
These frameworks are built to cover the template developper's needs so they are by far more complex than Protostar. If you are interested more on customization than on internals of a template this could be a good point to start.
There are many frameworks, for example, following frameworks have a good documentation:

• http://www.gantry-framework.org/
• http://t3-framework.org/
• http://yjsimplegrid.com/

Hope this will help you to have a clearer view and to pull down the wall...

Regards,

[gordonLunar]

Wow! Rajoz,
Fair play to you for all this great info!
I'm sure that'll help me work my way through it.
Kindest Regards,
Gordon.