Tutorials
Make use of text colors with the markdown editor (by @pupsik)

Here is a slution worked out by our member @pupsik about how you can have some text color option within the forums editor.

Tutorial starts here:

Please note, this is pupsik`s edit and it works, it might not be the best solution or someone might did it different. The pictures he used are original MarkitUp images to fit the style. You may use any others.

Open: sites/default/assets/js/editor.js

Find:

{name: 'Headers', className: "heading", dropMenu: [
Replace with:

{separator:'---------------' },
      {name:'Colors', className: "colors", key: 'C', openWith:'[color=[![Color]!]]', closeWith:'[/color]', dropMenu: [
      {name:'Yellow', openWith:'[color=yellow]', closeWith:'[/color]', className:"col1-1" },
      {name:'Orange', openWith:'[color=orange]', closeWith:'[/color]', className:"col1-2" },
      {name:'Red', openWith:'[color=red]', closeWith:'[/color]', className:"col1-3" },
      {name:'Blue', openWith:'[color=blue]', closeWith:'[/color]', className:"col2-1" },
      {name:'Purple', openWith:'[color=purple]', closeWith:'[/color]', className:"col2-2" },
      {name:'Green', openWith:'[color=green]', closeWith:'[/color]', className:"col2-3" },
      {name:'White', openWith:'[color=white]', closeWith:'[/color]', className:"col3-1" },
      {name:'Gray', openWith:'[color=gray]', closeWith:'[/color]', className:"col3-2" },
      {name:'Black', openWith:'[color=black]', closeWith:'[/color]', className:"col3-3" }
  ]},


  {name: 'Headers', className: "fonts", dropMenu: [

Open: sites/default/themes/default/less/editor.less

Find:

.markItUp .markItUpButton9 a    {
    background-image:url(../img/smileyimg.png);
}
Add after:

.markItUp .colors {
   left: 300px;
   position: absolute;
}

.markItUpHeader .colors ul{
    top: 23px;
    z-index:300;
}

.markItUpHeader .markItUpButton11 a {
    background-image:url(../img/colors.png);
    top: 23px;
    z-index:300;
}

    .markItUpHeader .markItUpButton11 ul {
        width:81px;
        padding:1px;

    }
    .markItUpHeader .markItUpButton11  li {
        border:1px solid white;
        width:25px;    height:25px;
        overflow:hidden;
        padding:0px; margin:0px;
        float:left;    
    }

    .markItUpHeader .markItUpButton11 ul a {
        width:25px;    height:25px;
    }

    .markItUpHeader .markItUpButton11 ul a:hover {
        background-color:none;
    }

    .markItUp .markItUpButton11 .col1-1 a {
        background:yellow;
    }
    .markItUp .markItUpButton11 .col1-2 a {
        background:orange;
    }
    .markItUp .markItUpButton11 .col1-3 a {
        background:red;
    }

    .markItUp .markItUpButton11 .col2-1 a {
        background:blue;
    }
    .markItUp .markItUpButton11 .col2-2 a {
        background:purple;
    }
    .markItUp .markItUpButton11 .col2-3 a {
        background:green;
    }

    .markItUp .markItUpButton11 .col3-1 a {
        background:white;
    }
    .markItUp .markItUpButton11 .col3-2 a {
        background:gray;
    }
    .markItUp .markItUpButton11 .col3-3 a {
        background:black;
    }


.markItUp .fonts {
   left: 320px;
   position: absolute;
}

.markItUpHeader .fonts ul{
    top: 23px;
    z-index:300;
}

.markItUp .markItUpButton12 a {
    background-image:url(../img/fonts.png);
}

.markItUpHeader .markItUpButton12  li {

        border:1px solid white;
        overflow:hidden;
        padding:0px; margin:0px;
        float:left;
}
.markItUp .markItUpButton12 .header1 > a{
    background-image:none;
    font-size: 2em;
    font-weight: bold;
    line-height: 33px;
    height: 43px;
}

.markItUp .markItUpButton12 .header2 > a{
    background-image:none;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 33px;
    height: 43px;

}
.markItUp .markItUpButton12 .header3 > a{
    background-image:none;
    font-size: 1.17em;
    font-weight: bold;
    line-height: 33px;
    height: 43px;

}
.markItUp .markItUpButton12 .header4 > a{
    background-image:none;
    font-size: 1em;
    font-weight: bold;
    line-height: 20px;
    height: 30px;
}
.markItUp .markItUpButton12 .header5 > a{
    background-image:none;
    font-size: .83em;
    font-weight: bold;
    line-height: 20px;
    height: 30px;
}
.markItUp .markItUpButton12 .header6 > a{
    background-image:none;
    font-size: .75em;
    font-weight: bold;
    line-height: 20px;
    height: 30px;
}
Note! Add styles to the theme you are using or to all of them.
Optional: I no longer use headers as a style, so I deleted this:

.markItUp .heading {
    border-radius: 2px;
    -webkit-box-shadow: rgba(255, 255, 255, 0.0980392) 1px 1px inset, rgba(0, 0, 0, 0.0980392) 1px 1px;
    box-shadow: rgba(255, 255, 255, 0.0980392) 1px 1px inset, rgba(0, 0, 0, 0.0980392) 1px 1px;
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.0980392), transparent);
    background-repeat: repeat-x;
    background-color: @markItUpHeadingBg;
    color: @markItUpHeadingColor;
    border-color: rgba(0, 0, 0, 0.298039);
    .transition(0.3s linear box-shadow);
    padding-bottom: 0px;
    padding-top: 2px;
    padding-right: 4px;
    margin-left: 10px;
    margin-top: 7px;
    position: absolute;
    left: 280px;    
}


.markItUpHeader .heading:hover {

    border-color: @markItUpHeadingHoverBorder;
}

.markItUp .heading:hover {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000', GradientType=0);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0, 0, 0, 0.05)), to(rgba(0, 0, 0, 0.1)));
    background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.05) 0, rgba(0, 0, 0, 0.1));
    background-image: -ms-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
    background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
    background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));

}

.markItUpHeader .heading > a{

    text-indent: 0;
    width: 50px;
    height: 20px;
    text-align: center;
    cursor: pointer;
    color: @markItUpHeading_A_color;
}


.markItUpHeader > ul > li > a {

    background-size: contain;
}

.markItUp .heading > ul > li > a {

    width: 100%;

}

.markItUp .heading .header1 > a{

    font-size: 2em;
    font-weight: bold;
    line-height: 33px;
    height: 43px;
}

.markItUp .heading .header2 > a{

    font-size: 1.5em;
    font-weight: bold;
    line-height: 33px;
    height: 43px;

}
.markItUp .heading .header3 > a{

    font-size: 1.17em;
    font-weight: bold;
    line-height: 33px;
    height: 43px;

}
.markItUp .heading .header4 > a{

    font-size: 1em;
    font-weight: bold;
    line-height: 20px;
    height: 30px;
}
.markItUp .heading .header5 > a{

    font-size: .83em;
    font-weight: bold;
    line-height: 20px;
    height: 30px;
}
.markItUp .heading .header6 > a{

    font-size: .75em;
    font-weight: bold;
    line-height: 20px;
    height: 30px;
}


.markItUpHeader .heading ul{

    background: white;
    border: 1px solid @markItUpHeaderHeadingUlBorder;
    top: 23px;
    left: -1px;
    padding: 6px 0px;
    width: 200px;
    z-index:300;

}

.markItUpHeader .heading ul li {

    text-align: left;
    line-height: 8px;
    border-bottom: 0;
    margin: 0;
    padding: 0;
}

That's it. You can now add 2 images colors.png and fonts.png to your theme. Default sites/default/themes/default/img. Overridte existing images if you feel like it.

Enjoy!

Kind regards from Andy and @pupsik smile

Here is a slution worked out by our member @pupsik about how you can have some **text color option within the forums editor**. Tutorial starts here: --------------------- Please note, this is pupsik`s edit and it works, it might not be the best solution or someone might did it different. The pictures he used are original MarkitUp images to fit the style. You may use any others. **Open:** sites/default/assets/js/editor.js **Find:** ```` {name: 'Headers', className: "heading", dropMenu: [ Replace with: {separator:'---------------' }, {name:'Colors', className: "colors", key: 'C', openWith:'[color=[![Color]!]]', closeWith:'[/color]', dropMenu: [ {name:'Yellow', openWith:'[color=yellow]', closeWith:'[/color]', className:"col1-1" }, {name:'Orange', openWith:'[color=orange]', closeWith:'[/color]', className:"col1-2" }, {name:'Red', openWith:'[color=red]', closeWith:'[/color]', className:"col1-3" }, {name:'Blue', openWith:'[color=blue]', closeWith:'[/color]', className:"col2-1" }, {name:'Purple', openWith:'[color=purple]', closeWith:'[/color]', className:"col2-2" }, {name:'Green', openWith:'[color=green]', closeWith:'[/color]', className:"col2-3" }, {name:'White', openWith:'[color=white]', closeWith:'[/color]', className:"col3-1" }, {name:'Gray', openWith:'[color=gray]', closeWith:'[/color]', className:"col3-2" }, {name:'Black', openWith:'[color=black]', closeWith:'[/color]', className:"col3-3" } ]}, {name: 'Headers', className: "fonts", dropMenu: [ ```` **Open:** sites/default/themes/default/less/editor.less **Find:** ```` .markItUp .markItUpButton9 a { background-image:url(../img/smileyimg.png); } Add after: .markItUp .colors { left: 300px; position: absolute; } .markItUpHeader .colors ul{ top: 23px; z-index:300; } .markItUpHeader .markItUpButton11 a { background-image:url(../img/colors.png); top: 23px; z-index:300; } .markItUpHeader .markItUpButton11 ul { width:81px; padding:1px; } .markItUpHeader .markItUpButton11 li { border:1px solid white; width:25px; height:25px; overflow:hidden; padding:0px; margin:0px; float:left; } .markItUpHeader .markItUpButton11 ul a { width:25px; height:25px; } .markItUpHeader .markItUpButton11 ul a:hover { background-color:none; } .markItUp .markItUpButton11 .col1-1 a { background:yellow; } .markItUp .markItUpButton11 .col1-2 a { background:orange; } .markItUp .markItUpButton11 .col1-3 a { background:red; } .markItUp .markItUpButton11 .col2-1 a { background:blue; } .markItUp .markItUpButton11 .col2-2 a { background:purple; } .markItUp .markItUpButton11 .col2-3 a { background:green; } .markItUp .markItUpButton11 .col3-1 a { background:white; } .markItUp .markItUpButton11 .col3-2 a { background:gray; } .markItUp .markItUpButton11 .col3-3 a { background:black; } .markItUp .fonts { left: 320px; position: absolute; } .markItUpHeader .fonts ul{ top: 23px; z-index:300; } .markItUp .markItUpButton12 a { background-image:url(../img/fonts.png); } .markItUpHeader .markItUpButton12 li { border:1px solid white; overflow:hidden; padding:0px; margin:0px; float:left; } .markItUp .markItUpButton12 .header1 > a{ background-image:none; font-size: 2em; font-weight: bold; line-height: 33px; height: 43px; } .markItUp .markItUpButton12 .header2 > a{ background-image:none; font-size: 1.5em; font-weight: bold; line-height: 33px; height: 43px; } .markItUp .markItUpButton12 .header3 > a{ background-image:none; font-size: 1.17em; font-weight: bold; line-height: 33px; height: 43px; } .markItUp .markItUpButton12 .header4 > a{ background-image:none; font-size: 1em; font-weight: bold; line-height: 20px; height: 30px; } .markItUp .markItUpButton12 .header5 > a{ background-image:none; font-size: .83em; font-weight: bold; line-height: 20px; height: 30px; } .markItUp .markItUpButton12 .header6 > a{ background-image:none; font-size: .75em; font-weight: bold; line-height: 20px; height: 30px; } Note! Add styles to the theme you are using or to all of them. Optional: I no longer use headers as a style, so I deleted this: .markItUp .heading { border-radius: 2px; -webkit-box-shadow: rgba(255, 255, 255, 0.0980392) 1px 1px inset, rgba(0, 0, 0, 0.0980392) 1px 1px; box-shadow: rgba(255, 255, 255, 0.0980392) 1px 1px inset, rgba(0, 0, 0, 0.0980392) 1px 1px; background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.0980392), transparent); background-repeat: repeat-x; background-color: @markItUpHeadingBg; color: @markItUpHeadingColor; border-color: rgba(0, 0, 0, 0.298039); .transition(0.3s linear box-shadow); padding-bottom: 0px; padding-top: 2px; padding-right: 4px; margin-left: 10px; margin-top: 7px; position: absolute; left: 280px; } .markItUpHeader .heading:hover { border-color: @markItUpHeadingHoverBorder; } .markItUp .heading:hover { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000', GradientType=0); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0, 0, 0, 0.05)), to(rgba(0, 0, 0, 0.1))); background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.05) 0, rgba(0, 0, 0, 0.1)); background-image: -ms-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1)); background-image: -o-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1)); background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1)); } .markItUpHeader .heading > a{ text-indent: 0; width: 50px; height: 20px; text-align: center; cursor: pointer; color: @markItUpHeading_A_color; } .markItUpHeader > ul > li > a { background-size: contain; } .markItUp .heading > ul > li > a { width: 100%; } .markItUp .heading .header1 > a{ font-size: 2em; font-weight: bold; line-height: 33px; height: 43px; } .markItUp .heading .header2 > a{ font-size: 1.5em; font-weight: bold; line-height: 33px; height: 43px; } .markItUp .heading .header3 > a{ font-size: 1.17em; font-weight: bold; line-height: 33px; height: 43px; } .markItUp .heading .header4 > a{ font-size: 1em; font-weight: bold; line-height: 20px; height: 30px; } .markItUp .heading .header5 > a{ font-size: .83em; font-weight: bold; line-height: 20px; height: 30px; } .markItUp .heading .header6 > a{ font-size: .75em; font-weight: bold; line-height: 20px; height: 30px; } .markItUpHeader .heading ul{ background: white; border: 1px solid @markItUpHeaderHeadingUlBorder; top: 23px; left: -1px; padding: 6px 0px; width: 200px; z-index:300; } .markItUpHeader .heading ul li { text-align: left; line-height: 8px; border-bottom: 0; margin: 0; padding: 0; } ```` **That's it**. You can now add 2 images **colors.png** and **fonts.png** to your theme. Default sites/default/themes/default/img. Overridte existing images if you feel like it. Enjoy! Kind regards from Andy and @pupsik :)

🚽 planing my next project 🪔

Check my GitHub Repos: https://github.com/WebCrew

My CrazyMates Account: https://crazymates.de/Crazymate

It also eliminates "Headers" button with image "A".

Result:
5ef3f3033cbc6

Thank you WebCrew, I'm lazy!smile

It also eliminates "Headers" button with image "A". Result: ![5ef3f3033cbc6](serve/attachment&path=5ef3f3033cbc6) Thank you WebCrew, I'm lazy!:)

My page http://russianmichigan.ml/MadRomas

13
1
2
live preview
enter atleast 10 characters
WARNING: You mentioned %MENTIONS%, but they cannot see this message and will not be notified
Saving...
Saved
With selected deselect posts show selected posts
All posts under this topic will be deleted ?
Pending draft ... Click to resume editing
Discard draft