I want to change

Hi,

I want to change the background of my site. I know that there is many plugins which I can use, but my background needs to redirect to anotehr website (it's like ad). Does any of your plugins can do this? Or can you help me with that in any way?

Best,
Tom

  • Adam Czajczyk

    Hello Tomasz,

    I hope you're well today and thank you for your question!

    We do not have such plugin. One of the nice plugins for this that I found is "WP-Backgrounds LIte":

    https://wordpress.org/plugins/wp-backgrounds-lite/

    I'm sure there are also other that may work for you.

    If your theme supports adding image as background you could also go another way. You could set your image as background and then use some JavaScript to make it clickable. If you decide to head that direction please setup the image and let me know. I'll take a look at site's source and I should be able to help you with that.

    Best regards,
    Adam

    • Tomasz

      Hi,

      I installed WP Backgrounds Lite, but I don't know how to change background of my homepage. My theme has such option (I can change whole background or upper part of it) but without linking it. I saw that fes plugins have responsive background which is great. Summarizing, I need plugin which can:

      - Change background of homepage, posts etc. (one background for whole page)
      - Background must be responsive
      - I need option to link my background

      How can we deal with it? :slight_smile:

      Best,

      Tomek

  • Predrag Dubajic

    Hi Tomek,

    You can create new mu-plugin and add below code there, just change the URL to desired one:

    <?php
    function add_link_to_body() { ?>
    <script>
    	jQuery( document ).ready(function() {
    		jQuery('body').click(function(e){
    			if (e.target === this) {
    			    window.location = "http://example.com"
    			}
    		});
    	});
    </script>
    <?php }
    add_action( 'wp_footer', 'add_link_to_body' );

    Let us know if you need additional assistance with this :slight_smile:

    Best regards,
    Predrag

  • Dimitris

    Hey there Tomasz,

    hope you're doing really good today and don't mind chiming in! :slight_smile:

    I did it but it doesn't work. I changed my background but still it wasn't linked. I don't know why it won't work...

    Could you please provide us with support access in your website in order to see this in action? You can find detailed information about it in https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/.
    Just reply here whenever you do as we don't have any automated system to track the granted access.

    Warm regards,
    Dimitris

  • Adam Czajczyk

    Hello Tomasz!

    I accessed and checked your site but still that doesn't give me an access to the "mu plugin" that you created (I assume you used that exact code that my Predrag shared, right?) and also I see that there's currently no image background set for the site.

    That being said, can you please set the background there that you'd like to use (or any temporary one) so I could work with that exact setup that you are aiming for? Let me know please when you are ready and also please for now remove the "background-link" MU plugin.

    Best regards,
    Adam

  • Adam Czajczyk

    Hey Tomek!

    Thanks for setting up background. It seems though that you did not removed the "background-link" MU plugin after all. I can see it's still there, see for yourself on

    "Wtyczki -> Zainstalowane wtyczki -> Wymuszone" ("Plugins -> Installed plugins -> MU")

    page.

    Please access your site via FTP (or cPanel "File Manager") and go to the "/wp-content/mu-plugins" folder and remove the "background-link.php" file from there. Make sure that it's removed and let me know here please :slight_smile:

    Best regards,
    Adam

  • Adam Czajczyk

    Hey Tomek!

    Thanks for letting me know. I tried to run the code on your site (that's why I installed the "Code Snippets" plugin there) but it seems that it's not playing well with your site. This means that a theme or another plugin is somehow interfering with this code (the code isn't executed) but I'm sure we can do something about it :slight_smile:

    I would however need to access the site directly so please send in:

    Subject: "Attn: Adam Czajczyk"

    - Mark to my attention, the subject line should contain only: ATTN: Adam Czajczyk
    - Do not include anything else in the subject line, doing so may delay our response due to how email filtering works.
    - Link back to this thread
    - login URL and admin account login credentials (may be a temporary admin account) data
    - Include FTP log-in details (hostname, username & password)
    - Include any relevant URLs for your site

    Please use our contact form here http://premium.wpmudev.org/contact/

    Select "I have a different question" from the drop-down list. 

    Make sure that you have you site backed up first, please.

    I'll then access it and I think I'll be able to make it work for you :slight_smile:

    Best regards,
    Adam

  • Predrag Dubajic

    Hi Tomasz,

    Thanks for sending those in, I had a look at your installation and your autoptimizer is throwing console error when JavaScript optimization is enabled and that causes script from mu-plugin to fail.

    Once this is disabled the code provided by be before works fine.

    I have restored your setup now to how it was so if you want to see it working disable optimization first.
    Not sure why that plugin is causing this error though, the error is there even without the mu-plugin.

    Since you have 40 plugins active on your site it's quite possible there's a conflict with Autoptimize with one of other plugins installed.

    Best regards,
    Predrag

    • Tomasz

      Hi,

      Thanks a lot for help! By now I trun off Autoptimizer. I have 3 more questions:
      1. Can you recommend me diffrent plugin which I can replace Autoptimizer? Maybe something more stable?
      2. Can you send me the code to "background link" where after clicking on background the new page will be open in new tab? And is it possible that after I put my mouse on background, the cursor will change in "hand" like on the links and other clickable elements?
      3. I'm thinking about that grey bar under featured posts. From your experience, is it better to have whole background clickable (for ads) or just change background but leave only small area clickable (in my page area of that grey bar under featured posts)? I'm asking because I don't have much experience with that and I'm really count on your opinion.

      Btw. I want to really thank you for your help! You did more for me more than any other support I have. Once again, thank you!

      Best,
      Tomek

  • Dimitris

    Hey there Tomasz,

    hope everything's going well for you today and don't mind chiming in! :slight_smile:

    1. Can you recommend me diffrent plugin which I can replace Autoptimizer? Maybe something more stable?

    You can give a try to our won HummingBird plugin https://premium.wpmudev.org/project/wp-hummingbird/
    It's minification module can still throw errors due to other plugins' incompatibility (just like the Autoptimizer), but this should be pretty easy to fix through HB Minification settings page.

    2. Can you send me the code to "background link" where after clicking on background the new page will be open in new tab? And is it possible that after I put my mouse on background, the cursor will change in "hand" like on the links and other clickable elements?

    You can try the following snippet instead as a MU plugin

    <?php
    function add_external_link_to_body() { ?>
    <script>
    	jQuery( document ).ready(function() {
    		jQuery('body').click(function(e){
    			if (e.target === this) {
              window.open("http://example.com", "_blank");
    			}
    		});
    	});
    </script>
    <?php }
    add_action( 'wp_footer', 'add_external_link_to_body' );

    3. I'm thinking about that grey bar under featured posts. From your experience, is it better to have whole background clickable (for ads) or just change background but leave only small area clickable (in my page area of that grey bar under featured posts)? I'm asking because I don't have much experience with that and I'm really count on your opinion.

    I have to admit that I didn't quite understand what's the region you're referring too, maybe a screenshot would clear things up. Despite that though, I guess it's better UX that an ad banner is clickable through it's whole dimension rather than a part of it. Of course you should take care of how this will be under mobile devices too, as these can become more disrupting, or may lead users to advertised sites even if they didn't want to, like through scroll events.

    Hope that helps,
    Dimitris :slight_smile:

    • Tomasz

      Hi,

      Ad. 2

      I tried that script but there is problem because now link is openinig in new tab (which is great), but still when I go my mouse on background, cursor won't change into "hand" so user won't know that after they will click it, it will provide them to the new page. Second thing is that background works only to this place (line number 1 on picture) and above that linking doesn't work.

      Ad. 3

      Thanks for your opinion! I respect that so I want to delete that header place (marked number 2 on picture) which is above background. I decided that whole background will be clickable as you suggested. How can I turn off (or delete) that header?

      Link to image: http://imgur.com/O9G80TF

      Best,

      Tomek

  • Adam Czajczyk

    Hi Tomek!

    I updated the "background-link.php" file and the current code is:

    <?php
    function add_external_link_to_body() { ?>
    <script>
    	jQuery( document ).ready(function() {
    		jQuery('body, #featured, #main-header').click(function(e){
    			if (e.target === this) {
              window.open("https://www.facebook.com/EssentialMusicTV", "_blank");
    			}
    		});
    	});
    </script>
    <?php }
    add_action( 'wp_footer', 'add_external_link_to_body' );

    The reason those areas were not "clickable" is that the "body" element was made an URL with the code but those two areas are "covering" it. I just needed to add additional selectors to the code to apply the "click()" function to them as well.

    That still doesn't fix one area, which is the part of the header on the right of your site's logo, however this could interfere with the logo that's also an URL. Other parts of the site should work fine now, though.

    As for cursor. I installed a Simple Custom CSS plugin on your site and added following CSS rules to the "Appearance -> Custom CSS" custom css box:

    body {cursor: pointer;}
    body * {cursor: initial;}
    #main-header {cursor:pointer;}
    #main-header * {cursor:initial;}
    #featured {cursor:pointer;}
    #featured * {cursor:initial;}
    a {cursor:pointer!important;}

    This sets cursor to a "hand icon" while hovering over those clickable background areas.

    Please note however that in order for any CSS changes to take effect on your site you need to follow these steps:

    - disable the "JS & CSS Script Optimizer" plugin first
    - make changes if necessary
    - delete cache
    - then enable the "JS & CSS Script Optimizer" back

    Otherwise changes may not be applied immediately.

    That being said, I think this now works as expected. Can you confirm that? If you need any further assistance, let us know please.

    Best regards,
    Adam

  • Adam Czajczyk

    Hi Tomek!

    I'm glad that it's working now as expected :slight_smile:

    I tried to remove that background by resetting the "Header Section Custom Background" value in "Appearance (Wygl?d) -> Nexus Theme Options -> General Settings -> General" page but that doesn't seem to help because if you don't use custom background there the theme is putting the default one. As result, one way or another there still is different background :slight_smile:

    In order to solve this I have added this additional CSS rule to the "Appearance -> Custom CSS" custom CSS box and it's removing background from that area completely. It also removed the "shadow" above the "featured" section so the background now looks like it's a "solid pattern".

    Here's the rule that I added:

    #featured {background:transparent;box-shadow:none!important;}

    The same as previously, I had to disable "JS & CSS Script Optimizer" plugin, clear site's cache and disable it again after making changes. I'm telling this again because it would be great that you remember this in case any other staff member couldn't at first apply CSS changes to your site (in case of other support threads) and was asking about it :slight_smile:

    Having said that, I hope that works well now :slight_smile:

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.