Well, the docker clearly has to be "on the top" because it does not integrate to the rest of the template. I think it would look terrible to have a menu "above" the docker.
As the docker now is working on my main page (http://www.nlp-deutschland.de) we can solve it there.
Can you try apply this following CSS block code into your current template custom css file.
#es.es-docker {
position: absolute !important;
}
Is it possible to
- move the icons for messages and notifications to the right? Users are used to them on the right because this is where they are on facebook
- make the home-icon a little bit larger? It seems like it is smaller then all other icons, makes it difficult to navigate.
Currently that was not possible to move those system icon to right position, but you can modify this from this file
JoomlaFolder/plugins/system/docker/themes/default.php , perhaps you can try download latest version of Docker from
https://stackideas.com/apps/item/3336-docker then update on your site.
Once you updated, then try download my attached file and replace into this same file location what i mentioned at above.
Can you try apply this following CSS block code into your current template custom css file for make that home icon show a little big larger.
#es.es-docker .fa.fa-home {
font-size: 19px !important;
}
The docker simply does not look organized in terms of design.
When logged out, from the middle: Two large input-fields with icons and yellow background, the a smaller (but still large) blue button, then a word, then the facebook-button, then a line, then a word. It feels like totally mixed up.
I am trying to somehow make it smoother. Turning off the search should help. Maybe the "Register"-Link should have the same style then the Login-Button, could look more aligned.
It feels just like all the different colors and all the different link/button-styles are way to wild. When activating Facebook-Login, Google-Login and Twitter-Login, it´s colorfull like a kindergarden. Maybe a way would be to grey out all of the social-login-buttons and simply give them color only on hover.
Just some thoughts ...
The fields for name and password can be much smaller also.
But I would even prefer more if the login would be a popup instead of the way it is now.
If the login/register-Button would be a popup, all co uld be much more aligned.
1. Button for login
2. Button for registering
3. Button for Facebook
4. Button for Google
5. Button for Twitter
This would be five buttons, all in the same size, would look much more calm and smoother.
Thanks for your input, perhaps you can request this on our forum here
https://stackideas.com/forums/easysocial/feature-requests-2 , we will see if there a lot of user request to change this `login` and `register` button same style with social button, we will consider change this styling in the future version.
By the way, it seems like you using jfbconnect populate those social button on the docker area, perhaps you can try apply following css and see how it goes.
#es.es-docker .docker-login-social {
opacity: 0.5;
}
#es.es-docker .docker-login-social:hover {
opacity: 1.0;
}
The Facebook-Login-Button is also not really self-explaining. For a new user it is not obvious that he can register or log-in with the facebook-button, this button could also lead to facebook or be a simple like-button.
So it would make sense to also have the button in the registering-page itself. How can this be done?
You can apply following code into this following file to populate those social icon on the registration page.
JoomlaFolder/components/com_easysocial/themes/wireframe/registration/steps/default.php
<?php
$sso = ES::sso();
if ($sso->isEnabled('facebook') || $sso->isEnabled('twitter')) { ?>
<div class="es-signin-social">
<p class="line">
<b><?php echo JText::_('Login via Social Network');?></b>
</p>
<?php if ($sso->isEnabled('facebook')) { ?>
<div>
<?php echo $sso->getLoginButton('facebook'); ?>
</div>
<?php } ?>
<?php if ($sso->isEnabled('twitter')) { ?>
<div class="t-lg-mt--md">
<?php echo $sso->getLoginButton('twitter'); ?>
</div>
<?php } ?>
</div>
<?php } ?>
You can check my screenshot here :
http://take.ms/rYtpv
By the way: On Mobile it´s the opposide: The docker is hidden under the main menu.
However, on the mobile-view the login is much, much nicer. It´s a popup with the Social-Network-Buttons inside of the popup. This looks much nicer and clearer.
How can I use the login/register-popup which is on the mobile-view also for the desktop-appereance of the docker?
Currently that was not possible to switch to use dropdown on desktop view.
Oh, and I just realized: There are two essential things missing on the mobile-view of the docker:
1. Register-Button
2. Forgot-Password-Link
They are essential, so they would definitely need to get into that popup!
Thanks for reported, I will log this into our issue tracker.