Header logo - Revision history

Mudrd8mz: Fix syntax highlighting

2021-07-19T16:43:43Z

Fix syntax highlighting

← Older revision		Revision as of 16:43, 19 July 2021
Line 7:		Line 7:
	In the file ''header.html'' you see the following lines (or similar):		In the file ''header.html'' you see the following lines (or similar):

	<syntaxhighlight lang="php n">		<syntaxhighlight lang="php">
	<?php if ($home) {		<?php if ($home) {
	// This is what gets printed on the home page only		// This is what gets printed on the home page only
Line 41:		Line 41:
	Using $CFG->theme gets the path for the site's default theme rather than the currently selected one. As a result, logos do not appear because they are not in the specified directory. $CFG->wwwroot images throw unsecure warning in IE when using loginhttps.		Using $CFG->theme gets the path for the site's default theme rather than the currently selected one. As a result, logos do not appear because they are not in the specified directory. $CFG->wwwroot images throw unsecure warning in IE when using loginhttps.

	<syntaxhighlight lang="php n">		<syntaxhighlight lang="php">
	<?php if ($home) {		<?php if ($home) {
	// This is what gets printed on the home page only		// This is what gets printed on the home page only
Line 72:		Line 72:

	===Use an image from your Course files===		===Use an image from your Course files===
	<syntaxhighlight lang="php n">		<syntaxhighlight lang="php">
	<div class="headermain">		<div class="headermain">
	<img src="<?php if (file_exists("$CFG->dataroot/$COURSE->id/header.png"))		<img src="<?php if (file_exists("$CFG->dataroot/$COURSE->id/header.png"))

Mudrd8mz: Text replacement - "`" to ""`


2021-07-15T08:07:39Z
Text replacement - "<code (.*)>" to "<syntaxhighlight lang="$1">"

				
				
				
				
				
				← Older revision
				Revision as of 08:07, 15 July 2021
				
Line 7:
Line 7:
In the file ''header.html'' you see the following lines (or similar): In the file ''header.html'' you see the following lines (or similar):



<code php n> <syntaxhighlight lang="php n">
<?php if ($home) {    <?php if ($home) {   
// This is what gets printed on the home page only    // This is what gets printed on the home page only   
Line 41:
Line 41:
Using $CFG->theme gets the path for the site's default theme rather than the currently selected one. As a result, logos do not appear because they are not in the specified directory. $CFG->wwwroot images throw unsecure warning in IE when using loginhttps. Using $CFG->theme gets the path for the site's default theme rather than the currently selected one. As a result, logos do not appear because they are not in the specified directory. $CFG->wwwroot images throw unsecure warning in IE when using loginhttps.



<code php n> <syntaxhighlight lang="php n">
<?php if ($home) {    <?php if ($home) {   
// This is what gets printed on the home page only    // This is what gets printed on the home page only   
Line 72:
Line 72:



===Use an image from your Course files=== ===Use an image from your Course files===
<code php n> <syntaxhighlight lang="php n">
<div class="headermain"> <div class="headermain">
   <img src="<?php if (file_exists("$CFG->dataroot/$COURSE->id/header.png"))      <img src="<?php if (file_exists("$CFG->dataroot/$COURSE->id/header.png"))



Mudrd8mz: Text replacement - "" to ""

2021-07-14T13:28:44Z
Text replacement - "<code php>" to "<syntaxhighlight lang="php">"

				
				
				
				
				
				← Older revision
				Revision as of 13:28, 14 July 2021
				
Line 28:
Line 28:



; RIGHT ; RIGHT
<code php> <syntaxhighlight lang="php">
<?php echo $CFG->httpswwwroot.'/theme/'.current_theme() ?>/image.jpg <?php echo $CFG->httpswwwroot.'/theme/'.current_theme() ?>/image.jpg
</syntaxhighlight>   </syntaxhighlight>  



Mudrd8mz: Text replacement - "" to ""

2021-07-14T13:05:44Z
Text replacement - "<code>" to "<syntaxhighlight lang="php">"

				
				
				
				
				
				← Older revision
				Revision as of 13:05, 14 July 2021
				
Line 67:
Line 67:
Moodle offers one header for all pages and a different header for the front/home page. You may, for example, make the header for your front page higher and place a bigger logo on it. Moodle offers one header for all pages and a different header for the front/home page. You may, for example, make the header for your front page higher and place a bigger logo on it.



The logo position in the page header is defined in the CSS file ''styles_layout.css''. Please change the values for the CLASS <code>.headermain</syntaxhighlight> and eventually for the IDs <code>#header</syntaxhighlight> and <code>#header-home</syntaxhighlight> if needed. You can find the definitions in the section header of the CSS file.   The logo position in the page header is defined in the CSS file ''styles_layout.css''. Please change the values for the CLASS <syntaxhighlight lang="php">.headermain</syntaxhighlight> and eventually for the IDs <syntaxhighlight lang="php">#header</syntaxhighlight> and <syntaxhighlight lang="php">#header-home</syntaxhighlight> if needed. You can find the definitions in the section header of the CSS file.  



'''A tip for a fast jump to the header section of the CSS file:''' Select and copy the word "header" in the section list at the beginning of the file. Then call find in your program and paste "header" into the search dialogue. After you click "find" in your dialogue your program will find the start of the header section. '''A tip for a fast jump to the header section of the CSS file:''' Select and copy the word "header" in the section list at the beginning of the file. Then call find in your program and paste "header" into the search dialogue. After you click "find" in your dialogue your program will find the start of the header section.



Mudrd8mz: Text replacement - "" to ""
2021-07-14T13:02:49Z
Text replacement - "</code>" to "</syntaxhighlight>"

				
				
				
				
				
				← Older revision
				Revision as of 13:02, 14 July 2021
				
Line 23:
Line 23:
   </div>    </div>
<?php } ?> <?php } ?>
</code> </syntaxhighlight>



The following code example shows a part from a header file with a logo. Please replace lines 5 and 12 above with lines 5 and 12 from the code example below. In particular, pay close attention to the following statement: The following code example shows a part from a header file with a logo. Please replace lines 5 and 12 above with lines 5 and 12 from the code example below. In particular, pay close attention to the following statement:
Line 30:
Line 30:
<code php> <code php>
<?php echo $CFG->httpswwwroot.'/theme/'.current_theme() ?>/image.jpg <?php echo $CFG->httpswwwroot.'/theme/'.current_theme() ?>/image.jpg
</code>   </syntaxhighlight>  



Some theme designers have mistakenly used: Some theme designers have mistakenly used:
Line 63:
Line 63:
</div> </div>
<?php } ?> <?php } ?>
</code> </syntaxhighlight>



Moodle offers one header for all pages and a different header for the front/home page. You may, for example, make the header for your front page higher and place a bigger logo on it. Moodle offers one header for all pages and a different header for the front/home page. You may, for example, make the header for your front page higher and place a bigger logo on it.



The logo position in the page header is defined in the CSS file ''styles_layout.css''. Please change the values for the CLASS <code>.headermain</code> and eventually for the IDs <code>#header</code> and <code>#header-home</code> if needed. You can find the definitions in the section header of the CSS file.   The logo position in the page header is defined in the CSS file ''styles_layout.css''. Please change the values for the CLASS <code>.headermain</syntaxhighlight> and eventually for the IDs <code>#header</syntaxhighlight> and <code>#header-home</syntaxhighlight> if needed. You can find the definitions in the section header of the CSS file.  



'''A tip for a fast jump to the header section of the CSS file:''' Select and copy the word "header" in the section list at the beginning of the file. Then call find in your program and paste "header" into the search dialogue. After you click "find" in your dialogue your program will find the start of the header section. '''A tip for a fast jump to the header section of the CSS file:''' Select and copy the word "header" in the section list at the beginning of the file. Then call find in your program and paste "header" into the search dialogue. After you click "find" in your dialogue your program will find the start of the header section.
Line 78:
Line 78:
     height="70" alt="mycompany" title="mycompany" id="logo" />      height="70" alt="mycompany" title="mycompany" id="logo" />
</div> </div>
</code> </syntaxhighlight>



Or even have your own custom CSS override the theme's CSS rules, When it is placed inside the Course's files folder. see MDL-20590 Or even have your own custom CSS override the theme's CSS rules, When it is placed inside the Course's files folder. see MDL-20590



Skodak at 12:13, 10 November 2013
2013-11-10T12:13:01Z


				
				
				
				
				
				← Older revision
				Revision as of 12:13, 10 November 2013
				
Line 1:
Line 1:
{{Scrapbook}} {{obsolete}}{{Scrapbook}}



This article refers to Moodle 1.9 only: This article refers to Moodle 1.9 only:
Line 81:
Line 81:



Or even have your own custom CSS override the theme's CSS rules, When it is placed inside the Course's files folder. see MDL-20590 Or even have your own custom CSS override the theme's CSS rules, When it is placed inside the Course's files folder. see MDL-20590

== See also: == 
* [[Themes FAQ]] 
* [[CSS FAQ]] 

[[Category:Themes]] 



TimHunt: Undo revision 29726 by Vicentina (talk)
2011-09-20T08:21:55Z
Undo revision 29726 by Vicentina (talk)
Show changes


Vicentina at 20:55, 19 September 2011
2011-09-19T20:55:56Z

Show changes


Tqr at 23:18, 23 June 2011
2011-06-23T23:18:53Z


				
				
				
				
				
				← Older revision
				Revision as of 23:18, 23 June 2011
				
Line 1:
Line 1:
{{Scrapbook}} {{Scrapbook}}

This article refers to Moodle 1.9 only:



To show your '''logo in the page header''', the file ''header.html'' in your theme folder requires editing. To show your '''logo in the page header''', the file ''header.html'' in your theme folder requires editing.



Deraadt: Created page with "{{Scrapbook}}  To show your '''logo in the page header''', the file ''header.html'' in your theme folder requires editing.  In the file ''header.html'' you see the following line..."
2011-06-22T07:21:09Z
Created page with "{{Scrapbook}}  To show your '''logo in the page header''', the file ''header.html'' in your theme folder requires editing.  In the file ''header.html'' you see the following line..."
New page
{{Scrapbook}}



To show your '''logo in the page header''', the file ''header.html'' in your theme folder requires editing.



In the file ''header.html'' you see the following lines (or similar):



<code php n>

<?php if ($home) {  

// This is what gets printed on the home page only  

?>

  <div id="header-home">

    <div class="headermain"><?php echo $heading ?></div>

    <div class="headermenu"><?php echo $menu ?></div>

  </div>

<?php } else if ($heading) {  

// This is what gets printed on any other page with a heading 

?>

  <div id="header">

    <div class="headermain"><?php echo $heading ?></div>

    <div class="headermenu"><?php echo $menu ?></div>

  </div>

<?php } ?>

</code>



The following code example shows a part from a header file with a logo. Please replace lines 5 and 12 above with lines 5 and 12 from the code example below. In particular, pay close attention to the following statement:



; RIGHT

<code php>

<?php echo $CFG->httpswwwroot.'/theme/'.current_theme() ?>/image.jpg

</code> 



Some theme designers have mistakenly used:

 

; WRONG



 <?php echo "$CFG->wwwroot/theme/$CFG->theme/image.jpg" ?> 





Using $CFG->theme gets the path for the site's default theme rather than the currently selected one. As a result, logos do not appear because they are not in the specified directory. $CFG->wwwroot images throw unsecure warning in IE when using loginhttps.



<code php n>

<?php if ($home) {  

// This is what gets printed on the home page only  

?>

<div id="header-home">

    <div class="headermain"><img src="<?php echo 

       $CFG->themewww.'/'.current_theme() ?>/pix/big_logo.gif" width="300" 

        height="100" alt="mycompany" title="mycompany" id="logo" />

    </div>

    <div class="headermenu"><?php echo $menu ?></div>

</div>

<?php } else if ($heading) {  

// This is what gets printed on any other page with a heading 

?>

<div id="header">

   <div class="headermain"><img src="<?php echo

        $CFG->themewww.'/'.current_theme() ?>/pix/small_logo.gif" width="210" 

        height="70" alt="mycompany" title="mycompany" id="logo" />

   </div>

   <div class="headermenu"><?php echo $menu ?></div>

</div>

<?php } ?>

</code>



Moodle offers one header for all pages and a different header for the front/home page. You may, for example, make the header for your front page higher and place a bigger logo on it.



The logo position in the page header is defined in the CSS file ''styles_layout.css''. Please change the values for the CLASS <code>.headermain</code> and eventually for the IDs <code>#header</code> and <code>#header-home</code> if needed. You can find the definitions in the section header of the CSS file. 



'''A tip for a fast jump to the header section of the CSS file:''' Select and copy the word "header" in the section list at the beginning of the file. Then call find in your program and paste "header" into the search dialogue. After you click "find" in your dialogue your program will find the start of the header section.



===Use an image from your Course files===

<code php n>

<div class="headermain">

  <img src="<?php if (file_exists("$CFG->dataroot/$COURSE->id/header.png")) 

    { echo "$CFG->httpswwwroot/file.php/$COURSE->id/header.png"; } ?>" width="210" 

    height="70" alt="mycompany" title="mycompany" id="logo" />

</div>

</code>



Or even have your own custom CSS override the theme's CSS rules, When it is placed inside the Course's files folder. see MDL-20590



== See also: ==

* [[Themes FAQ]]

* [[CSS FAQ]]



[[Category:Themes]]

← Older revision		Revision as of 08:07, 15 July 2021
Line 7:		Line 7:
	In the file ''header.html'' you see the following lines (or similar):		In the file ''header.html'' you see the following lines (or similar):

	<~~code~~ php n>		<syntaxhighlight lang="php n">
	<?php if ($home) {		<?php if ($home) {
	// This is what gets printed on the home page only		// This is what gets printed on the home page only
Line 41:		Line 41:
	Using $CFG->theme gets the path for the site's default theme rather than the currently selected one. As a result, logos do not appear because they are not in the specified directory. $CFG->wwwroot images throw unsecure warning in IE when using loginhttps.		Using $CFG->theme gets the path for the site's default theme rather than the currently selected one. As a result, logos do not appear because they are not in the specified directory. $CFG->wwwroot images throw unsecure warning in IE when using loginhttps.

	<~~code~~ php n>		<syntaxhighlight lang="php n">
	<?php if ($home) {		<?php if ($home) {
	// This is what gets printed on the home page only		// This is what gets printed on the home page only
Line 72:		Line 72:

	===Use an image from your Course files===		===Use an image from your Course files===
	<~~code~~ php n>		<syntaxhighlight lang="php n">
	<div class="headermain">		<div class="headermain">
	<img src="<?php if (file_exists("$CFG->dataroot/$COURSE->id/header.png"))		<img src="<?php if (file_exists("$CFG->dataroot/$COURSE->id/header.png"))

← Older revision		Revision as of 13:28, 14 July 2021
Line 28:		Line 28:

	; RIGHT		; RIGHT
	<~~code~~ php>		<syntaxhighlight lang="php">
	<?php echo $CFG->httpswwwroot.'/theme/'.current_theme() ?>/image.jpg		<?php echo $CFG->httpswwwroot.'/theme/'.current_theme() ?>/image.jpg
	</syntaxhighlight>		</syntaxhighlight>

← Older revision		Revision as of 13:05, 14 July 2021
Line 67:		Line 67:
	Moodle offers one header for all pages and a different header for the front/home page. You may, for example, make the header for your front page higher and place a bigger logo on it.		Moodle offers one header for all pages and a different header for the front/home page. You may, for example, make the header for your front page higher and place a bigger logo on it.

	The logo position in the page header is defined in the CSS file ''styles_layout.css''. Please change the values for the CLASS <~~code~~>.headermain</syntaxhighlight> and eventually for the IDs <~~code~~>#header</syntaxhighlight> and <~~code~~>#header-home</syntaxhighlight> if needed. You can find the definitions in the section header of the CSS file.		The logo position in the page header is defined in the CSS file ''styles_layout.css''. Please change the values for the CLASS <syntaxhighlight lang="php">.headermain</syntaxhighlight> and eventually for the IDs <syntaxhighlight lang="php">#header</syntaxhighlight> and <syntaxhighlight lang="php">#header-home</syntaxhighlight> if needed. You can find the definitions in the section header of the CSS file.

	'''A tip for a fast jump to the header section of the CSS file:''' Select and copy the word "header" in the section list at the beginning of the file. Then call find in your program and paste "header" into the search dialogue. After you click "find" in your dialogue your program will find the start of the header section.		'''A tip for a fast jump to the header section of the CSS file:''' Select and copy the word "header" in the section list at the beginning of the file. Then call find in your program and paste "header" into the search dialogue. After you click "find" in your dialogue your program will find the start of the header section.

← Older revision		Revision as of 13:02, 14 July 2021
Line 23:		Line 23:
	</div>		</div>
	<?php } ?>		<?php } ?>
	</~~code~~>		</syntaxhighlight>

	The following code example shows a part from a header file with a logo. Please replace lines 5 and 12 above with lines 5 and 12 from the code example below. In particular, pay close attention to the following statement:		The following code example shows a part from a header file with a logo. Please replace lines 5 and 12 above with lines 5 and 12 from the code example below. In particular, pay close attention to the following statement:
Line 30:		Line 30:
	<code php>		<code php>
	<?php echo $CFG->httpswwwroot.'/theme/'.current_theme() ?>/image.jpg		<?php echo $CFG->httpswwwroot.'/theme/'.current_theme() ?>/image.jpg
	</~~code~~>		</syntaxhighlight>

	Some theme designers have mistakenly used:		Some theme designers have mistakenly used:
Line 63:		Line 63:
	</div>		</div>
	<?php } ?>		<?php } ?>
	</~~code~~>		</syntaxhighlight>

	Moodle offers one header for all pages and a different header for the front/home page. You may, for example, make the header for your front page higher and place a bigger logo on it.		Moodle offers one header for all pages and a different header for the front/home page. You may, for example, make the header for your front page higher and place a bigger logo on it.

	The logo position in the page header is defined in the CSS file ''styles_layout.css''. Please change the values for the CLASS <code>.headermain</~~code~~> and eventually for the IDs <code>#header</~~code~~> and <code>#header-home</~~code~~> if needed. You can find the definitions in the section header of the CSS file.		The logo position in the page header is defined in the CSS file ''styles_layout.css''. Please change the values for the CLASS <code>.headermain</syntaxhighlight> and eventually for the IDs <code>#header</syntaxhighlight> and <code>#header-home</syntaxhighlight> if needed. You can find the definitions in the section header of the CSS file.

	'''A tip for a fast jump to the header section of the CSS file:''' Select and copy the word "header" in the section list at the beginning of the file. Then call find in your program and paste "header" into the search dialogue. After you click "find" in your dialogue your program will find the start of the header section.		'''A tip for a fast jump to the header section of the CSS file:''' Select and copy the word "header" in the section list at the beginning of the file. Then call find in your program and paste "header" into the search dialogue. After you click "find" in your dialogue your program will find the start of the header section.
Line 78:		Line 78:
	height="70" alt="mycompany" title="mycompany" id="logo" />		height="70" alt="mycompany" title="mycompany" id="logo" />
	</div>		</div>
	</~~code~~>		</syntaxhighlight>

	Or even have your own custom CSS override the theme's CSS rules, When it is placed inside the Course's files folder. see MDL-20590		Or even have your own custom CSS override the theme's CSS rules, When it is placed inside the Course's files folder. see MDL-20590

← Older revision		Revision as of 12:13, 10 November 2013
Line 1:		Line 1:
	{{Scrapbook}}		{{obsolete}}{{Scrapbook}}

	This article refers to Moodle 1.9 only:		This article refers to Moodle 1.9 only:
Line 81:		Line 81:

	Or even have your own custom CSS override the theme's CSS rules, When it is placed inside the Course's files folder. see MDL-20590		Or even have your own custom CSS override the theme's CSS rules, When it is placed inside the Course's files folder. see MDL-20590

	~~== See also: ==~~
	* [[Themes FAQ]]
	* [[CSS FAQ]]

	~~[[Category:Themes]]~~

← Older revision		Revision as of 23:18, 23 June 2011
Line 1:		Line 1:
	{{Scrapbook}}		{{Scrapbook}}

			This article refers to Moodle 1.9 only:

	To show your '''logo in the page header''', the file ''header.html'' in your theme folder requires editing.		To show your '''logo in the page header''', the file ''header.html'' in your theme folder requires editing.