Move user Avatar to log out button row

Move user Avatar to log out button row

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

Edited by: greoco - Jun-28-17 18:17:00
greoco
Gregory
useravatar
Offline
7 Posts
Active Subscriptions:

None
Administrator has disabled public posting. Please login or register in order to proceed.

Re: Move user Avatar to log out button row

Thanks for the kind words current/smile

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.

Code:

.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:

Code:

@media (min-width: 768px) and (max-width: 979px) { .sclogin #scprofile-pic { display: none; } }

This would be for phones:

Code:

@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

Want to stay up-to-date on new releases and development efforts?
Follow us on Twitter @sourcecoast and @mandreae

mel
Melissa
useravatar
Offline
3603 Posts
Website 
Support Specialist
Administrator has disabled public posting. Please login or register in order to proceed.

Re: Move user Avatar to log out button row

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
https://www.sourcecoast.com/images/agorapro/attachments/32249/mini_fileCUsersgregDownloadsScreenshot-2017-06-28-23-40-52.png

greoco
Gregory
useravatar
Offline
7 Posts
Active Subscriptions:

None
Administrator has disabled public posting. Please login or register in order to proceed.

Re: Move user Avatar to log out button row

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

Code:

@media (max-width: 767px) { .sclogin #scprofile-pic { display: none; } }

to

Code:

@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.

Want to stay up-to-date on new releases and development efforts?
Follow us on Twitter @sourcecoast and @mandreae

mel
Melissa
useravatar
Offline
3603 Posts
Website 
Support Specialist
Administrator has disabled public posting. Please login or register in order to proceed.

Re: Move user Avatar to log out button row

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

Edited by: greoco - Jun-29-17 22:50:41
greoco
Gregory
useravatar
Offline
7 Posts
Active Subscriptions:

None
Administrator has disabled public posting. Please login or register in order to proceed.

Re: Move user Avatar to log out button row

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

Want to stay up-to-date on new releases and development efforts?
Follow us on Twitter @sourcecoast and @mandreae

mel
Melissa
useravatar
Offline
3603 Posts
Website 
Support Specialist
Administrator has disabled public posting. Please login or register in order to proceed.
There are 0 guests also viewing this topic
There are 0 users also viewing this topic

Board Info

Board Stats
 
Total Topics:
11667
Total Polls:
0
Total Posts:
48986
Posts today:
2
User Info
 
Total Users:
47792
Newest User:
romjat
Members Online:
1
Guests Online:
750

Online: 
zahnd
Social Stream
Refer and Earn

Like our extensions? You're not alone! That's why they're used on tens of thousands of websites. Now you can earn 20% of any sale you refer to SourceCoast.com.

We provide excellent documentation, well laid out sales pages and great support. All you need to do is spread the word and we'll take care of the rest.

Learn About Our Affiliate Program