I am using the standard theme... how can I style the buttons? I want to change them from looking like this:
To something like this (ignore the wording change - I mean the look of the button):
Any tips on where to add the code to do this would be great! Thank you!!
(Edited by Mary Evans - Added [SOLVED - Non Bootstrap] perfix to subject - original submission Wednesday, 11 September 2013, 7:53 AM)
Unfortunately I can't see the images, so if you could repost with them as attachments to see if they show then (unless its a firewall issue at work)? We might be able to help more easily then
But the first comment would be make sure you clone the theme first - you should not be making changes in core themes as they will be everwritten when you upgrade and could impact other themes that use standard as a parent.
You can also try identifying the code you need using firebug.
Richard
Hi Richard, thank you for your reply. I have cloned the standard theme and will make changes in the clone copy, not the original.
The real thing I need to know is which file in the theme can I edit to style the buttons? The theme has several style sheets and I am not sure which one to edit to style the buttons.
I have added a pic to the attachments of how I want the buttons to look.
Many thanks!
Hi John. Thanks for that - I could see them at home so I think it was just a work firewall issue (not the first time and not just on Moodle!), but Mary had already given you an answer
If you use firebug on firefox (or the developer tools on other browsers it will tell you where the existing css is. If that is in your existing theme you can edit it there (that will be a css file in the styles folder of your theme). If the original style is in a parent theme or in core code (such as yui styles), then you can safely add the selectors and rules to one of the style sheets in your clone of the theme - in the case of a clone of standard, I would probably put it right at the end of mynewtheme/style/core.css
Richard
Thank you both Richard (wow - you checked from home! Thank you!) and Mary. I will give what you say a go and let you know how it goes. Have a great weekend!
Hi Jon,
Just in case you are not aware, there is a button tag which styles itself via the browser just like
Cheers Mary
John, I do most of my checking on here from home
Moodle for my university is my day job, Moodle for the community and the forums is my hobby (or one of them anyway! - as well as being how I got my day job ) Occasionally I get chance to check into the forums during the day, but to spend any constructive time on anything, that usually has to be done in my spare time at home. I'm sure I'm far from alone among the community here like that!
Hi,
Styling a text link in Moodle to look like a button depends on how it is coded in the first place. Generally the 'input' type such as 'Post to forum' should already look like a button which is created by the user agent CSS for the browser you happen to be using. I use FireFox and the 'Post to forum' button in Moodle looks like the type of button you are looking to create, the CSS for which is as follows:
Cheers
Mary
Thank you so much for your response Mary
You are right in Firefox the buttons look ok, but not in IE, Chrome or Safari.
In answer to your questions:
Thank you for the code snippet.
Which file in the theme can I edit to style the buttons? The theme has several style sheets and I am not sure which one to edit to style the buttons.
Again, thank you soooo much!!
Hi
You can add the CSS to whichever stylesheet is in your theme. It matters not...just add it to the end of one of them.
Cheers
Mary
Hi Mary
I add the style code as shown below to the end of 'core.css' file, but the buttons still have no style to them.
Do you have any ideas on why this isn't working?
Thank you!
.button, input[type="reset"], input[type="button"], input[type="submit"] {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
-webkit-border-top-left-radius:6px;
-moz-border-radius-topleft:6px;
border-top-left-radius:6px;
-webkit-border-top-right-radius:6px;
-moz-border-radius-topright:6px;
border-top-right-radius:6px;
-webkit-border-bottom-right-radius:6px;
-moz-border-radius-bottomright:6px;
border-bottom-right-radius:6px;
-webkit-border-bottom-left-radius:6px;
-moz-border-radius-bottomleft:6px;
border-bottom-left-radius:6px;
text-indent:0;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
font-style:normal;
height:50px;
line-height:50px;
width:100px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ffffff;
}
.button, input[type="reset"], input[type="button"], input[type="submit"]:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}
.button, input[type="reset"], input[type="button"], input[type="submit"]:active {
position:relative;
top:1px;
}
You need to enable Theme Designer Mode
IT WORKS!!! MARY I LOVE YOU!! THANK YOU SOOOOOO MUCH!
This is an enormous stress relief - thank you!!
Hi, Mary -
I, too, am on a quest for better buttons in Moodle (using 2.5, focusing on the buttons in all activities of type=lesson). I have gone the CSS route and was able to put in all of the background images, colors, borders, etc. that I could possibly want. The only problem is that I don't want all [input type=submit] buttons to be themed that way. So, I started targeting the buttons by [value={Button Text}]. That was great, though I don't like the option given that it doesn't scale well as I add new buttons with new text (or future course developers in my program make new courses). I would like to explicitly focus on the buttons within lessons without having to enter all the possible button text options into a stylesheet (and risk there being overlap with some other button of the same input type and value and mangling its styling unintentionally).
There are two questions, really:
I am new to Moodle but have been playing with theming in Drupal for a while, having done some development work for personal and work projects in that world. I use Chrome with developer tools and Firefox with Firebug for poking around at the output of Moodle, and am slowly wrestling through the documentation. I am still trying to wrap my head around the Moodle way of doing things, and just haven't had the (uninterrupted) time I need to fully grok what I am doing. Unfortunately, my Moodle project is a side gig, so I can't dedicate as much time to it as I would like.
A quick help on questions 1 & 2 would be swell!
Moodlin' about,
Garret
Hi Garret,
Sorry for the delay in getting back to you, I have been away and just getting back into all the activity in the forums over the last week.
With regards Q1 & Q2
Q1. Try it and see if it works, if it doesn't then try adding the body ID found in the body tag in the source code for the page. For example the body tag id for the forum post as I write this is #page-mod-forum-post in CSS speak. So in a Lesson it will probably be something like #page-mod-lesson-view depending on what page the button is on.
Q2. Not sure as I am not that familiar with all the areas in Moodle, but if there is a renderer.php for mod/lesson then you can create a custom renderers.php file where you can add all your changes. In which case you need to read up on this sort of thing which you will find HERE
Moodle is changing and I too have a hard time keeping up.
You might like to look at the Tiny Bootstrap Project as that has some renderers that I added which change the way some buttons display, on a global scale so to speak, using renderers.
Hope this helps?
Mary
Hello Mary
I noticed that you are the resident expert on styling themes and buttons in Moodle. I have read through these forums and followed your advice for using Firebug to see the css behind an element. Well, when I inspect the login button on my moodle site (http://schlags.com/schlagnet/login/index.php) I cannot figure out where the shadow is coming from. When you use Firebug to hide the background of the button, you will notice that there is a shadow behind it (see attached screenshot). However, when I look at the css coding according to Firebug, I don't see anything related to what is behind the button. Would you be willing to please check this out and see if you can determine where the shadow is coming from. I would really appreciate it.
Thank you!
Paul
Hi Paul,
It's a border...might even be a 3D one...I need to check.
What theme are you using?
Will take a look at your site...
Cheers
Mary
It is a border, as Mary suggests
Firebug is not showing it, but Chrome Developer tools give
input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
border:2px outset buttonface;
}
as coming from the user agent stylesheet, rather than the theme (I've left out the other rules that aren't related to the border).
So you can override this in your theme with something like
#login input[type="submit"] {border:solid 2px red;}
Changing the border type, size and colour to your needs.
Hope that helps
Richard
Thank you so much! I was able to get rid of the shadow on the login button with:
input[type="submit"] {border:0 none!important;}
I did this because I wanted the shadow removed from all buttons on the site.
I appreciate your help! Much appreciated!
Dr. Schlag
Great...
Cheers
Mary
Hi Paul,
The style is coming from the User Agent form.css.
It was a 3D shadow as I had suspected...
border: 2px outset threedlightshadow;
To override it just add...
#loginbtn input[type="submit"] { border: 0 none;}
That should fix it.
Just so you know the actual styles come from the BootstrapBase theme's LESS files.
called from Moodle LESS files ...
https://github.com/lazydaisy/moodle/blob/master/theme/bootstrapbase/less/moodle/buttons.less#L66-L79
Hope this helps?
Mary
Mary,
I don't think the styles are coming from bootstrapbase less as the theme in use on that site is darkb which is not a bootstrap theme, and bootstrapbase css would show up as coming from there, with those css rules, whereas this shows as coming from the user agent with different rules to those in bootstrapbase less, not the theme styles.
R
Hi Richard,
I must admit I missed checking out the theme, and just assumed me being so Bootstrap oriented and knowing lots about those BS2 button styles as it wasn't that long ago I was working on that LESS file.
Anyway at least the main part of the CSS I posted seems to have done the trick.
I noticed you wrote #login as the ID where in actual fact it is as I had written it #loginbtn which in the end was not needed as Paul explained.
Cheers
Mary
Ah - the #login was from the form id, but as you quite rightly say, #loginbtn would have been better as its more specific on that particular button only
R