Difference between CSS (child theme) and live site

Info

Website: https://www.sansarlochan.in
Latest x-theme, cornerstone are installed.
Cache: inmotionhosting inbuilt cache mechnism and stackpath cdn

In above screenshot, the recent comments widget on the left hand side, is supposed to use a css class “.bwp-rc-ulist” from the child-theme to make it show in colorful manner. These elements are not showing the appropriate colors which they’re supposed to show.

P.S. if my style.css codes are fixed by you, you are free to set colors as of your wish, later I will change it.

Please help, thanks in advance.

Hello Sansar,

Thanks for asking. :slight_smile:

I checked the website and it seems that the class name you have shared is not present/defined. However, to change the background color, please add following CSS under X > Theme Options > CSS:

.x-sidebar, .widget ul li, .widget ol li {
    background-color: #ddd !important;
}

Please change the color code as per your requirement.

Thanks.

Download my child theme style.css >>http://sansarlochan.in/css.txt

Hi Sansar,

If you try to view your site source code, there is no class bwp-rc-ulist found.
The correct class is widget_recent_comments

Please replace this code

.bwp-rc-ulist a{color:#BE0000;text-transform: none; font-size: 16px!important}
.bwp-rc-ulist li{padding: 3pt;color:black;font-weight: normal; font-size: 15px!important}
.bwp-rc-ulist li:nth-child(odd) {background:#F1EADC;border-right: 2pt solid #fdf6e4;}
.bwp-rc-ulist li:nth-child(even) {background: #fdf6e4;border-right: 2pt inset #e6d1b4;}

with this

body .widget_recent_comments a{color:#BE0000;text-transform: none; font-size: 16px!important}
body .widget_recent_comments li{padding: 3pt;color:black;font-weight: normal; font-size: 15px!important}
body .widget_recent_comments li:nth-child(odd) {background:#F1EADC;border-right: 2pt solid #fdf6e4;}
body .widget_recent_comments li:nth-child(even) {background: #fdf6e4;border-right: 2pt inset #e6d1b4;}

I am sending a video on how you can check code and select the correct class.

Hope that helps

Update: I solved the 4th problem myself from typography option.

I tried to solve the 1st problem with following css code :–
.entry-title {
font-size: 28px;
line-height: 30px;
margin-bottom: 8px;
text-transform: uppercase;
font-weight: 400;
border-bottom: solid 1px #2f2f2f;
padding-bottom: 10px;
word-wrap: break-word;
}[/CODE]

But it is not making the both Hindi+English texts bold in the same way. It is only making bold “Hindi” language, rest English is as same as it is. Do u have any trick so the both languages become similarly bold? If changing English font solves it, you can also suggest me which font should I choose.

Hi there,

Matching the font weight of different fonts could be tricky as it depends on how each font looks on which font weight. Some font might look not as bold as other font when they are set to bold of 700 font weight.

A possible workaround for this would be to change the value of the fonts’ font-weight value.

For example, if the Hindi font has more full font-weight options like 800 or 900, try setting it to those values and see if it matches the bold weight of the english text.

Here is a link for the font-weight property for further reading: https://www.w3schools.com/cssref/pr_font_weight.asp

In case this workaround does not sort it out, you will need to find another Hindi font that looks bold than the present font you are using.

Hope this helps.

Hi There,

That’s whitespace is the header landmark, to remove it please add this custom CSS under Theme Options > CSS:

header.x-header-landmark {
    display: none;
}

Hope it helps :slight_smile:

Hey thanks I removed the header landmark with the help of your code.

But, what about my last 4th question? H2 header is bold in original, but it is not showing bold. In fact, all stuffs in h2 are not showing bold texts. I have used following css code for heading styles>

/* ------------------------ *

  • HEADING STYLES
    /* ------------------------ */
    .p-meta{text-align: right;}
    .entry-title
    {
    border-left: 19px solid #2b6cc4;
    border-right: 19px solid #6a98d5;
    border-top: 1px solid #6a98d5;
    border-bottom: 1px solid #6a98d5;
    border-radius: 3px;
    text-decoration: none;
    color: #660000;
    padding:3px 0px 3px 12px;
    text-transform: none;
    }
    .entry-content h1, .entry-content h2, .entry-content h3{
    letter-spacing: 0.5px;
    border-radius: 7px;
    font-weight: bold;
    padding:5px 1px 8px 8px;
    }
    .entry-content h1{
    border-left: 19px solid SkyBlue;
    background:LightCyan;
    font-size: 19px;
    }
    .entry-content h2{
    border-left: 17px solid Tan;
    border-bottom: 2px inset Tan;
    background: Cornsilk;
    font-size: 17px;
    }
    .entry-content h3{
    border-left: 17px solid #fbe50f;
    background:#fdf7b7;
    font-size: 16px;
    }
    .h-widget{
    border-left: 19px solid #66cdaa;
    border-right: 19px solid #66cdaa;
    border-radius: 7px;
    background:#fbe50f;
    font-family: open sans;
    font-size: 19px;
    padding:4px;
    text-align: center;
    box-shadow: 0px 3px 1px red;
    }
    .format-standard .entry-title:before {
    content: “”!important;
    }

Hey Sansar,

The correct CSS for that is:

.entry-title {
    font-weight: bold;
}

If you want to target all h2s, try adding these selectors:

h2, .h2, h2 a

Please note that custom development like what we already have done here is outside the scope of our support. Please see our Terms. The custom code we provided was only meant to get you started. We will not continually provide you with all the customization you need. You will need to hire a third party developer or learn CSS and how to choose selectors if you wish to continue customizing your site with CSS.

Hope that helps and thank you for understanding.

It was a little awkward reply by @Christian and somehow rude as well. I was just asking because I am novice. From future, I will ask any developer for sure. M asking something that is related to theme, hope you will reply me properly this time.

I have made global blocks shortcode. Now i want to put it in every posts (not pages) just above the comment box like this >>>

I tried adding shortcode in text widget areas and many things but nothing happened. Can u tell me how can i implement the shortcode so it appears in every posts of my blog (just above the comment)?

Hello @sansarlochan,

I apologized for @christian’s reply if it sounded rude to you.

Well anyway, regarding your question with your global block right above the comment section, this would require a little modification. Once you have your child theme active and ready, please follow the following steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php

// =============================================================================
// VIEWS/RENEW/WP-SINGLE.PHP
// -----------------------------------------------------------------------------
// Single post output for Renew.
// =============================================================================

$fullwidth = get_post_meta( get_the_ID(), '_x_post_layout', true );

get_header();

?>

  <div class="x-container max width offset">
    <div class="<?php x_main_content_class(); ?>" role="main">

      <?php while ( have_posts() ) : the_post(); ?>
        <?php x_get_view( 'renew', 'content', get_post_format() ); ?>

        <?php // ----------------------------------------------------------------------------- ?>
        <?php // Add your global block shortcode

        <?php echo do_shortcode('[cs_gb id=123]'); ?>

        <?php // ----------------------------------------------------------------------------- ?>

        <?php x_get_view( 'global', '_comments-template' ); ?>
      <?php endwhile; ?>

    </div>

    <?php if ( $fullwidth != 'on' ) : ?>
      <?php get_sidebar(); ?>
    <?php endif; ?>

  </div>

<?php get_footer(); ?>

Please do not forget to change [cs_gb id=123] with the actual global block shortcode that you will be using.

3] Save the file named as wp-single.php
4] Upload this file to your server in the child theme’s folder wp-content/themes/x-child/framework/views/renew/

You will have to create the folder path since it does not exist in your child theme’s folder yet.

Please let us know how it goes.

1 Like

Hi @RueNel

Thanks for your code. But when I put that (wp-single.php) file in wp-content/themes/x-child/framework/views/renew/wp-single.php

After then all things went blank. Not a single post was opening. Totally blank. Though, homepage was opening well like earlier.

Meanwhile I renamed file as wp-single.php.txt – to make posts open well like earlier.

:frowning: I am afraid what to do now?

Hello Sansar,

There is a typographic error in the code. Please use this instead:

<?php

// =============================================================================
// VIEWS/RENEW/WP-SINGLE.PHP
// -----------------------------------------------------------------------------
// Single post output for Renew.
// =============================================================================

$fullwidth = get_post_meta( get_the_ID(), '_x_post_layout', true );

get_header();

?>

  <div class="x-container max width offset">
    <div class="<?php x_main_content_class(); ?>" role="main">

      <?php while ( have_posts() ) : the_post(); ?>
        <?php x_get_view( 'renew', 'content', get_post_format() ); ?>

        <?php // ----------------------------------------------------------------------------- ?>
        <?php // Add your global block shortcode  ?>

        <?php echo do_shortcode('[cs_gb id=123]'); ?>

        <?php // ----------------------------------------------------------------------------- ?>

        <?php x_get_view( 'global', '_comments-template' ); ?>
      <?php endwhile; ?>

    </div>

    <?php if ( $fullwidth != 'on' ) : ?>
      <?php get_sidebar(); ?>
    <?php endif; ?>

  </div>

<?php get_footer(); ?>

We would loved to know if this has work for you. Thank you.

@RueNel It worked like a charm, you are the best person! Thank you so much

Glad we were able to help :slight_smile:

Hi can you please check my shop page > https://www.sansarlochan.in/shop/

In my mobile device it is not looking like Renew1 demo. In PC/Computer everything is fine but in mobile devices all images are left aligned. Add to baskets buttons are not in right place. (looking ugly)

Hi There,

To fix that issue, please add this custom CSS:

.woocommerce li.product .entry-featured {
    width: 100%;
}

Let us know how it goes!

Hi @thai

Your code worked and now my cart page looking fine. I have few questions today about placing Ads.

I want to place ads in three positions.

Can you tell me how can I place----

i) google ads in header area (above or below logo)
ii) how can I add custom ads (not adsense) below “end of the post”.
iii) I also want to place ads just above the footer (in grey empty area).

Hi There,

  • For #1 & #2, please add the following code under functions.php file locates in your child theme:
/* ==== Print the ad before logo ==== */
add_action( 'x_before_view_global__brand', 'print_ad_before_logo' );
function print_ad_before_logo(){
	?>
	<!-- Your Ad Embed Code Will Go Here -->
	<?php
}
/* ==== Print the ad after logo ==== */
add_action( 'x_after_view_global__brand', 'print_ad_after_logo' );
function print_ad_after_logo(){
	?>
	<!-- Your Ad Embed Code Will Go Here -->
	<?php
}
/* ==== Print the ad end of post ==== */
add_action( 'x_after_view_global__content', 'print_ad_end_post' );
function print_ad_end_post(){
	?>
	<!-- Your Ad Embed Code Will Go Here -->
	<?php
}
  • For #3, you can insert the ad embed code to text widgets then add the widgets to the footer widget area:

Hope it helps :slight_smile:

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