Topic-icon Move user Avatar to log out button row

Active Subscriptions:

None
6 years 9 months ago - 6 years 9 months ago #62083 by greoco
First off I have used your sclogin for several years and just installed the JFB connect in my updated site. Great instructions and so many options and combination of methods. The process is detailed and organized wonderful. I have minimal development skills and found this easy to follow . I was going to use the Jomsocial - Facebook utility that came with my JS product but it seemed to have too many user issues. Thanks for the great product.
I wish to change the view of the horizontal sclogin module when a person is logged in. I made a new module position in my Joomlashack Wright-framework template on top of the page that is not a menu and placed your SClogin there.
1) I want the Avatar of the logged-in user to be on the same (desktop) line as the welcome note and the logout button. I like having the "you are logged in" note and user avatar image on the screen so they can see that they are truly logged into the site.
2)In mobile view I cant seem the change the text color of the welcome note and it blends into my module position background color
3)I also may need the avatar to not show up in mobile view.

I know this is a styling issue but I have been trying to make a .mod css change in custom css with no luck. I even went back to os training to refresh learn more, uf till now it has just been simple css for me. Thanks in advance. rainbowrv.com login judy judy
Last edit: 6 years 9 months ago by greoco.
The topic has been locked.
Support Specialist
6 years 9 months ago #62085 by mel
Thanks for the kind words :)

1) I want the Avatar of the logged-in user to be on the same (desktop) line as the welcome note and the logout button. I like having the "you are logged in" note and user avatar image on the screen so they can see that they are truly logged into the site.

The first block puts them all on the same line with the float. The next block just centers the text more in the middle of the avatar; if you don't like it, you can tweak that or not add it.
.sclogin #scprofile-pic {
float: left;
}
.sclogin-greeting {
padding-top: 20px;
}

2)In mobile view I cant seem the change the text color of the welcome note and it blends into my module position background color

Could you show a screenshot of what you mean? Viewing it on the mobile simulator in my browser or on my mobile phone, I'm not quite sure what you mean as the text is white and doesn't seem to blend for me.

3)I also may need the avatar to not show up in mobile view.

You can target mobile devices with CSS media queries. For instance, the following would be for tablets:
@media (min-width: 768px) and (max-width: 979px) { .sclogin #scprofile-pic { display: none; } }
This would be for phones:
@media (max-width: 767px) { .sclogin #scprofile-pic { display: none; } }

This should help get you closer to what you want, but let me know for #2

-Melissa
The topic has been locked.
Active Subscriptions:

None
6 years 9 months ago #62091 by greoco
I added the code you sent to css/custom.css and it corrected the desktop view and I also added the mobile overides to that file but no effect was felt. Should I be adding it to a new themes file or custom file in /media/sourcecoast/css/sc_bootstrap.css ? I read the themeslink you sent to Rachelle of mysybersoluitons

2)In mobile view I cant seem the change the text color of the welcome note and it blends into my module position background color
3)I also may need the avatar to not show up in mobile view.

Could you show a screenshot of what you mean? Viewing it on the mobile simulator in my browser or on my mobile phone, I'm not quite sure what you mean as the text is white and doesn't seem to blend for me.

please find the mobile shot below in firefox /android. on my firefox desktop and chrome desktop set to mobile view there is white text but in the actual mobile device view the text is dark and the image still shows up. which is probably what is throwing it back on two lines. also noted, in the actual android the button is smaller that the button on the modified desktop tool.
I am so close and excited to learn from your expert advise. so happy to find a responssive component author team
Greg
File Attachment:
The topic has been locked.
Support Specialist
6 years 9 months ago #62100 by mel
Looking at your page, it seems as if you've gotten the styles to align on one line to take effect. If you're still having trouble with that part, please let me know.

Could you try changing
@media (max-width: 767px) { .sclogin #scprofile-pic { display: none; } }
to
@media only screen and (max-device-width: 767px) { .sclogin #scprofile-pic { display: none !important; } }

Let's figure out why the avatar is not hidden before we attempt to address the text color.
The topic has been locked.
Active Subscriptions:

None
6 years 9 months ago - 6 years 9 months ago #62104 by greoco
Thanks, I change the code in css/custom.css and the avatar still appeared in mobile view
I tried
@media only screen and (max-device-width: 767px) { .sclogin #scprofile-pic { display: none !important; } }
@media only screen and (max-device-width: 767px) .sclogin #scprofile-pic { display: none !important; }

@media { .sclogin #scprofile-pic { display: none !important; }
@media .sclogin #scprofile-pic { display: none !important; }

it must have something to do with my custom template Joomlashack and bootstrap Wright framework. I see tha the default text color choice red is showing up and even the module position below is the default template color. this position is one I created for your module. they have a position below it call tool bar but it collapsed into a menu hamburger icon when in mobile view. I think I will ask over at Joomlashack there and report back, thanks for your help
Last edit: 6 years 9 months ago by greoco.
The topic has been locked.
Support Specialist
6 years 9 months ago #62108 by mel
I suggested the last changes from reading about CSS media queries and there's some behavior that's not intuitive for Android and viewing resolution on the mobile phone vs actual phone display size. But I'm actually not too familiar with the media CSS though, so talking to your template developers is probably a good step. Let us know what you find out.

-Melissa
The topic has been locked.