Lieutenant Dan
Lieutenant Dan

Reputation: 8284

different html, body background based on URL or URL string prefix

Basically I have a custom wordpress website.

I have a custom wp-login.php login screen.

But, the login screen leads to a sign-up page (enabled).

The sign-up page basically loads 2 different fields dynamically within the same form id that allows users to sign-up. Everything is the same everywhere else. (Replaces first frame 'login' page)

The problem.. is, the login page has my custom background image on html, body { background:

I would like the user to see a unique background: image when they hit that form. (the 2nd form, SIGN-UP)

Below is the URL that is generated once the user hits signup:

/wp-login.php?action=register

Is there a way I can simply replace the html, body { background: with a NEW one when the user reaches that URL?

Upvotes: 0

Views: 90

Answers (3)

Mauricio Ribeiro
Mauricio Ribeiro

Reputation: 86

Yes, there is a simple way to do it.

You can put in your wp-login.php a new css rule with !important, like this:

<?php 

    if(isset($_GET['action']) && $_GET['action']=='register'){
         echo '<style>html, body { background: url("link_of_another_image.png") !important }</style>';
    }

?>

Maybe, it can help you

Upvotes: 1

Forien
Forien

Reputation: 2763

I would do (not best way (it's probably the worst one :D) but fast to implement and works) this:

Open index.php and add code below to it:

<?php
if (stristr($_SERVER['REQUEST_URI'],'?action=register'))
ob_start(function($html) {
  $before = array('<body','<html');
  $style = ' style="background: ..."';
  $after = array('<body'.$style,'<html'.$style);
  $html = str_replace($before,$after,$html);
  return $html;
});

Upvotes: 1

eltuza
eltuza

Reputation: 84

You could detect the action=register parameter using javascript on page load and add a class to your body element. Then, you could override the styles as something like

body.registration { background: ...}

Upvotes: 0

Related Questions