CSS Code for x.blockquote Cite?

Support
#1

Hello,

After 3 hours of searching the Internet and the forum, I need your help to customize the css code of the blockquote of my articles.

I have already managed to modify the overall appearance of the blockquote with these few lines:

.x-blockquote , blockquote {
	background-image:linear-gradient(60deg, #07d891, #048fa5);
  border-radius: 0.25em;
  font-style: italic;
  font-size: 1.10em;
  color: #ffffff;
  margin-left: 1.5em;
  padding-right: 1.2em;
  line-height: 140%;
	letter-spacing: 0.10em;
  font-family: "Nunito";
}
.x-blockquote-cite , blockquote-cite {
  font-style: normal;
  font-size: 0.90em;
  color: #ffffff;
  text-align: left;
  padding-right: 1.2em;
  font-family: "Nunito";
}

However, I can’t customize the source of the quote with the css code. In this case, I would like the source (or the author of the quotation) to have a different format.

Do you have a solution?

Thanks to all :slight_smile:

(I can’t show you an example on my site because it’s a draft article)

#2

Hello Richard,

Thanks for posting in! Because what you are trying to accomplish requires a template customization, we would highly to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released.

After the child theme is set up, please add the following code in your child theme’s functions.php file

// Blockquote
// =============================================================================

function custom_x_shortcode_blockquote( $atts, $content = null ) { // 1
  extract( shortcode_atts( array(
    'id'    => '',
    'class' => '',
    'style' => '',
    'cite'  => '',
    'type'  => ''
  ), $atts, 'x_blockquote' ) );

  $id    = ( $id    != '' ) ? 'id="' . esc_attr( $id ) . '"' : '';
  $class = ( $class != '' ) ? 'x-blockquote ' . esc_attr( $class ) : 'x-blockquote';
  $style = ( $style != '' ) ? 'style="' . $style . '"' : '';
  $cite  = ( $cite  != '' ) ? '<cite class="x-cite">' . cs_decode_shortcode_attribute( $cite ) . '</cite>' : '';
  switch ( $type ) {
    case 'right' :
      $type = ' right-text';
      break;
    case 'center' :
      $type = ' center-text';
      break;
    default :
      $type = '';
  }

  $output = "<blockquote {$id} class=\"{$class}{$type}\" {$style}>" . do_shortcode( $content ) . $cite . "</blockquote>";

  return $output;
}


add_action('wp_head', 'change_x_shortcode_blockquote');
function change_x_shortcode_blockquote() {
  remove_shortcode( 'x_blockquote' );
  add_shortcode( 'x_blockquote', 'custom_x_shortcode_blockquote' );
}
// =============================================================================

Please do not forget to include your modifications in the code above.

#3

Thanks for your answer, but i can’t see any change on my blockquote.

Only the modifications made by my css style apply :frowning:

#4

Hi Richard,

May I know what modification did you apply to the code.
Please note that the code that my colleague provided is the original code.
You still need to add your modification to it.

Would you mind providing us the url of the page and your wordpress admin login in Secure Note so we can take a closer look.

Thanks

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.

#6

Hello Richard,

Can you please let us know the information that’s been added in this ticket? It’s showing up in the unresolved list of tickets. Please let us know and we will assist you accordingly.

Thanks.