• I’m using Collapse-O-Matic version 1.7.1, and I’m trying to add custom CSS to the trigger text. Specifically, I would like the trigger link to be on the right side of the page. I can make many other properties work, like color, but text-align doesn’t seem to do anything.

    I cannot post a link, as the wordpress page I’m working on is private and password-protected, but I’ll post copies of my code.

    In the TEXT editor for the wordpress page, I have:

    [expand title=”Example Image” trigclass=”exampleimage”]<img src=”wp-content/uploads/2016/06/example-image.png” />[/expand]

    And under the custom style section of the Collapse-O-Matic settings, I have:

    .exampleimage {
    color: #ff00ff;
    text-align: right;
    }

    (I can’t seem to make the indent happen, but rest assured my color and text-align properties are indented.)

    The color property (which I added as a test) works. The trigger text is fuchsia. But the text-align doesn’t do anything at all.

    I appreciate any help you can offer. Thanks a ton! I love the plug-in otherwise.

    https://wordpress.org/plugins/jquery-collapse-o-matic/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Baden

    (@baden03)

    try:
    text-align: right !important;

    Thread Starter lucas323

    (@lucas323)

    Tried, and failed, unfortunately. It might have something to do with the theme I’m using (WikiWP). I’m pretty sure the problems I had with another plugin (Simple Membership) were due to the theme. I couldn’t identify the source of that problem, however, and I switched over to a new password plugin, so I’m not totally sure about that.

    Thread Starter lucas323

    (@lucas323)

    Update: I have found a similar and possibly related problem. (Though this one has many easy workarounds, I thought I’d share it to see if it clarifies the original problem.)

    I have found that when the [expand] shortcode is used following some text in <div> tags, I can’t do any formatting (related to spacing) on the trigger text.

    E.g: in the following code, no matter how many page breaks I add (or even if I use a trigclass and add “padding-top” to the custom style), I cannot get the trigger text to move. It always appears on the very next line following the text.

    <div>Here is some text.</div>
    <br />
    <br />
    <br />
    [expand title="Click here for more"]More text[/expand]

    However, if I change the <div> tags to <p> tags, the page breaks and padding appear. (I tried switching out the <div> tags to <p> tags on the page where my original problem is occurring, and it unfortunately did not affect the text-alignment.)

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘text-align not working in custom css’ is closed to new replies.