How do I style a "Read more" button?

Robert Neil

6/6/24, 8:40 PM

I installed the CKEditor Read More module. I want to style the Read more button to match the page background and change the button text color to blue.

I've searched all of the files associated with this module, but I found no CSS file for styling that button. I've also attempted to style the button using both internal and inline styling without success.

When the module is used, the following markup is produced.

<div>
  <p>Lorem ipsum dolor sit amet. Et magnam dignissimos sed voluptas reiciendis non nobis quis et autem quaerat ad necessitatibus omnis aut quae cumque? Aut modi suscipit qui voluptatibus officiis et culpa quisquam. Ex tempore perferendis in quas explicabo et tempore corrupti.</p>
</div>

<div class="ckeditor-readmore" data-readmore-less-text="Show less" data-readmore-more-text="Read more" data-readmore-type="button">
  <div class="card-body">
    <div id="outputtext">
      <p>Lorem ipsum dolor sit amet. Est omnis provident est quae voluptatibus est minima fugiat vel numquam rerum ea temporibus earum et earum asperiores et voluptatem maiores. Vel omnis incidunt et cupiditate optio et magnam corrupti non natus incidunt sit totam fuga rem voluptatem dolor eos quidem laudantium. Aut optio fugiat sit soluta consequatur qui sapiente consequatur est quae illum aut veniam iure cum dolorem rerum sit velit autem. Non galisum unde aut consequatur nobis qui consequatur repellat ad omnis cumque.</p>
      <p>Cum quia quia et omnis earum et exercitationem repellat aut nulla voluptate et magnam facilis aut ipsum ratione. Nam incidunt ipsa et soluta quas id voluptas voluptatibus et error quisquam a voluptas voluptas est eveniet exercitationem. Est velit laborum cum itaque quibusdam vel quia ullam.</p>
    </div>
  </div>
</div>

0 + 4

theming

cilefen

6/6/24, 9:30 PM

What classes exist on the button markup? Its CSS file shows ckeditor-readmore-wrapper and ckeditor-readmore as classes. There may be others. Those are what you would use to style the button. You can also inspect the DOM with browser dev tools.

cilefen

6/6/24, 9:41 PM

Now I see them thanks to @apaderno fixing the Question. This question seems like a genera CSS question—it isn’t Drupal-specific.

apaderno

6/6/24, 9:48 PM

@cilefen The HTML markup was not formatted as code and the HTML tags were stripped off. Still, I do not see any markup for a button. There are some related attributes, but no button.

Ivaylo Tsandev

6/9/24, 12:31 PM

It seems to me that this is happening from JS. Here's the code: https://git.drupalcode.org/project/ckeditor_readmore/-/blob/7.x-1.x/js/ckeditor-readmore.js#L17 The button class is `ckeditor-readmore-btn` so you should be able to add a styling through css. Please try and give a feedback if it worked

Elon Musk

I sit in a Tesla and translated this thread with Ai:

EN: How do I style a "Read more" button?

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.