Read More Button

This topic is: resolved

 

Thank you for contacting me. Please note that I live in the GMT+3 time zone - responses might be delayed by this.

Viewing 3 reply threads
  • Author
    Posts
    • #4228


      MountainDew
      Participant
      Post count: 13

      Under generated post content section, how can I change the appearance of the %%item_read_more_button%%

      I would like to change the color as well as the hover color for it.
      <div class=”pn-shadow-host js-pn-js-pn-create-project-modal” style=”all: initial !important;”></div>
      <div class=”pn-shadow-host js-pn-feedback-modal” style=”all: initial !important;”></div>
      <div class=”pn-shadow-host js-pn-image-modal” style=”all: initial !important;”></div>

    • #4233


      Szabi – CodeRevolution
      Keymaster
      Post count: 4205

      Hello,

      First of all, thank you for your purchase.

      To apply CSS and change the styling of the Read More button, please wrap the shortcode in one of the divs you listed above and add also the CSS corresponding to the classes you assigned to the divs.

      Example:

      <code>

      <div class=”pn-shadow-host js-pn-js-pn-create-project-modal” style=”all: initial !important;”>%%item_read_more_button%%</div>

      </code>

      When you copy-paste the above text, please check double quotes, they are usually changed here in comments with a type of double quotes which are invalid in HTML, so you should replace them.

      Regards, Szabi – CodeRevolution.

    • #4246


      MountainDew
      Participant
      Post count: 13

      Hi,

      Can you give me an example (cause I don’t know where to change the css)

      I need to change the button display color to blue, and the hover color to red.

       

       

      <div class=”pn-shadow-host js-pn-js-pn-create-project-modal” style=”all: initial !important;”></div>
      <div class=”pn-shadow-host js-pn-feedback-modal” style=”all: initial !important;”></div>
      <div class=”pn-shadow-host js-pn-image-modal” style=”all: initial !important;”></div>
      <div class=”pn-shadow-host js-pn-js-pn-create-project-modal” style=”all: initial !important;”></div>
      <div class=”pn-shadow-host js-pn-feedback-modal” style=”all: initial !important;”></div>
      <div class=”pn-shadow-host js-pn-image-modal” style=”all: initial !important;”></div>

    • #4251


      Szabi – CodeRevolution
      Keymaster
      Post count: 4205

      Hello,

      You need to add Custom CSS to your WordPress site, using the theme customizer. Please check details on how to do this, here: https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/

      CSS can look like below:

      .pn-shadow-host js-pn-js-pn-create-project-modal

      {
      color: blue;
      }

      a.pn-shadow-host js-pn-js-pn-create-project-modal:hover, a.pn-shadow-host js-pn-js-pn-create-project-modal:active {
      color: red;
      }

Viewing 3 reply threads

The topic ‘Read More Button’ is closed to new replies.