Change colour of login button

ncmwebmaster
Offline

Active Subscriptions:

None

11 years 5 months ago #49927 by ncmwebmaster

Change colour of login button was created by ncmwebmaster

Hi,

I have seen this article and want to create a new theme. It works okay - but it seems that the colour of the login box is maintained in the file sc_bootstrap.css.
Can I include the colour in my new themes css file or create a template override for the bootstrap file in a way or what is best practice?

Thanks,

Claus.

The topic has been locked.

mel
Offline

Support Specialist

11 years 5 months ago #49930 by mel

Replied by mel on topic Change colour of login button

Claus,

I would suggest adding them to your theme file. Taking the theme file sourcecoast.css as an example, if you scroll all the way to the bottom, you'll see a few style blocks for defining the Log In button color:

.sourcecoast .btn-primary{background-color:#46b277}

.sourcecoast .btn-primary:hover{background-color:rgba(70,178,119,0.6)}

Happy Holidays!
-Melissa

The topic has been locked.

ncmwebmaster
Offline

Active Subscriptions:

None

11 years 5 months ago #49934 by ncmwebmaster

Replied by ncmwebmaster on topic Change colour of login button

Thanks Melissa.

Unfortunately I have absolutely no experience in CSS programming language....
But following your suggestion I am now very close to what I need.
However - still the text "Register" is in a wrong colour - I want it white as the "log in" text - and also the same font.
It looks like this is set in sc_bootstrap.css and in bootstrap-default.css. Can I also change that so it is set in my custom theme file?
Have tried as you can see - but it looks like it is set after the other files are read...

Thanks,

Claus.

The topic has been locked.

mel
Offline

Support Specialist

11 years 5 months ago #49937 by mel

Replied by mel on topic Change colour of login button

You should be able to add the following block to your theme file

.sclogin a.btn{
color:#FFF !important;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: normal;
}

Specifying the .sclogin class to the button helps to make the CSS more specific, and have the styles take effect. Because the bootstrap-default css file has the color as important, you also have to mark it as important in the above style block.

I think this should get you there, but let me know if you still have issues after adding the above.

-Melissa

The topic has been locked.

ncmwebmaster
Offline

Active Subscriptions:

None

11 years 5 months ago #49941 by ncmwebmaster

Replied by ncmwebmaster on topic Change colour of login button

Melissa, sure it works. Thanks a lot.
Can I also get rid of the shadow for the register text so it will looks like the log in text?

The topic has been locked.

mel
Offline

Support Specialist

11 years 5 months ago #49943 by mel

Replied by mel on topic Change colour of login button

This will probably just be setting the text-shadow property to none.

The topic has been locked.

ncmwebmaster
Offline

Active Subscriptions:

None

11 years 5 months ago #49953 by ncmwebmaster

Replied by ncmwebmaster on topic Change colour of login button

Exactly

Thanks again.

The topic has been locked.

mel
Offline

Support Specialist

11 years 5 months ago #49962 by mel

Replied by mel on topic Change colour of login button

Glad we could help! If you need anything else, just let us know.

Finally, if you haven't already, please consider leaving a rating and review on the Joomla Extension Directory for JFBConnect or our support. It's certainly not required, but very, very appreciated:
extensions.joomla.org/extensions/extensi...l-display/jfbconnect

Thanks!

The topic has been locked.

Start
Prev
1
Next
End

SourceCoast Login

Change colour of login button