Hello all,
I would like to add in More theme social network icons and, hopefully, a search bar too. The result should be something like this
Is it possible? i.e. is there any settings I have to change in configuration page or I have to modify the theme code?
In this case, do you have any examples?
Thank you
Ciao Pierpaulo,
Reading your question, it sounded like you were going to add a screenshot of an idea of what you are trying to achive. Did you forget?
You could add the icons in the More theme footer using the More > footnote setting. Site Administration > Appearance > Themes > More (settings page).
The code could be something like this:
<div id="more-social-media-icons" class="btn-group">
<a class="btn btn-default" href="#"><i class="fa fa-twitter"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-linkedin"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-facebook-f"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-tumblr"></i></a>
</div>
CSS
#more-social-media-icons { text-align: center: }
Hope this helps?
Mary
More examples HERE >>> http://fortawesome.github.io/Font-Awesome/examples/
Thank you Mary!
I just copy and paste the image, this time I attach it.
My idea was
something like the top menu bar in moodle.org
but with social network icons and search space.
Thank you again
Pierpaolo
Ah...I see now.
Well the nearest thing to this for the searchbar is in Decaf theme. The renderer for is HERE
The social icons can be added as on unordered list just adding the image and links.
<div class="socioweb-icons">
<ul>
<li><a href="#" title="#"><img src="<?php echo $OUTPUT->pix_url('footer/logos/facebook', 'theme') ?>" height="30" width="30" alt="Facebook" title="Facebook" /></a></li>
<li><a href="#" title="#"><img src="<?php echo $OUTPUT->pix_url('footer/logos/twitter', 'theme') ?>" height="30" width="30" alt="Twitter" title="Twitter" /></a></li>
<li><a href="#" title="#"><img src="<?php echo $OUTPUT->pix_url('footer/logos/flickr', 'theme') ?>" height="30" width="30" alt="Flickr" title="Flickr" /></a></li>
</ul>
</div>
Where all of this could go into the navbar section in a copy of Clean theme or the More theme...like this...
<header role="banner" class="navbar navbar-fixed-top<?php echo $html->navbarclass ?> moodle-has-zindex">
<nav role="navigation" class="navbar-inner">
<div class="container-fluid">
<a class="brand" href="<?php echo $CFG->wwwroot;?>"><?php echo
format_string($SITE->shortname, true, array('context' => context_course::instance(SITEID)));
?></a>
<a class="btn btn-navbar" data-toggle="workaround-collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<?php echo $OUTPUT->user_menu(); ?>
<div class="nav-collapse collapse">
<?php echo $OUTPUT->custom_menu(); ?>
<!-- Searchbar can go here -->
<!-- End Searchbar -->
<ul class="socioweb-icons nav pull-right">
<li><a href="#" title="#"><img src="<?php echo $OUTPUT->pix_url('footer/logos/facebook', 'theme') ?>" height="30" width="30" alt="Facebook" title="Facebook" /></a></li>
<li><a href="#" title="#"><img src="<?php echo $OUTPUT->pix_url('footer/logos/twitter', 'theme') ?>" height="30" width="30" alt="Twitter" title="Twitter" /></a></li>
<li><a href="#" title="#"><img src="<?php echo $OUTPUT->pix_url('footer/logos/flickr', 'theme') ?>" height="30" width="30" alt="Flickr" title="Flickr" /></a></li>
</ul>
<ul class="nav pull-right">
<li><?php echo $OUTPUT->page_heading_menu(); ?></li>
</ul>
</div>
</div>
</nav>
</header>
Hope this helps?
Mary
Ok we are very close to the result bus, as you undertood, I'm quite dummy and I can't find WHERE I can put the code.
My idea is create a php file to include in the theme (in this way when I upgrade moodle verison I have just tu add a line in the original file)
The php I mada is very simple:
<?phpbut, as I said before, I don't know where include it.
public function search_form(moodle_url $formtarget, $searchvalue)
{
global $CFG;
if (empty($searchvalue))
{
$searchvalue = 'Search Settings..';
}
$content = html_writer::start_tag('form', array('class' => 'topadminsearchform', 'method' => 'get', 'action' => $formtarget));
$content .= html_writer::start_tag('div', array('class' => 'search-box'));
$content .= html_writer::tag('label', s(get_string('searchinsettings', 'admin')), array('for' => 'adminsearchquery', 'class' => 'accesshide'));
$content .= html_writer::empty_tag('input', array('id' => 'topadminsearchquery', 'type' => 'text', 'name' => 'query', 'value' => s($searchvalue),
'onfocus' => "if(this.value == 'Search Settings..') {this.value = '';}",
'onblur' => "if (this.value == '') {this.value = 'Search Settings..';}"));
//$content .= html_writer::empty_tag('input', array('class'=>'search-go','type'=>'submit', 'value'=>''));
$content .= html_writer::end_tag('div');
$content .= html_writer::end_tag('form');
return $content;
}
$social='
<ul class="socioweb-icons nav pull-right">
<li><a href="#" title="#"><img src="'.$OUTPUT->pix_url('footer/logos/facebook', 'theme') .'" height="30" width="30" alt="Facebook" title="Facebook" /></a></li>
<li><a href="#" title="#"><img src="'.$OUTPUT->pix_url('footer/logos/twitter', 'theme') .'" height="30" width="30" alt="Twitter" title="Twitter" /></a></li>
<li><a href="#" title="#"><img src="'.$OUTPUT->pix_url('footer/logos/flickr', 'theme') .'" height="30" width="30" alt="Flickr" title="Flickr" /></a></li>
</ul>
';
echo $social;
?>
Ciao Pierpaolo,
Si prega di portare con me sto testando questo in un tema.
LOL
Mary
Hi, I just emailed you the theme I made to show how the renderer works etc. It looks good but the code for the search bar seems to be in confict with the usermenu.
Cheers
Mary
