Hello,
I just installed Moodle and the theme is aligned left instead of center. I checked all the settings but so far didn't find a solution. Anyone a idea how to solve this? Website url: http://ec.onepanish.org
(Edited by Mary Evans - added SOLVED to subject line - original submission Tuesday, 13 October 2015, 1:30 AM)
What version of Moodle?
What theme?
Your url link isn't working, so can't see the website, so could you send a screenshot please?
Hello,
Thanks for your respond.
This is a new installation with version 2.9. It appears in all themes but for now I selected the standard clean template.
This is the correct url:
http://ec.onespanish.org/
Hi Rene,
Ok, I've had a look too and after much head scratching, there is a 'big' problem. Ok, Moodle adds a version of the site URL as a 'classname' to the list of 'class's on the 'body' tag. In this case it is 'ec-onespanish-org', unfortunately it has the word 'span' in it. This is being picked up by the Bootstrap (not Moodle) CSS as one of the 'span' type CSS declarations i.e. '[class*="span"]' and thus it is applying this rule:
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 30px;
}type thing. This is causing the width calculation of the page to be wrongly calculated (because of the 'float').
At the moment, the only solutions I can see are:
Probably the third option is the best. If you're up to changing PHP code then I'll find it.
Cheers,
Gareth
Great catch Gareth!
Hi Gareth,
Thanks for this information. I'm sure I couldn't find that myself. I will try to fix this and will give a update later.
Hi Gareth,
In combination with your findings and the solution from Mary the problem is solved. Thanks for the support.
@all: Impressed by the fast responses and support I get here, thanks.
Thank you Rene.
Glad that CSS fixed it.
Cheers
Mary
Following on from what Gareth has found.
Try adding this...
body.ec-onespanish-org { float: none; margin-left: 0; min-height: 100%}
to the CSS area in Clean theme's custom settings page.
Site Administration > Appearance > Themes > Clean
I think you will find it will fix the problem.
Cheers
Mary
Hi Mary,
Thanks, I will try that.
Hi Mary,
That worked, thanks a lot.
Hi all,
I updated my theme with a new version and the problem reappears.
Checked the custom css in the theme and the change is still there:
This the complete custom css in my theme:
body.ec-onespanish-org { float: none; margin-left: 0; min-height: 100%}
.video-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.video-container iframe, .video-container object, .video-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.tooltip {
display: inline;
position: relative;
}
.tooltip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}
.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
Any idea what is the cause of this?
Hi Rene,
I've checked your site and the custom CSS is not in the combined generated 'all' file: http://ec.onespanish.org/theme/styles.php/gourmet/1450897001/all. Thus the CSS:
body.ec-onespanish-org { float: none; margin-left: 0; min-height: 100%}is not there to solve the problem. Therefore the theme is faulty in some way and not serving the custom CSS. Is it defined in a file or via the user interface? If the former, look in the config.php file of the theme and make sure it is included (https://docs.moodle.org/dev/Themes_overview#Basic_theme_config_example and below for '$THEME->sheets'). If it is the latter, contact the theme designer and ask them why.
Gareth
P.S.
An oddity.
Why are there BS2.3.2 grid definitions in the theme:
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}which is causing the issue when the mark-up has BS3 grid classes?
Contact the theme designers!
Thanks,
Rene
Well, the website for it says it has bootstrapbase as a parent - and if I remember correctly (and if it is the same theme) this was one of the first themes that was ripped off built from Julian's earliest versions of Essential (to the extent that he built essential-gourmet as a response to the fact that the theme had been built without the GPL credits, don't know if that is now corrected as I'm not prepared to pay nearly $140 for something essentially available for free in the community database)
- that makes it a Bootstrap2 theme and there shouldn't be BS3 markup in there unless the theme designers have been cherry picking bits and adding bits of BS3 css to their styles, in which case it will be a mish-mash of both and a potential nightmare to maintain or to make use of BS in the user content as users wont know whether to look up BS2 or BS3 details.
The JS is BS3.3.6: http://ec.onespanish.org/theme/jquery.php/theme_gourmet/bootstrap_plugins/bootstrap.js. And there there is both the BS2.3.2 and BS3 grid system styles in the CSS.
Hello Richard,
Thanks for your respond. I'm just a moodle user and from what I understood from the first part of your comment is that you are not happy with the way the designers build it and that they used code from a other theme without giving credits to the original programmer. Am i correct?
I don't know enough about the technical part to give a judgment about this.
So far I didn't have much problems with this theme and they are sending on a regular bases updates.
I have contacted the designers and they are looking now.Let's see how they are going to solve/explain this.
Rene,
You have paid for a commercial theme and so long as you are happy with the support they are providing that is what matters, really.
My comments were really aimed at determining whether the theme was based on BS2 or 3 and the history of the theme comes into that - and I do recall Julien being quite frustrated at the time.Thanks for the explanation, I understand your point.
Rene
Hi Gareth,
Thanks for your fast respond.
The css is defined in the user interface of the theme. I understand from your comments that these changes are not saved correct.
I will contact the designers of this theme and give a update what is there respond.
Rene
I received a new version of the theme from the designers and an advice to put this in custom css:
That fixed the problem.
Shouldn't the @media have a css selector to apply to within the @media call?
Yes!
Do I need to change that, and what exactly?
[class*="span"] {
float: none;
min-height: inherit;
margin-left: inherit;
}
@media (min-width: 1200px) {
[class*="span"] {
float: none;
min-height: inherit;
margin-left: inherit;
}
}Do the makers of the theme actually know what they are doing?
Additional.
Looks like they have fixed the custom CSS issue and now Mary's solution is working. Which to be honest is the better one and their solution is global and not specific enough to the problem. Therefore remove their solution and keep Mary's. Because.....
Hi Gareth,
You're right, I removed their code from the css and it is still working.
About your question if they know what they are doing, I think you can better judge that than me. I do not have enough knowledge about this to make a reliable judgment. Maybe the information you gave me in your first reaction helped them to repair the error in the theme.
From a user of Moodle point of view, with not so much knowledge about the code, the response on my question was very fast from you but also from the designers of this theme. It also resulted in a solution.
Your comments and also the ones from Richard gives me some worries if I am on the right track with this theme. But we are to far in the configuration to change it to a other theme. This theme also offers some extra features which are very useful to use in courses.
Thanks again for your very fast support and the clear explanation.
Rene