CSS changes to stylesheet not activating

HI,
I see you have the child theme active right now. It’s odd that your theme is pulling in the CSS file twice (see homepage HTML code lines 32 and 33 both read:
‘<link rel=’stylesheet’ id=’klopp-style-css’ href=’https://www.yatrayoga.no/wp-content/themes/child-theme-yatra/style.css?ver=4.5.3&#8242; type=’text/css’ media=’all’ />’
… but that should not stop your changes from being applied.
The problem is that those .css files are empty. Take a look:

https://www.yatrayoga.no/wp-content/themes/child-theme-yatra/style.css?ver=4.5.3

One thought: if you are using the editor in WordPress (as opposed to using FTP), make sure you scroll to the bottom of the page and apply your changes. It’s easy to miss that step. Once you do that you should see the .css file on the server update immediately.

Thanks @frasermarlow for looking at my problem. Yes, I can see what u mean with empty stylesheets and duplicate problem. I dont know why. Yes, I am using wp editor, not ftp. And I am always pushing the button at the bottom of stylesheet page to save. ?? Now I tried to fill in changes for nivo slider. In my stylesheet it looks like this now, but no changes to the slider speed.

/*
Theme Name:     Child theme Klopp
Author:         Admin
Template:       klopp
*/

.nivoSlider {
	position:relative;
	width:100%;
	height:auto;
	overflow: hidden;
	animSpeed: 500;
	pauseTime: 5000;
}

I might be doing it wrong though. But for example when changing nav float from left to right in html online just to try, it works. When copying that “new” css to changing the code in style.css, it does not work. And I know I must be using the right code for this. I dont understand why this is happening. Ever so grateful if any wiz want to help me solve this ??

OK, so great – step 1 your .css file is updating.

Looking at the HTML I now see what class or ID you are trying to affect.

Take a look at
https://seriftemplates.com/forum/topic/nivo-slider-edit-speed

animSpeed and pauseTime are not standard CSS properties, and you might need to locate your jquery.nivo.slider.pack.js file and edit it directly there according to that post.

So that might not be a reliable test of whether or not you can override styles – what you are doing should work.

Thanks again for looking into this!

I found the jquery.nivo.slider.pack.js file in the Klopp (parent) theme using file search at my host. I understand that I need to increase pauseTime. But do I change the file at my host (it does not seem to work), or do I have to download the jquery.nivo.slider.pack.js file to my Child theme? If so, how do I do that? Or is there another way?
In wp admin I found only this nivoslider.php file which looks like this:

<?php
/* The Template to Render the Slider
*
*/

//Define all Variables.
if ( get_theme_mod('klopp_main_slider_enable' ) && is_front_page() ) : 

	$count_x = $count = esc_html(get_theme_mod('klopp_main_slider_count'));

		?>
		<div id="slider-bg">
			<div class="container">
				<div class="slider-wrapper theme-default">
			            <div id="nivoSlider" class="nivoSlider">
			            <?php
			            for ( $i = 1; $i <= $count; $i++ ) :

							$url = esc_url ( get_theme_mod('klopp_slide_url'.$i) );
							$img = esc_url ( get_theme_mod('klopp_slide_img'.$i) );

							if ($img != '') :
							?>

				            <a href="<?php echo $url; ?>"><img src="<?php echo $img ?>" title="#caption_<?php echo $i ?>" /></a>

				            <?php endif; ?>
			             <?php endfor; ?>

			            </div>

			            <?php
			            for ( $i = 1; $i <= $count_x; $i++ ) :

							$title = esc_html(get_theme_mod('klopp_slide_title'.$i));
							$desc = esc_html(get_theme_mod('klopp_slide_desc'.$i));
							$button = esc_html(get_theme_mod('klopp_slide_CTA_button'.$i));
							$url = esc_url( get_theme_mod('klopp_slide_url'.$i) );

							?>
				            <div id="caption_<?php echo $i ?>" class="nivo-html-caption">
				                <a href="<?php echo $url ?>">
					                <div class="slide-title"><?php echo $title ?></div>
					                <div class="slide-desc"><span><?php echo $desc ?></span></div>
					                <?php if ($button != "") { ?><div class="slide-cta"><span><?php echo $button ?></span></div><?php } ?>
				                </a>
				            </div>
			            <?php endfor; ?>

			        </div>
			</div>
		</div>

	<?php	

endif;	?>

I now tried In style.css to remove shadow from Header from being this:

#masthead h1.site-title a {
  color: white;
  text-shadow: 1px 0px 0px black;
}

changing to this:

#masthead h1.site-title a {
  color: white;
  text-shadow: none;
}

It is working when I try the online html on my site, but not working when saved in stylesheet…

For the slider timing, I am surprised there is not a place in your plugin to change that value. Make sure you checked the documentation there first. If there is not, then you can edit the value in the jquery.nivo.slider.pack.js file but bear in mind that tweak might get lost if the slider plugin is ever updated.

So for your CSS issue, the child-theme CSS file is there, but it is being called (again, twice) before the main theme .css file. So if the page gets conflicting instructions from two or more .css files it will go with the last one it gets.
For this reason a good theme will call the parent CSS file first and the child .css file last… looks like your theme is doing it the wrong way around?

Anyway, the easiest trick in this case is to tell the browser that the first .css statement should not get overwritten by the second statement. You do this bu changing your child theme .css as follows:

text-shadow: none !important;

I also notice that you have a bug in the HTML on line 54 which reads as follows:
<style id='custom-css-mods'>#masthead #site-logo img { transform-origin: left; }.title-font, h1, h2, .section-title { font-family: Oswald; }body { font-family: Oswald; }#masthead h2.site-description { color: #FFF; }</style>
That ‘>’ symbol in -mods’>#masthead is closing the id tag. See if you can get that fixed – it looks like maybe you were trying to override the style in the body of the HTML rather than in the style sheet?

Cheers,

Fraser