Italizing Part Of The Title With CSS

Posted by Ed JohnsonEd Johnson on 07 Sep 2018 22:19, last edited by Ed JohnsonEd Johnson on 07 Sep 2018 23:37
Tags:

Italicizing Part of the Title with CSS

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec velit ligula, rutrum ac odio non, imperdiet posuere orci. Nunc faucibus faucibus neque. Curabitur ac erat placerat, hendrerit nisi et, viverra lectus. Cras at tellus quis dolor tempor blandit ac sed augue. Donec ut dapibus odio, id fermentum velit. Aliquam molestie facilisis mattis. Phasellus malesuada cursus libero, eu dignissim risus venenatis non. Integer varius ut metus eu elementum. Nullam at odio ut nisi maximus aliquet quis at metus. Nulla tristique nisl eros, in consequat sem tincidunt eu.

Pellentesque vitae rhoncus elit. Phasellus ultricies ipsum ut tempus laoreet. Nunc varius augue vel risus euismod, ut sagittis tortor ullamcorper. Suspendisse eu pretium felis. Integer eu odio ornare, tempus dui sit amet, dictum turpis. Vivamus et dignissim arcu, ut tristique purus.


The Code

The only way to do this within the limits of Wikidot syntax is to hide the default #page-title element with CSS and recreate it as a class (like .page-title). With that done, you add the page title to your page source. For example:

[[module css]]
#page-title {
    display: none;
}
.page-title {
    margin: 0 0 0.5em 0;
    padding-top: 0.5em;
    font-size: 180%;
    border-bottom: 1px solid #666;
}
[[/module]]

[[div class="page-title"]]
Italicizing //Part of the Title// with CSS
[[/div]]
> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec velit ligula, rutrum ac odio non, imperdiet posuere orci. Nunc faucibus faucibus neque. Curabitur ac erat placerat, hendrerit nisi et, viverra lectus. Cras at tellus quis dolor tempor blandit ac sed augue. Donec ut dapibus odio, id fermentum velit. Aliquam molestie facilisis mattis. Phasellus malesuada cursus libero, eu dignissim risus venenatis non. Integer varius ut metus eu elementum. Nullam at odio ut nisi maximus aliquet quis at metus. Nulla tristique nisl eros, in consequat sem tincidunt eu.

Pellentesque vitae rhoncus elit. Phasellus ultricies ipsum ut tempus laoreet. Nunc varius augue vel risus euismod, ut sagittis tortor ullamcorper. Suspendisse eu pretium felis. Integer eu odio ornare, tempus dui sit amet, dictum turpis. Vivamus et dignissim arcu, ut tristique purus.

...

This is a live example in answer to this question on the Community Forum: http://community.wikidot.com/forum/t-7382363/italicizing-part-of-a-page-title


Number of Comments: 0)

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License