Log in | Register
  1. Forum
  3. Non-Commercial Extensions
  5. SCLogin Enhanced Login
  7. How to set the size and colours of the Profile Button?

Topic-icon How to set the size and colours of the Profile Button?

Active Subscriptions:

None
2 years 4 months ago #67701 by davidunwin
We have started using the option in SClogin to display a profile menu for the logged in user. It works all fine but I would like to change the colours of the button backgrouns and text and adjust the size. 
At the moment the Menu button seems to take the background colour from our template, but not the text. Also when you hover over the button the colours do not coincide with the template colours( See the screen shot which shows the colours of our standard button and the button for the menu.) So,  I assume the button is getting the colours from some other CSS, But I can't find the css for the button. 
Can someome point me in the right direction on where to change/overide the css? 
 
Attachments:
The topic has been locked.
Support Specialist
2 years 4 months ago - 2 years 4 months ago #67702 by mel
The style comes from /media/sourcecoast/themes/sclogin/<THEME_SELECTED>.css. In default.css in that directory, the link that's setting the text color is at 104 for the element .scuser-menu a.dropdown-toggle

You can target the text color with CSS like the following:
.scuser-menu a.dropdown-toggle {
color: #FFF;
}

The size should be grabbing the style from the .btn class in your template. If you provide a link to see the SCLogin in action, we can suggest a style change for the size.

We'd suggest making your own theme to override the styles (as described here ).

-Melissa
Last edit: 2 years 4 months ago by mel.
The following user(s) said Thank You: davidunwin
The topic has been locked.
Active Subscriptions:

None
2 years 4 months ago #67703 by davidunwin
Hi Melissa,
First of thanks for helping me so much, espcially with a module that is FREE to use, I very much appreciate the help you are giving for free,
I made the change you suggested to the css in the theme (We are using our own to avoid any update issues with SC login).
I have one more request. When we 'hover' over the menu button the back ground is grey and the text colour is now white (which I assume is picked up from my change to my theme css. see screen shot 
Where can I change the colours for the Hover. I can't where it is in our CSS (I am not a CSS expert by the way).
Thanks again..... David

 
Attachments:
The topic has been locked.
Support Specialist
2 years 4 months ago #67704 by mel
You target the hover action with the :hover style. On my test site with one of the built in templates, there's a gradient on the btn elements, so you may need a line like the second one for background image - You may or may not need this second style for your template.
.scuser-menu a.dropdown-toggle:hover {
    background-color: YOURCOLOR;
    background-image: linear-gradient(to bottom,#fff,YOURCOLOR);
}

If you're in Chrome or a similar browser, there are developer tools where you can inspect the elements on the page. If you select a regular button, you should be able to see what CSS is being applied. Once selected, then you can also select the :hover attribute. It helps to make sure you copy the same color values as other pieces on your website.

-Melissa
The following user(s) said Thank You: davidunwin
The topic has been locked.
Active Subscriptions:

None
2 years 4 months ago #67705 by davidunwin
Hi Melisa,
Thanks so much for the quick resonse.
I will try this early next week and respond.
KInd regards
David
The topic has been locked.
Active Subscriptions:

None
2 years 4 months ago #67707 by davidunwin
Hi Melisa,
The CSS code you provided works fine.
Thank you again for all your help.
Kind regards
David
The topic has been locked.
  1. Forum
  3. Non-Commercial Extensions
  5. SCLogin Enhanced Login
  7. How to set the size and colours of the Profile Button?
From the Blog
Facebook | Twitter | LinkedIn | Blog RSS