CRG Login, Logout Page Formatting

lofty · 2016-07-21 17:51:51

Hi Guys,

Having a little trouble getting my CRG Login/Logout pages to look the way I want. The Login/Logout inputs and prompts are aligned way over to the left and I would like them to look like my admin Login/Logout ie. centered...

What is the best way to achieve this? I've tried with css and inspecting the pages of the admin and the CRG pages they look slightly different in makeup. On the CRG Login page the <h1>Login</h1> element falls outside of the <div id="form" class="admin_unit login">, whereas on the Admin Login Page the <h1>Login</h1> is inside the div.

This means that I can target the #form with some padding, but the <h1> does not move with it.

Am I missing something simple again?

http://njp.kopstone.co.uk/galleries/clients/

rod barbee · 2016-07-21 22:38:46

I clicked on the link but there is no log-in form, just the thumbnail for the album. Clicking on the album takes me to the log-in for the client. That log-in is centered on the page.
The main client log in is also centered: http://njp.kopstone.co.uk/backlight/client-response/

lofty · 2016-07-21 22:54:16

Hi Rod,

Yes it is now, but I had to add css to format the Login title to the center and then set a max width for the div containing the form fields. I think that the <h1>Login</h1> element of the page should fall inside the #form <div> as it does on the Backlight Admin login page, then it gets a bit easier to target with css.

rod barbee · 2016-07-21 23:18:22

Ok. I see what you mean. With the way you had to do it, it looks like all H1 tags will be centered for those pages using that css file.

lofty · 2016-07-22 01:04:08

Correct Rod,

The only way, currently to move the H1 tag is to target the .the__copy class, which effects the whole site. Although I could have a specific css file just for the Login, which would be a hassle for updating, as I would have to make changes to more than one css file.

Daniel Leu · 2016-07-22 01:38:18

Hi Jon,

Instead of having a specific CSS file, you could add the styling with phplugins:

   function ttg_head( $style, $path ) { 

	// Modify styles on galleries/clients page
	if ($_SERVER["REQUEST_URI"] == '/galleries/clients/'){
		echo '<style  media="screen" type="text/css">...</style>';
	}

   } // END

This should work.... but I didn't test it on my site.

lofty · 2016-07-22 16:55:32

Oooh! that's very useful Daniel Thank you...

I'd forgotten about targeting individual pages, nice one

Daniel Leu · 2016-07-23 01:35:36

The power of phplugins, although the Backlight implementation right now is a bit limited.

rod barbee · 2016-07-23 01:57:06

My dream is the ability to apply a custom body class either by individual page or by page template.....
Then you can have one css file to rule them all....

Daniel Leu · 2016-07-23 02:56:19

rod barbee wrote:

My dream is the ability to apply a custom body class either by individual page or by page template.....
Then you can have one css file to rule them all....

Yep, it would be nice to have a page related and a template related class. At the same time, you can use a separate CSS per page template. But this would mean you have more than one CSS per site which makes it more difficult to maintain it.

lofty · 2016-07-25 17:28:37

Hey Daniel,

Thanks for the phplugins code, it works a treat thank you.

Do you think that I will now have to target each client gallery page individually ie. http://njp.kopstone.co.uk/backlight/cli … m_id=91095 or is there a clever way of extending the formatting to all galleries below the top Album Set http://njp.kopstone.co.uk/backlight/client-response/

You see, by targeting the http://njp.kopstone.co.uk/backlight/client-response/, the logout page is formatted correctly (centered) but the login page http://njp.kopstone.co.uk/backlight/cli … m_id=91095 is not....

Not a problem, but just asking before I code for every page I add is all?

Not that I have many clients...... yet

Daniel Leu · 2016-07-26 00:08:55

Hi Jon,

Yes, there is. It is just a bit more php. Please note that I haven't had time to test it yet and this is before my first coffee of the day ;-)

function galleries_match($gallery) {
   if (substr($_SERVER["REQUEST_URI"], 0, strlen($gallery)) == $gallery) {
      return 1;
   }  else {
      return 0;
   }
}


function ttg_head( $style, $path ) { 

	// Modify styles on galleries/clients page
	if (galleries_match('/galleries/clients/')){
		echo '<style  media="screen" type="text/css">...</style>';
	}

   } // END

Hope this doesn't break anything!

Update: overlooked one closing bracket. It is working now.

lofty · 2016-07-26 16:24:07

Hi Daniel,

Been playing with this thank you, I think I know what is happening. The issue I have is that the Login and Logout pages are not gallery pages and the url is prepended with http://njp.kopstone.co.uk/backlight/client-response/ and not http://njp.kopstone.co.uk/galleries/clients/...

so the existing function I have is this:

function ttg_head( $style, $path ) { 

	// Modify styles on galleries/clients page
	if ($_SERVER["REQUEST_URI"] == '/backlight/client-response/'){
		echo '<style  media="screen" type="text/css">.the__copy h1 {text-align: center;}</style>';
	}

} // END

This works fine for targeting the individual pages, however targeting the pages below is testing!

I haven't been able to successfully modify the galleries function to get it to work, I'm obviously missing something simple.

Any suggestions Daniel?

lofty · 2016-07-26 16:29:22

NO Wait!

Posted too soon, whilst I was posting and pasting in the code section I spotted my schoolboy error.

Daniel you're a genius! The code works very well indeed

Thank you very much, I've learned a new trick.......

Community @ The Turning Gate

#1 2016-07-21 17:51:51

CRG Login, Logout Page Formatting

#2 2016-07-21 22:38:46

Re: CRG Login, Logout Page Formatting

#3 2016-07-21 22:54:16

Re: CRG Login, Logout Page Formatting

#4 2016-07-21 23:18:22

Re: CRG Login, Logout Page Formatting

#5 2016-07-22 01:04:08

Re: CRG Login, Logout Page Formatting

#6 2016-07-22 01:38:18

Re: CRG Login, Logout Page Formatting

#7 2016-07-22 16:55:32

Re: CRG Login, Logout Page Formatting

#8 2016-07-23 01:35:36

Re: CRG Login, Logout Page Formatting

#9 2016-07-23 01:57:06

Re: CRG Login, Logout Page Formatting

#10 2016-07-23 02:56:19

Re: CRG Login, Logout Page Formatting

#11 2016-07-25 17:28:37

Re: CRG Login, Logout Page Formatting

#12 2016-07-26 00:08:55

Re: CRG Login, Logout Page Formatting

#13 2016-07-26 16:24:07

Re: CRG Login, Logout Page Formatting

#14 2016-07-26 16:29:22

Re: CRG Login, Logout Page Formatting

Board footer