2.7.1 How do I make the login/logout button bigger?

2.7.1 How do I make the login/logout button bigger?

by Wendi Daniels -
Number of replies: 11

I am not talking about the initial signup form. I am talking about the button that is on each page. Where do I adjust the size? I use the themes "overlay" and "Formfactor", but I don't think the answer is specifically in the theme file.

Average of ratings: -
In reply to Wendi Daniels

Re: 2.7.1 How do I make the login/logout button bigger?

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Is there a login button on every page in Overlay and Formfactor? It's a long time since we have been asked for help with the older themes.

Generally there are links in the page header and page footer but these are only links and not buttons like this for example: Login

However to make the login text bigger all you need to do is add the following to the Custom CSS box in the relevant themes.

.headermenu .login > a, .logininfo > a { font-size: 14px }

I think that should work.

I need to check this on the version of Moodle you are using as I may be missing some information regarding the 'button'

Thanks

Mary

In reply to Mary Evans

Re: 2.7.1 How do I make the login/logout button bigger?

by Wendi Daniels -
How would I make that button?
In reply to Wendi Daniels

Re: 2.7.1 How do I make the login/logout button bigger?

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi,

It is easier to do in themes that are built using Bootstrap, as the new Moodle Themes use, like Clean and More using...

<a href="#" class="btn btn-success">Login</a>

Which will produce this...

Login

More info http://getbootstrap.com/components/#btn-dropdowns

However you can do something similar in the older themes using the HTML <button></button> tag like so...

<a href="#"><button>Login</button></a>

Hope this helps?

Mary

Average of ratings: Useful (1)
In reply to Mary Evans

Re: 2.7.1 How do I make the login/logout button bigger?

by Wendi Daniels -

Which page in themes do I locate the code?

In reply to Wendi Daniels

Re: 2.7.1 How do I make the login/logout button bigger?

by Wendi Daniels -

Mary, where would I enter that code?

In reply to Wendi Daniels

Re: 2.7.1 How do I make the login/logout button bigger?

by Wendi Daniels -

I figured it out! Language pack...thank you all for being patient.


In reply to Wendi Daniels

Re: 2.7.1 How do I make the login/logout button bigger?

by Wendi Daniels -

OK, it's not going as smoothly as I thought. I am using the theme called "overlay".


Here is what I have done:

Language pack>moodle>core>login

<p><a href="http://www.(my site).com/login/index.php" class='button'>Login / Sign Up</a></p>


Language pack>moodle>core>logout

<p><a href=http://www.(my site).com/login/logout.php?sesskey=(my key) class='button'>Log Out</a></p>


Theme>Custom CSS

.button {
   border: 1px solid #ffffff;
   background: #a11e1e;
   background: -webkit-gradient(linear, left top, left bottom, from(#eb4c4c), to(#a11e1e));
   background: -webkit-linear-gradient(top, #eb4c4c, #a11e1e);
   background: -moz-linear-gradient(top, #eb4c4c, #a11e1e);
   background: -ms-linear-gradient(top, #eb4c4c, #a11e1e);
   background: -o-linear-gradient(top, #eb4c4c, #a11e1e);
   background-image: -ms-linear-gradient(top, #eb4c4c 0%, #a11e1e 100%);
   padding: 4px 8px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   text-shadow: #ffffff 0 1px 0;
   color: #ffffff;
   font-size: 16px;
   font-family: helvetica, serif;
   text-decoration: none;
   vertical-align: middle;
   }
 .button:hover {
   border: 1px solid #fafafa;
   text-shadow: #ffffff 0 1px 0;
   background: #f56767;
   background: -webkit-gradient(linear, left top, left bottom, from(#ab0000), to(#f56767));
   background: -webkit-linear-gradient(top, #ab0000, #f56767);
   background: -moz-linear-gradient(top, #ab0000, #f56767);
   background: -ms-linear-gradient(top, #ab0000, #f56767);
   background: -o-linear-gradient(top, #ab0000, #f56767);
   background-image: -ms-linear-gradient(top, #ab0000 0%, #f56767 100%);
   color: #fff;
   }
 .button:active {
   text-shadow: #ffffff 0 1px 0;
   border: 1px solid #0a3c59;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#f56767));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   background-image: -ms-linear-gradient(top, #3e779d 0%, #65a9d7 100%);
   color: #fff;
   }


**********************************************************

Here are the glitches:

1) On the login/index.php page, there was a section of the left where established people signed in, and a place on the right where new people create an account. On the left, the button they click to sign in has been altered and is not what I created, and the button I did create is above the username/password boxes, where nothing was there before.


2) The Log In and Log Out buttons are no longer on the line that they were on, but now they are one line below. For example, in the header, it used to say "you are not logged in" and it had the button next to it, and now the new button is one line below.


3) I cannot get rid of those parentheses around the login and log out buttons.



Here is the first screen shot, and I will have to send the next screen shot below, as the system says I can attach only one file.


In reply to Wendi Daniels

Re: 2.7.1 How do I make the login/logout button bigger?

by Wendi Daniels -

Here is the second screenshot...

In reply to Wendi Daniels

Re: 2.7.1 How do I make the login/logout button bigger?

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Sorry Wendi,

I should have asked you earlier which theme you are using. Now I know it is Overlay I can tell you how to add a Login button in the menu, and it is NOT by changing Moodle core Login/Logout files,

Attached to this comment is a zip file containing the following.

overlay / layout / frontpage.php
overlay / layout / general.php
overlay / config.php
overlay / renderers.php

The renderers.php is a new file that adds the login to the main menu.

The other files have been changed so these need to replace your current Overlay files with the same names.

So please make a copy of your Overlay theme first before replacing your old files with the new ones.

If you don't like the Login in the menu then you can always replace the new with your old files.

Cheers

Mary

In reply to Mary Evans

Re: 2.7.1 How do I make the login/logout button bigger?

by Wendi Daniels -

Thank you, Mary! I was wondering if we simply knew how to remove the parentheses? The code you gave me is great, but it alters the look and layout a bit, and the old layout worked  better in my case. I will sift through the code to look for differences in hopes of finding the way to remove those parentheses. If you know where to look, that would save me some time.