Author: spabhat

Enabling Color Picker in HTML RTE Area of Typo3

By default the color picker woudl be enabled in the Typo3 RTE. However, on some cases this may be disabled. Here is a quick overview on how to re-enable it in such cases.

  1. You are unable to see the color picker, that means you need to add it to the list of available buttons.
    This can be done by adding “textcolor” to the list of existing buttons in showButtons property.
    ex:
    RTE.default.showButtons = ………….. textstyle, bold, italic, textcolor
    (NOTE: The order here is not important)
  2. You should also remove the “textcolor” from the list of buttons in the hideButtons property. i.e. from RTE.default.showButtons =
  3. Place the “textcolor” button in a suitable place of your preference using the toolbarOrder property.
    ex:
    RTE.default.toolbarOrder = …. space, textstyle, textcolor, …etc….
  4. Check if color picker is enabled or not, by making sure that “disableColorPicker” is set to 0
    ex:
    RTE.default.disableColorPicker = 0
  5. RTE might use the font tag to set colors, we can make sure that this does not happen by addin the font tag to the list of tags to be removed.
    ex:
    RTE.default.removeTags = font
  6. After following step 5, the font tags are no longer used for specifying font colors, hence we should make sure to set the useCSS property to true, otherwise the colors would not appear on the front-end, nor they are saved.
    ex:
    RTE.default.useCSS = 1
    (NOTE: If you wish to use font tags for text coloring thisfeature need not be set)

    Hope these steps would be helpful to you!

Additional Notes:
The above steps are sometimes just not enough and you also need to make sure that the property “[allowStyleAttribute]” is enabled in the rtehtmlarea Extension’s configuration as shown in the screenshot.

An issue Related Typo3 Update:

  • When typo3 is upgraded from 4.2 to 4.3 no matter what we do, colorpicker just does not get displayed.
    To solve this you will need to remove the rtehtmlarea config array in the localconf.php manually!
    – Just delete the line $TYPO3_CONF_VARS[‘EXT’][‘extConf’][‘rtehtmlarea’] = ……etc….
    – Go to rtehtmlarea configuration in Extension manager and click “Update” to save the new config.
    This should now make the textcolor to appear again.

Changing Menu based on selected Templavoila TemplateObject using TypoScript

TypoScript has so much features that it is indeed impossible to document each and every feature hidden with it. As we start adding extensions the feature list would increase as well.

Consider you have selected a specific Templavoila Template and you wish to have a different type of menu based on the selected template.
In such case it would be easy to change menu styles if the entire menu is enclosed in a separate CSS class.

I have given an example where I am checking for template IDs 10 , 11. If this template is used for current page I am changing it’s class.

lib.mymenu = HMENU
lib.mymenu {
entryLevel = 1
stdWrap.ifEmpty.wrap =  

1 = TMENU
1 {
wrap = <ul>|</ul>
NO.wrapItemAndSub = |</li>
NO.allWrap = <li>|
NO.allWrap {
override = <li class=”alternate_menu”>|
override.if.value = 10,11
override.if.isInList.field = tx_templavoila_to
}
# same way we can configure ACT and CUR as well
ACT = 1
CUR = 1

}

# For second level I would like to change the class of the A Tag
2 < .1
2.wrap = <ul>|</ul>
2.CUR.ATagParams = id=”cur_menu”
2.ACT.ATagParams.cObject = TEXT
2.ACT.ATagParams.cObject {
override = class=”cur_menu_a”
override.if.value = 10,11
override.if.isInList.field = tx_templavoila_to
}
3 < .2

#let us generate the 3rd level only if the page uses the Template of our choice.
3.if {
value = 10,11
isInList.field = tx_templavoila_to
}

}

Not all templates may have a template ID specified, in such case we need to use the sliding feature.
When we use the sliding feature the template id of parent ID is used.
We can do this Like:

isInList.data = levelfield:-1, tx_templavoila_to, slide

Note:
Usually Templates are stored in the Storage Folder, and you can view the Template IDs of Templavoila Template Objects from the list view!

Html tags like table,p are not comming for the newly added RTE field in tt_news

While I was working on some project, there was a requirement to add extra RTE field for tt_news. I extended the table tt_news by adding RTE fields. I faced the following problem

1) I inserted the table but after saving the tt_news record the table started disappearing

2) <p> tag was not inserted automatically for press of Enter

After doing some research I found the solution

