I would like to place our corporate name immediately to the right and in line with our logo that loads in the More theme. I have found a place to insert HTML text in the head of a page but this displays immediately above and to the left of our logo. Is there a reference document somewhere that outline how this is to be done? I can speculate that css is involved somewhere but I have no idea where that sort of programming would go.
I have this html added to 'Additional HTML' Within Head section:
<h1 id=hll_el_header>Harte & Lyne Limited - eLearning</h1>
I have a png logo 133x40 px added to the'More' theme
I wish to position a header text immediately to the right of the logo. I have tried this css, things commented out I have already tried:
#hll_el_header {
position:absolute;
top:10;
/* left:200; */
/* float:right; */
right:200;
width:600px;
}
The header text has moved down from the top but it refuses to move in from the left hand edge of the window. What do I have to do to have this work as I imagine?
#########
##LOGO### Header Text Here
#########
If that is an exact copy of the heading HTML mark-up then that is where you are going wrong.
You missed the punctuation around the <id="hll_el_header">
So your HTML h1 header tag should look like this...
<h1 id="hll_el_header">Harte & Lyne Limited - eLearning</h1>
Then the CSS you added should work.
Adding the quote marks does not change the observed behaviour:
Extra HTML
<h1 id="hll_el_header">Harte & Lyne Limited - eLearning</h1>
MORE Custom CSS
a.logo {
height: 90px;
}
#hll_el_header {
position:absolute;
top:10;
/* left:200; */
/* float:right; */
right:200;
width:600px;
}
Results in the header overlaying the logo with the Header left justified against the window.
more/style/custom.css has this:/* Custom CSS
-------------------------*/
a.logo {
background: url(setting:logo) no-repeat 0 0;
display: block;
float: left;
height: 75px;
margin: 0;
padding: 0;
width: 100%;
}
.dir-rtl a.logo {
background: url(setting:logo) no-repeat 100% 0;
display: block;
float: right;
}
/* Custom CSS Settings
-------------------------*/
I am thinking that maybe
width: 100%;has something to do with my problem. I only know enough css to recognize it when I see it. So I have no clue as how to proceed from here.
This seems, to me, to be the generated html at issue:
. . . <h1 id="hll_el_header">Harte & Lyne Limited - eLearning</h1>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>
<header id="page-header" class="clearfix"> <a title="Home"
class="logo"
href="https://moodle.internal.harte-lyne.ca"></a>
<div id="page-navbar" class="clearfix"> <nav class="breadcrumb-nav">
<span class="accesshide">Page path</span>
<ul class="breadcrumb">
<li><a href="https://moodle.internal.harte-lyne.ca/">Home
</a>
</li>
</ul>
</nav> <div class="breadcrumb-button"></div> </div> <div id="course-header"></div> </header>
P.S.
The editing timer got me whilst fixing this. The main thing is that i have adjusted my css to use left:200; and right:200; (with several other values in place of 200) separately and nothing moves the h1. element from the extreme left hand side of the page.
I'm sorry to say you are going about this the wrong way.
if I were you I would remove at css you are adding and then, if you haven't done so turn on Theme Designer Mode
This will allow you to see the changes you are making.
With all the header CSS removed can you take a screen shot of the h1header so I can see what your site looks like In relation to the heading and the logo.
Thanks
Mary
No custom css screenshot attached.
Turning on or off the theme designer setting has no apparent effect. It does not appear that custom css is cached.
Ok...the problem is the h1header you added into the head of the page which is reserved for code or meta links etc.
what you need to do is add it after the logo Like so...
<header id="page-header" class="clearfix"> <a title="Home"class="logo" href="https://moodle.internal.harte-lyne.ca"></a> <h1 id="hll_el_header">Harte & Lyne Limited - eLearning</h1
Then you can add your css...
h1#hll_el_header { margin:0; padding:0;
position:relative; top:-20px; left:200px;}
This should have the effect of pulling up the heading and pushing it from the left 200px. The top value may need to be increased or reduced depending on where you want it to land.
When you say 'after the logo, where, exactly, in Moodle do I place this code? In custom HTML? In the Body section?
I removed the html from the "Within HEAD" textbox. And I added the code you kindly provided in the "When BODY is Opened" section. I then changed the MORE theme custom css section to the the css code you provided. I also set the theme setting to designer mode. The result is not what I wish. A screenshot is provided below. As you can see I now get two logos and two headers on each and every page. The upper one is close to what I am seeking and I am sure that a little tweaking of the css will get the alignment right. The duplicated header is not going to work though.
Sorry if my instructions cause you to be confused, but I was assuming you know about HTML otherwise you would not have known about adding the H1 header and stuff.
OK let's start from the beginning again>
This is where you were up to...and this is what you posted a few comments ago:
Where the RED highlighted line is the h1 heading in the wrong place
and the BLUE highlighted line is the Logo.
My suggestion and it is only a suggestion, was to add the h1 heading beneath the logo where I have added it here highlighted it in GREEN.
Is this clearer?
As for where it is placed with the CSS I gave you all depends on what values you used and also where you actually want it to be?
<h1 id="hll_el_header">Harte & Lyne Limited - eLearning</h1>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>
<header id="page-header" class="clearfix"> <a title="Home"
class="logo"
href="https://moodle.internal.harte-lyne.ca"></a>
<h1 id="hll_el_header">Harte & Lyne Limited - eLearning</h1>
<div id="page-navbar" class="clearfix"> <nav class="breadcrumb-nav">
<span class="accesshide">Page path</span>
<ul class="breadcrumb">
<li><a href="https://moodle.internal.harte-lyne.ca/">Home
</a>
</li>
</ul>
</nav> <div class="breadcrumb-button"></div> </div> <div id="course-header"></div> </header>
I think we are talking at cross purposes here. I am not editing an HTML document. I am adding snippets of HTML and CSS into the text boxes provided in Moodle and the MORE theme editing interface. I understood that the h1. element was in the wrong place. But that place was the HEAD text box. And that, according to the theme, is placed at the end of the <head></head> block. I removed my code from that box per your recommendations.
Now the next box is called "When BODY is Opened" and says: "Content here will be added in to every page immediately after the opening body tag." That is where I placed your sample code. The resulting generated code is:
<body id="page-admin-setting-themesettings" class="format-site admin path-admin path-admin-setting gecko dir-ltr lang-en yui-skin-sam yui3-skin-sam moodle-internal-harte-lyne-ca pagelayout-admin course-1 context-1 two-column has-region-side-pre used-region-side-pre"><div class="skiplinks"><a class="skip" href="#maincontent">Skip to main content</a></div><script type="text/javascript"> //<![CDATA[ document.body.className += ' jsenabled'; //]]> </script><header id="page-header" class="clearfix"><a title="Home"class="logo" href="https://moodle.internal.harte-lyne.ca"></a><h1 id="hll_el_header">Harte & Lyne Limited - eLearning” immediately before. End tag had attributes." class="error error"></h1> <header role="banner" class="navbar navbar-fixed-top navbar-inverse moodle-has-zindex">
So, the first logo is displayed by that
But the second logo I believe comes from this which occurs later in the same generated page:
<div id="page" class="container-fluid"><header id="page-header" class="clearfix"><a title="Home" class="logo" href="https://moodle.internal.harte-lyne.ca"></a><div id="page-navbar" class="clearfix"><nav class="breadcrumb-nav">I have no idea how to do the first, which is evidently the code you provided, and get rid of the second, which seems generated automatically.
. . .
></form></div></div>
Now, to check whether or not I misapprehended what I read I move the code that I placed in the BODY back into the HEAD box. There is a small change but the logo is still duplicated, as is the generated code.
</script><header id="page-header" class="clearfix"><a title="Home"class="logo" href="https://moodle.internal.harte-lyne.ca"></a><h1 id="hll_el_header">Harte & Lyne Limited - eLearning” immediately before. End tag had attributes." class="error error"></h1 <meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body id="page-admin-setting-additionalhtml" class="format-site admin path-admin path-admin-setting gecko dir-ltr lang-en yui-skin-sam yui3-skin-sam moodle-internal-harte-lyne-ca pagelayout-admin course-1 context-1 two-column has-region-side-pre used-region-side-pre"><div class="skiplinks". . .
<div class="form-item clearfix" id="admin-additionalhtmlhead"><div class="form-label"><label for = "id_s__additionalhtmlhead">Within HEAD</label><span class="form-shortname">additionalhtmlhead</span></div><div class="form-setting"><div class="form-textarea" ><textarea rows="8" cols="60" id="id_s__additionalhtmlhead" name="s__additionalhtmlhead" spellcheck="true"><header id="page-header" class="clearfix"> <a title="Home"class="logo" href="https://moodle.internal.harte-lyne.ca"></a> <h1 id="hll_el_header">Harte & Lyne Limited - eLearning</h1</textarea></div><div class="form-defaultinfo">Default: Empty</div></div>I am only putting this material in once as html and the css only once in the MORE theme. So, why the code gets generated in two places I cannot say.
Ah...that explains it.
I missed the all important words here...Additional HTML which was in the comment that I read but missed it completely because I saw the missing punctuation in the heading you added there..
So how to fix all this....?
First of all remove all the CSS and HTML you have added, from wherever you have added it.
Then try the following:
ADDITIONAL HTML
ADD TO When BODY is opened:
<div id="company-header"><h1>Harte & Lyne Limited - eLearning</h1></div>
MORE THEME
ADD TO More CSS Custom settings:
#company-header { position: relative; top: 100px; left: 100px; padding: 0; margin: 0;}
#company-header h1 { color: red; font-size: 130%; line-height: 1.8; margin: 0; padding: 0;}
And see if that works?
Mary
That works. Thank you very much
Now I would like to get two more effects:
1. I would like to narrow the margin between the uppermost black bar and the top of the logo.
2. I would like to put a small amount of space below the logo and the breadcrumb block.
Looking at the generated source I believe that what I need to adjust via css is #page-header.
<div id="page" class="container-fluid">
<header id="page-header" class="clearfix">
<a title="Home" class="logo" href="https://moodle.internal.harte-lyne.ca"></a>
<div id="page-navbar" class="clearfix">
<nav class="breadcrumb-nav"><span class="accesshide">Page path</span>
But, I can live with things as they are now if the rest cannot be managed. Thank you again for your gracious help. It is much appreciated.
Providing you have not added any CSS to style the logo then all you need to do is add this...
a.logo { margin: 0; padding: 0; height: 115px; }
Here I am assuming the height of your logo is about 100px so adding 15px will make the area of the logo enough to form a gap at the bottom of about 15px. The gap at the top is only about 20px but yours looks more so looks like you have added some styles already. If you have remove them, and just add the one for the logo.
Thank you for your help. It put me on the right track. This is all of the css markup I have added to the customs css box for the More theme:
a.logo { margin: 0; padding: 0; height:90px; }
#page { position:relative; top:-55px; height:80px; }
#company-header { position: relative; top: 33px; left: 175px; padding: 2; margin: 2;}
#company-header h1 { color: #000066; font-size: 250%; line-height: 1; margin: 2; padding: 2;}
And the results are shown below:
#page should not need this CSS rules! certainly not top:-55px: or indeed Height:80; as the page envelopes quite a large area. So something is still wrong.
In an earlier comment I saw something that was an Error about a missing closinf div.
I am just wondering if something you added had a missin </div> tag?
Also, the margins and padding need eithe em or px as 2 means nothing In this context.
http://www.w3schools.com/cssref/pr_margin.asp
Cheers
Mary
The only html code I have added anywhere is in the BODY section of the Additional HTML setting and this is it (cut and pasted from the actual setting):
<div id="company-header"><h1>Harte & Lyne Limited - eLearning</h1></div>
If I change #page to #page-header then the top margin and the margin between the breadcrumb and logo are acceptable, but then the rest of the page begins too far below the breadcrumbs.
#page-header { position:relative; top:-55px; height:80px; }But modifying #page gets the exact results that I am looking for. However, you are correct in that the height: setting has no effect at all, so I have removed it. The css I am using now looks like this:
a.logo { margin: 0; padding: 0; height:90px; }
#page { position:relative; top: -55px; }
#company-header { position: relative; top: 33px; left: 175px; padding: 2px; margin: 2px;}
#company-header h1 { color: #000066; font-size: 250%; line-height: 1; margin: 2px; padding: 2px;}
This gives the results displayed above. The screenshot below is what I get using #page-heading instead.
We have also just moved to Moodle 2.8. But that had no visible impact on this issue.
OK...well I will await your return when it all goes horribly wrong somewhere and you have forgotten what you changed and where the code is.
The only changes I have made I have fully exposed here. I have not done anything whatsoever outside of the provided user interface for this theme or Moodle itself.
That may be so, James, but since lots of things hinge on IDs like page and page-header and there you are talking of changing page to page-header and wondering why there is a gap makes the mind boggle!
The fact you have so much control of the site is frightening especially as you are going about this in a hit and miss fashion.
From a design point of view it would be a lot easier if you actually cloned the More theme and made all your changes to the layout files where needed.
Anyway, at the end of the day you are the master at the helm...lets hope you don't hit choppy waters!
Cheers
Mary
I am not wondering why there is/was a gap. That was fairly self-evident even given my limited knowledge of css. The problem was that the page element was not moving up as the page-header was relocated. That indicated that somewhere in the theme css inaccessible to me the page element was being located with reference to some other element than the page-header. There was not much choice then but to modify the location of the page with respect to that, unknown, element.
I have no intention of cloning and supporting my own theme. That is like suggesting I open a garage and build a sports car because I want to add a racing stripe to the one I already own.
I now have the page headers looking as I desire. If there are future problems due to changes in the theme css layout then I will deal with those as and when they occur. I have valued your assistance greatly and I thank you very much for it. You have been extraordinarily helpful.
Here is a very good tutorial by Miriam Laidlaw who was a Moderator in this forum. You might like to take a look at it as I think It will help you with learning where to find the css for a given element in Moodle and how to customise it.
https://www.youtube.com/embed/9YbPuZhemP0?rel=0&wmode=transparent