How to use blockquotes in GameX Template

amith_vikram01

Hi,

What are the designs that I can use in JA GameX Template? I am not sure how to use the blocks within article found in the demo site.
I also want to know how to use blockquotes in this template. Please let me know of all the typography available for this template.

saguaros

amith_vikram01 Hi

Could you share the URL and some screenshots of the part on our demo site that you want to apply on your site so I can help?

And share the login info of your site as well.

amith_vikram01

Demo page: https://www.joomlart.com/demo/ja-gamex

Also, the block on this page is on the left. I want to use it in the center as well as on the right.

dominic

Hi amith_vikram01,
You can check the typography page here: https://ja-gamex.demo.joomlart.com/index.php/pages/j-pages/typography

1/ About the first letter, you can use the following class: <p class="letter-first mb-4">Did you come here for</p>

2/ To use the quote, you can select the Blockquote and add the following CSS code to the Backend > Site template Styles > Ja Gamex > Tools > custom CSS:

blockquote {
    font-family: var(--heading-font-family);
    font-size: var(--h4-font-size);
    line-height: var(--heading-h4-line-height);
    padding-left: 108px;
    position: relative;
    font-weight: 700;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 36px;
}

blockquote:before {
    content: '';
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALBSURBVHgB7ZuNjZtAEIXHawpwB3E6cAkuwMakhFRwlwrOrsC5CuJUcP4rgA5yJbgECvBPZhw4IXTK7AK7cLr3SYhFwnrL2wF2djARAAAAAAAAwJ1BHMfrwWCQUFgy1vy23W5PNicnSTK+3W4v3BxRQFhzG3FHH6kDLpfLlHcb23ONMRMKjHgTlQ5W3JETeYYvdE31IyG7Xq8/yDPsxYS3B2m/GXQ+n9Pj8ZiSZxaLxRM1MOhwOGzIM3xLT/n2uhtkCPwXGKQAgxRgkAIMUoBBCjBIAQYpwCAFGKQAgxRgkAIMUoBBCjBIAQYpwCAFGKQAgxRgkAIMUoBBChE1YDabJVw/ci3hBK2OcglnxPU+p8ox196+8HXd228GRVHk1HExZzgcvlBYRnLBXLLObH8gJWsuVk6pJmJQypsUytYsntqKVyLnRG5kbG5qe7Kcy/2Tfo14dKXwWKe6muWbNay5k9r8d2784eNxTfHTbrf7Sh6Rjxx48FYyiFIv5+jduVaB+bfP+/1+SY4YEZe6vBzk4lPqIdzPn7x7lTZH1JoCYUriaS7+i3oKD2AR3ZM4jpcUAFMSX+XNcShxV3gg5Vn0LG35+kK+GyLPmC7F68BvpCX9eymMuL/eo910KV4HecvKiyU/nM7nc68fgJkuxesi0S47afOgPsnciDxh3hPn6PkdQrwJ+UDe50Y+o/3dXIyNeQwh3oQ82osXS+JremK6FG9KdXriI9pNl+JtULrVikygVUyX4m2QZwLF9KT1TMBYiH+ENGRJntIQdcGsqxzIFV9piNWKYhc5kCu+MgErgz5zGmK9Jv1Z0xBrg6ribNgD9ZBqGkIN18CdqhplcSb4v29sKach1LCfzmWfknhvqWQCjXA2qE1xn5QzgSbUKhy2Je6bNqK9dmU1F38tlkb6SCkTOPEDe0MAAAAAAACAQPwFjNxDav2kPPEAAAAASUVORK5CYII=);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 72px;
    width: 72px;
    position: absolute;
    top: 0;
    left: 0;
}

3/ About the block on the left-hand side, you can use the following HTML:

block left

<div class="box-info">
  <div class="row">
    <div class="col-sm-12 col-md-3 col-lg-3 content-left">
      <div class="wrap-inner">
      <p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros. Donec nec justo eget felis facilisis fermentum.</p>
      <h5>Martin Frank</h5>
      </div>
    </div>

    <div class="col-sm-12 col-md-9 col-lg-9 content-right">
      <p>What’s a knock-out like you doing in a computer-generated gin joint like this? But the probability of making a six is no greater than that of rolling a seven. I guess it’s better to be lucky than good.</p>
    </div>
  </div>
</div>

block right

<div class="box-info">
  <div class="row">
    <div class="col-sm-12 col-md-9 col-lg-9 content-right">
      <p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros. Donec nec justo eget felis facilisis fermentum.</p>
    </div>
    <div class="col-sm-12 col-md-3 col-lg-3 content-left">
      <div class="wrap-inner">
        <p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros. Donec nec justo eget felis facilisis fermentum.</p>
        <h5>Martin Frank</h5>
      </div>
    </div>
  </div>
</div>

Hope this help!

amith_vikram01

Thank you so much. Also, can I use the block in the center? It's okay if its not possible.

I don't want to open another thread so posting here:

I would like to delete the dash - after author name and category -

Please let me know how because when I make changes to font color, it is displaying weird characters. Screenshot attached.

amith_vikram01

amith_vikram01 In addition to my previous post, I realized that it's a character encoding issue. Not sure what to do though. I don't want to mess anything up.

dominic

Hi amith_vikram01,
To center the block, you can use the following HTML:

 <div class="box-info">
  <div class="row">
    <div class="col-sm-12 col-md-4 col-lg-4 content-right">
      <p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros. Donec nec justo eget felis facilisis fermentum.</p>
    </div>

    <div class="col-sm-12 col-md-4 col-lg-4 content-left">
      <div class="wrap-inner">
        <p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros. Donec nec justo eget felis facilisis fermentum.</p>
        <h5>Martin Frank</h5>
      </div>
    </div>

    <div class="col-sm-12 col-md-4 col-lg-4 content-right">
      <p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros. Donec nec justo eget felis facilisis fermentum.</p>
    </div>
  </div>
</div>

If you want to change the color, you can use the following CSS code:

.article-info dd.category-name a {
      color: #....;
}
.createdby [itemprop="name"] {
    color: #....;
}
.article-info {
     color: #....;
}

About the icon, this is CSS code and not the issue/bug,
If you want to remove the icon, you can use the following CSS code:

.article-info dd:after, .article-info dd.category-name a:before {
     display: none;
}

.article-info dd.category-name {
    margin: 0 14px;
}

Hope this helps!

amith_vikram01

Wow! Thanks a lot!

Have a great day ahead.