Hi Nigel.
As you will see I have split this discussion thread from the original because it relates to a non-core theme.
If you want to change the header by adding <img src="" /> and <p></p> it's better to define a class to the tag so that you can position it using CSS.
For example:
<p class="header-text"></p>
<img class="header-image01" src=" " alt="image />
Mary
Hi Nigel,
As Mary said, you would be better off creating new classes so that you can then style them in the style sheet.
So in the general.php you would add your new images or text (I would be more inclined to add divs rather than img and p tags, but both work) and assign them specific classes.
Then in your style sheet (or the custom CSS box in Aerie) style the position of these new elements you added to the general.php file.
OK Thanks for both of your replies. Guess I need to do some CSS learning for positioning.
OK have set a class called headertext with following attributes;
clear:both
position:absolute
Have tried using a div but no matter where i place the div the text still displayes after the heading and not on it's own line. Which attributes do I need to set to achieve this please. (Sorry newbie as far as CSS is concerned)
Hi,
OK...try this CSS...
p.headertext {
position: relative;
top: 25px;
left: 25px;
line-height: 1.2;
margin: 0;
padding: 0;
}
And here is where you need to add the paragraph in aerie/layout/general.php...
The part highlighted in YELLOW is the original XHTML/php and the part in GREEN is the paragraph of text.
<div id="page-header" class="clearfix">
<img class="sitelogo" src="<?php echo $logourl; ?>" alt="Custom logo here" />
<?php if ($hasheading) { ?>
<h1 class="headermain"><?php echo $PAGE->heading ?></h1>
<p class="headertext">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<div class="headermenu">
<?php
echo $OUTPUT->login_info();
if (!empty($PAGE->layout_options['langmenu'])) {
echo $OUTPUT->lang_menu();
}
echo $PAGE->headingmenu
?>
</div>
<?php } ?>
</div>
You can then change the values for 'top' and 'left' until it sits where you want it to.
top: 25px;
left: 25px;
Also when makeing change to your theme files it's best to enable Theme designer Mode (TDM) to stop Moodle caching files and data. You will find TDM in Settings> Site Administration > Appearance > Themes > Theme settings
HTH
Mary
Thanks for your reply Mary. I did as you said and got the same result as shown in attached. I have even tried entering it in Custom CSS
If none of the CSS is taking effect, (as you don't often see the changes directly in the Settings page anyway), you need to enable Theme Designer Mode. After you have clicked SAVE at the bottom of the Setting page, you should go back to the frontpage (Home) and then refresh your browser using CTRL + F5 to force the page to reload.
HTH
Mary
Yep did that. Here is the respect entry in core.css
/* ---------------- Header banner ---------------- */
/* Logo at top of page */
/* The logo is controlled by the settings page */
#page-header {
position:relative;
min-height:100px;}
#page-header .sitelogo {
float:left;
}
p.headertext p.headerimage {
position: relative;
top: 50px;
left: 0px;
line-height: 1.2;
margin: 0;
padding: 0;
}
/*.headermain {
display: none;
}*/
And the entry in general.php
<?php if ($hasheading || $hasnavbar) { ?>
<div id="page-header" class="clearfix">
<img class="sitelogo" src="<?php echo $logourl; ?>" alt="Custom logo here" />
<?php if ($hasheading) { ?>
<h1 class="headermain"><?php echo $PAGE->heading ?></h1>
<p class="headertext"> I hope this text is where I want it</p>
<div class="headermenu">
<?php
echo $OUTPUT->login_info();
if (!empty($PAGE->layout_options['langmenu'])) {
echo $OUTPUT->lang_menu();
}
echo $PAGE->headingmenu
?>
</div>
<?php } ?>
</div>
It's obviously picking up from general.php as text is showing but not applying the style.
OK. By changing position to :absolute and playing around with top and left, I have managed to get the text in the right location. Also using similar attributes for image
.headerimage {
position:absolute;
top: 50px;
left: 300px;
}
i'm able to place images there which is what i was after. How could i place several images there one after another?
Ok i have managed to achieve what I want by creating two new entries in the css file
.headerimage{
position:absolute;
top: 150px;
left: 250px;
}
.headerimage .image{
position:relative;
display:inline;
Then creating a div in the general.php file. But i notice that if i leave out the <h2></h2> entry I only get one image, whereas with it in i get both images appear, any ideas/
<div class="headerimage"
<h2></h2>
<img class="image" src="<?php echo $OUTPUT->pix_url('bann', 'theme'); ?>" alt="", />
<img class="image" src="<?php echo $OUTPUT->pix_url('bann', 'theme'); ?>" alt="", />
</div>
Hi Nigel,
yes (I think) - unless its a typo on the forum: You've missed out the > at the end of
<div class="headerimage" >
That would probably throw out all the other tags so that things are not appearing properly
HTH
Richard
How simple. Thanks Richard that was deffinitely it.
There is also a curly bracket missing off the end of the CSS which again my be the way you copied and pasted...even so it can affect things in some browsers.
.headerimage .image{
position:relative;
display:inline;
}
Now that is a copy and paste error.