Page 1 of 1

protostar template - insert a picture

Posted: Wed Dec 19, 2012 2:49 am
by Harry Covair
Hi the forum,
In a website based on Joomla 3.0, Protostar template, I want to insert a picture in the right column replacing the login form.
Is there a user guide which explains how to do that? Or could someone helps me.
Thanks in advance
Harry

Re: protostar template - insert a picture

Posted: Wed Dec 19, 2012 3:34 am
by imanickam
Go to the Module Manager find the Login module and unpublish it. You could create a new module of the type Custom HTML, insert the picture, and publish the module where the login module was published.

A good starting point to know about Joomla! would be http://docs.joomla.org/.

Re: protostar template - insert a picture

Posted: Wed Dec 19, 2012 6:24 am
by Harry Covair
Hello imanickam,
Thanks for your quick answer.
I followed your advice and I changed successfully the home page.
Have a nice day
Harry

Re: protostar template - insert a picture

Posted: Mon Mar 25, 2013 4:34 pm
by sebari
Take a look at lines 146-156 of the index.php file in the protostar template. I replaced these lines with the following:
<!-- ************************ header ******************************* -->
<div class="header">
<div class="header-inner ">
<a class="brand pull-left" href="<?php echo $this->baseurl; ?>">
<?php echo $logo;?> <?php if ($this->params->get('sitedescription')) { echo '<div class="site-description">'. htmlspecialchars($this->params->get('sitedescription')) .'</div>'; } ?>

</a>
<div class="header-search pull-right">
<jdoc:include type="modules" name="position-0" style="none" />
</div>
</div>
</div>

<div style="width:300px; height:75px; text-align: left; display: inline-block; ">
<jdoc:include type="modules" name="hdr_left" style="xhtml" />
</div>

<div style="width:300px; height:120px; margin: auto; text-align: left; border: 1px solid gray; box-shadow: 5px 5px 5px #888888; ">
<jdoc:include type="modules" name="position-3" style="rounded" />
</div>
<div >
<br/>
</div>
<!-- ************************ end header ************************** -->

On the 3rd line of my code I have removed the class identifier 'clearfix'. This refers to a CSS definition in template.css which clears an html element. In this case it only allows an image or text, but not both (I think..... check it out).
I have also added two divs with new positions (hdr_left and hdr_mid). I have also included the position names in my templateDetails.xml file (google on 'add template positions, Joomla' to check this out).

I'm just a beginner, so don't take this as gospel! If anyone likes to show a better solution, then I'd like to see it too!