CODEWITHSUNDEEP
csstypo3rtetypo3-7.x
Klaus
Klaus

Reputation: 1

Typo3 7.6 Add custom class to Heading-Element in RTE

I try to add a new class (headline-red) for headlines, especially for h5-element. I'm using the following TS setup:

RTE >

RTE {
    classes {
        headline-red {
            name = Heading Rot
        }
    }

    default {
        contentCSS = /typo3conf/ext/test/Resources/Public/rte.css
        useCSS = 1
        showTagFreeClasses = 1

        buttons {
            textstyle {
                tags {
                    h5 {
                        allowedClasses(
                            headline-red
                        )
                    }
                }
            }
        }

        proc {
            allowedClasses(
                headline-red
            )
        }
    }
}

My rte.css just contains this small testing-piece:

h5.headline-red {
    color: #c1002a;
}

But this changes nothing on the RTE editor. Am I missing something?

Upvotes: 0

Views: 1937

Answers (2)

Pierre Fru
Pierre Fru

Reputation: 353

I use the same solution, and it's work like a charm.

In TS Config :

RTE.classes.h2-bis.name = H2 alternatif 
RTE.default.contentCSS = typo3conf/ext/ps_template/res/ressources/css/rte.css

In Rte.css

h2.h2-bis{color: #ff0000;}

After some tests, i think the problem is just the "slash" in your css path. Try without it.

Bye

Upvotes: 0

Vishal Tanna
Vishal Tanna

Reputation: 1305

Your add customer header tag using typoscript.

Go To Page >> Root >> Edit (page) >> Resources and below typoscript

TCEFORM.tt_content.header_layout {
    addItems {
        10 = Advance Header
    }
}

Wrapping your header below TS.

lib.stdheader.10.10 >
lib.stdheader.10.10 = COA
lib.stdheader.10.10 {
   wrap = <div class="page-header"> | </div>
   20 = TEXT
   20.current = 1
   20.insertData = 1
   20.fontTag = <span class="h1" > &nbsp;|</span>
}

You will achieve below output.

enter image description here

Upvotes: 1

Related Questions