1) Set the transformation mode for the RTE to “ts_css” in ext_tables.php

ex-

if (t3lib_extMgm::isLoaded(‘css_styled_content’)) {
t3lib_extMgm::addPageTSConfig(‘
# RTE mode for table “tt_news”
RTE.config.tt_news.exampleField.proc.overruleMode=ts_css’);
}

Here the table used is tt_news and the filed name is exampleField

2) For P tag to be inserted for every new line character I added the code

$rowfrntbl[$tblcol]=$pObj->local_cObj->stdWrap($rowfrntbl[$tblcol], $pObj->conf[‘general_stdWrap.’])

Here I am using hook  for tt_news to get the desired result.

Writing IE 6 or IE 7 Specific CSS Code

This is sort of hack which helps you write CSS specific to IE6 / IE7.

EX:

_display:none;/* IE 6 Fix */
*display:none;/* IE 7 Fix */

NOTE: This code is not recommended if you are writing code that has to comply to CSS standards. In such cases you may have to switch to alternate methods.

One of the best methods is to use conditional CSS Comments as follows:

        <!--[if IE]>
                <link rel="stylesheet" type="text/css" href="ie.css" media="all" />
                <script type="text/javascript" src="ie.js"></script> 
        <![endif]-->

        <!--[if IE 6]>
                <link rel="stylesheet" type="text/css" href="ie.css" media="all" />
                <script type="text/javascript" src="ie.js"></script> 
        <![endif]-->
        <!--[if IE 7]>
                <link rel="stylesheet" type="text/css" href="ie.css" media="all" />
                <script type="text/javascript" src="ie.js"></script> 
        <![endif]-->
        <!--[if IE 8]>
                <link rel="stylesheet" type="text/css" href="ie.css" media="all" />
                <script type="text/javascript" src="ie.js"></script> 
        <![endif]-->
        <!--[if IE 9]>
                <link rel="stylesheet" type="text/css" href="ie.css" media="all" />
                <script type="text/javascript" src="ie.js"></script> 
        <![endif]-->
        <!--[if gte IE 8]>
                <link rel="stylesheet" type="text/css" href="ie.css" media="all" />
                <script type="text/javascript" src="ie.js"></script> 
        <![endif]-->
        <!--[if lt IE 9]>
                <link rel="stylesheet" type="text/css" href="ie.css" media="all" />
                <script type="text/javascript" src="ie.js"></script> 
        <![endif]-->
        <!--[if lte IE 7]>
                <link rel="stylesheet" type="text/css" href="ie.css" media="all" />
                <script type="text/javascript" src="ie.js"></script> 
        <![endif]-->
        <!--[if gt IE 6]>
                <link rel="stylesheet" type="text/css" href="ie.css" media="all" />
                <script type="text/javascript" src="ie.js"></script> 
        <![endif]-->
        <!--[if !IE]> -->
                <link rel="stylesheet" type="text/css" href="ie.css" media="all" />
                <script type="text/javascript" src="ie.js"></script> 
        <!-- <![endif]-->

How to change Base URL in Magento

Sometimes it may be essential to change the BASE URL of Magento.
(Usually when you want to make a similar copy of Magento on another server!)

There are 2 – 3 simple steps involved in this:

Step 1: Edit old URL values in database
Table: core_config_data
In this table you need to edit the field named value containing specific values in the field named path!
Precisely saying you need to search for web/unsecure/base_url and web/secure/base_url and replace them with new values.

Please refer the images for an example.
OLD Values:
 image

New Values:
image

Step 2: Login to backend and clear Configuration cache!
This might be simply not possible and hence skip to next step!

Step 3: Find All entries of old domain name in the cache folder and replace them one by one.
Magento retains all configuration cache in /var/cache folder.
This step is  good for Advanced Users who can do file search and replace such strings in one shot 😉
If you are migrating a very big site, then this step will be certainly worth.

I use this “Unix Find Command” very useful in searching:


find . -exec grep -q www.magdummy.cws '{}' \; –print

Step 3: Now it’s time to clear the cache! (Normal User)
As already specified in step2, we know that Magento retains all configuration cache in /var/cache folder.
You can clear the entire contents in this cache folder. Magento regenerates all these files when needed.

Step4: View your new site in the browser.
It should now be working fine like the old one 😉

I hope this would work fine for you.
Please leave your comments or I would appreciate any idea that suits best in this case.