Hello World - CSS and JS ?

Kevin B Posted in Technical Support 5 years ago

Hi there
Downloaded and installed "Hello World" successfully.
Code looks quite self explanatory, but it doesn't seem to be loading any CSS in the headers?

I've only added a basic: body { background-color: #ff0000; } to both:

css\helloworld.php
css\standalone\helloworld.php

I wasn't sure if it was supposed to be encapsulated in:

.hello-world-css {
 //css goes here
}

So tried it inside and out as below:

.hello-world-css {
 //css goes here
 body {
	background-color: #ff0000;
 }
}
body {
	background-color: #ff0000;
}

But the localhost\hello only shows the text "Hello World". As you can see from the attached, the <head> tags are not populated with anything?

Screenshot of Hello World unstyled

Latest version of OSSN and downloaded component from this site.

My aim is to have a completely new page running (without any of the system bars / menus / styling etc) with its own styling / css / java etc. But remain within the OSSN environment so I can fetch user names and send messages etc.

This was just to see how to integrate my own stuff.

Replies
gb Kevin B Replied 5 years ago

I think I can help reproduce the issue.

Starting with a completely blank hello_custom_page.php - I add the following:

<?php
    $chatUser = ossn_loggedin_user();
    echo print_r($chatUser,true);
?>

When I am logged in, this captures the data and prints it out fine.

If I am not logged in, it automatically redirects me to the login page (although it doesn't include the referrer URL, so I have to manually visit the URL again :( )

So far so good.

However, if I replace hello_custom_page.php with the following:

<?php
	echo ossn_loggedin_user()->iconURL()->small;
?>

When logged in I get:

http://10.48.1.28/avatar/admin/small/22f64f3a95d71a789227ec734b4c6910.jpeg

But if I am not logged in, I get:

A system error has occurred. Please try again later. You may email the details of this error to the system 
administrator at {email obscured}.

#1604063031|JCEETJTGKC6VJR83BLM3NGRUGS

So it looks like it is trying and failing to access data instead of being redirected to the logon.

In regards to your suggestion of adding the ossn_isLoggedin() clause before registering the page, I deleted the HelloWorld component, installed it from the 2.1 download and I just get a 404 error when not logged on.

I appreciate your assistance guys, thanks again.

Kev

German Michael Zülsdorff Replied 5 years ago

First of all: I can't reproduce your issue.
For me - as long as hello_custom_template is NOT part of the allowed pages array - Private Network correctly displays the You are required to login before viewing that page message.

Next: Why would you want to first allow calling a restricted page and add some extra redirecting code to that page to keep unauthorized users off? I simply wouldn't allow to call that page at all and restrict the registration of that page to logged-in users like

if (ossn_isLoggedin()) { 
  ossn_register_page('hello_custom_template', 'hello_custom_template_page');
}

in the com file.

Finally: Adding your css like that is basically okay but needs a complete URL (same way as Arsalan is addressing the favicon)

gb Kevin B Replied 5 years ago

That works great thank you. I'm ploughing through and making good progress thanks :)

Two little queries:

  1. The "Private Network" component doesn't seem to work on the custom page. It tries to render the page even though i'm not logged in. Is there something needed in the "Hello World" component to allow the "Private Network" to detect the access attempt and redirect you to the logon? Or should I just add a "if (!loggedIn)" redirect manually to the page?

2 I can't seem to find a better way to load the new external CSS, and have done the following:

<link rel="stylesheet" href="components/HelloWorld/plugins/default/css/custom.css">

Is there a better way to do this?

Thanks again for the help, it's appreciated.

gb Kevin B Replied 5 years ago

Wow, that was a lightning fast reply! Thank you :)

I'll take a look at the newer component.

Thank you

Indonesian Arsalan Shah Replied 5 years ago
  1. It is because the hello world is not using OSSN templating engine and you also doesn't want it.
  2. Nope the default ossn_load css and extend view is for ossn templating engine.

I have updated hello world component added a example for custom html page with your own css js.

gb Kevin B Replied 5 years ago

Just discovered that the CSS (both files) is applied on the main site.

So the two queries are:

  1. Hello World page is not populating the <head> tag, therefore not applying any CSS styles or loading bootstrap etc.

  2. Standalone CSS is actually applying to the main site - shouldn't this only apply to the Hello World page?

Premium Version

Due to the many requests in the past for additonal features and components we have decided to develope a premium version. Features like Hashtags, Videos, Polls, Events, Stories, Link Preview, etc included in it.

$199 (Life Time)
Learn More

Other Questions