[JfantasyBooksParticipant]

Hello Again!,

Details:

Name: JFantasyBooks
Site: Fantasy-Books
Site Url: https://fantasy-books.live
WordPress Version: 4.7.1
X Version: 4.6.4
Cornerstone Plugin Version: 1.33

Problem:

So, I have the css. I was wondering though, how do I have a separate css file that I can call using jQuery on x theme.

To be more precise…

Can I have separate css files? And how do I do that with x-theme? So if I have jQuery connected to a button, and I click that button, the css file will overide the global.

[LelyModerator]

Hello There,

Thanks for posting in.
We can use inline CSS instead. We can add that using jquery function onclick. Inline CSS is in top priority so it will override global settings. To help you better, please do give us clear description of what you want to achieve.

[Rue NelModerator]

Hello There,

Thanks for writing in! You can enqueue the css file correctly using the enqueue script function. Please check out this codex:
https://developer.wordpress.org/reference/functions/wp_enqueue_style/
https://code.tutsplus.com/tutorials/loading-css-into-wordpress-the-right-way–cms-20402

As this is all custom development, regretfully we won’t be able to assist further. Custom development is outside the scope of our support. We’re happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation.

Thank you for your understanding.

[JfantasyBooksParticipant]

Thanks.

So I added this

add_action( 'wp_head', 'adding_scripts_to_head' );

function adding_scripts_to_head(){
   echo "<link type='text/css' rel='stylesheet' href='style.css' />;
          <script>;
           // function for button click
        $(document).ready(function() {
        $('#removeImage').click(function(){
		     $('single').css('background-color','red');
			 });
	}):
     
         </script>";
}

I am using the style.css sheet from the x-child theme But it seems it’s not working.

In the x-child theme I put

.single {
 background-color: red;

}

to test it out, but it doesn’t seem to work.

html is this, …

<button id="removeImage">Remove Image</button>

I’m not asking for you to help with the custom development. I’m just wondering, in terms of things involving the x-theme, did I mess something up?

As for what I am doing, I’m trying to have a nightmode version of my theme. This was the best method I could think of given that it is currently not available for the ethos stack

[Paul RModerator]

Hi,

Please remove this code

add_action( 'wp_head', 'adding_scripts_to_head' );

function adding_scripts_to_head(){
   echo "<link type='text/css' rel='stylesheet' href='style.css' />;
          <script>;
           // function for button click
        $(document).ready(function() {
        $('#removeImage').click(function(){
		     $('single').css('background-color','red');
			 });
	}):
     
         </script>";
}

Then add this in Appearance > Customize > Custom javascript

jQuery(document).ready(function($) {
        $('#removeImage').click(function(){
		     $('.single').css('background-color','red');
	});
}):

Then change html with this.

<div class="single">This is a test </div>
<button id="removeImage">Remove Image</button>

Hope that helps.

[JfantasyBooksParticipant]

ok. So I’m just trying to get the basics to work on x theme so that I can build what I need. I did it your way, and it doesn’t work either.

Here is a test page. https://fantasy-books.live/test-4/

So let’s say I have this as a test:

html:

    <input type="button" onclick="reset()" value="Reset" />

jQuery:

jQuery(document).ready(function($) {
        $('#removeImage').onclick(function reset(){
		     $('.entry-content').css('color','red');
	});
}):

Except this doesn’t do anything either.

I put .entry-content {color:red}; in the css and it worked fine. Problem is, I want it to work only when the button is clicked.

[Rue NelModerator]

Hello There,

Your html code should be this:

<input type="button" id="removeImage" value="Reset" />

And then your JS code should only be this:

jQuery(document).ready(function($) {
  $('#removeImage').on('click touchend', function(){
    $('.entry-content').css('color','red');
  });
});

You will need to have click and touchend events so that the button events will work in touch devices too!

Hope this helps.

[JfantasyBooksParticipant]

It worked!! Thanks!! You guys are the best! I’ll probably be back though when If I hit any snags that is x theme related.

Thanks again.

[ThaiModerator]

If you need anything else please let us know.

[JfantasyBooksParticipant]

Oh! I found something.

So, I have almost everything I need, but… I want to be able to click the button again, or click another button, and go back to the settings before the button had ever been clicked.

Do you have any advice on how?

[JfantasyBooksParticipant]

Figured it out. It would not be a theme question considering what I had to do. Sorry about that, and thanks for everything.

[Rue NelModerator]

Hello There,

We are just glad that you have figured it out a way to correct the said issue.
Thanks for letting us know!

Best Regards.

[Author]

Posts