Create a position for a part of page

[abtin1980]

Hi,
I wanted to create a position here [Red rectangular part].
I’ve added this piece of code into Index.php:

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

Position works great. Unfortunately, this position fill a complete row that is not good.
How can I create a position that just cover that part that I put
it in red rectangular or something close like that?!!
My screenshot with extra info is attached.
Thanks a bunch...

[ranwilli]

Post the rest of your code as well as a sketch of what you want.

[abtin1980]

I didn't get what you said, but if the code in Index.PHP it's mentioned. Here we go:
<?php
/**
* @package Joomla.Site
* @subpackage Templates.protostar
*
* @copyright Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/

defined('_JEXEC') or die;

/** @var JDocumentHtml $this */

$app = JFactory::getApplication();
$user = JFactory::getUser();

// Output as HTML5
$this->setHtml5(true);

// Getting params from template
$params = $app->getTemplate(true)->params;

// Detecting Active Variables
$option = $app->input->getCmd('option', '');
$view = $app->input->getCmd('view', '');
$layout = $app->input->getCmd('layout', '');
$task = $app->input->getCmd('task', '');
$itemid = $app->input->getCmd('Itemid', '');
$sitename = $app->get('sitename');

if ($task === 'edit' || $layout === 'form')
{
$fullWidth = 1;
}
else
{
$fullWidth = 0;
}

// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');

// Add template js
JHtml::_('script', 'template.js', array('version' => 'auto', 'relative' => true));

// Add html5 shiv
JHtml::_('script', 'jui/html5.js', array('version' => 'auto', 'relative' => true, 'conditional' => 'lt IE 9'));

// Add Stylesheets
JHtml::_('stylesheet', 'template.css', array('version' => 'auto', 'relative' => true));

// Use of Google Font
if ($this->params->get('googleFont'))
{
JHtml::_('stylesheet', 'https://fonts.googleapis.com/css?family=' . $this->params->get('googleFontName'));
$this->addStyleDeclaration("
h1, h2, h3, h4, h5, h6, .site-title {
font-family: '" . str_replace('+', ' ', $this->params->get('googleFontName')) . "', sans-serif;
}");
}

// Template color
if ($this->params->get('templateColor'))
{
$this->addStyleDeclaration('
body.site {
border-top: 0px solid ' . $this->params->get('templateColor') . ';
background-color: ' . $this->params->get('templateBackgroundColor') . ';
}
a {
color: ' . $this->params->get('templateColor') . ';
}
.nav-list > .active > a,
.nav-list > .active > a:hover,
.dropdown-menu li > a:hover,
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover,
.nav-pills > .active > a,
.nav-pills > .active > a:hover,
.btn-primary {
background: ' . $this->params->get('templateColor') . ';
}');
}

// Check for a custom CSS file
JHtml::_('stylesheet', 'user.css', array('version' => 'auto', 'relative' => true));

// Check for a custom js file
JHtml::_('script', 'user.js', array('version' => 'auto', 'relative' => true));

// Load optional RTL Bootstrap CSS
JHtml::_('bootstrap.loadCss', false, $this->direction);

// Adjusting content width
$position7ModuleCount = $this->countModules('position-7');
$position8ModuleCount = $this->countModules('position-8');

if ($position7ModuleCount && $position8ModuleCount)
{
$span = 'span6';
}
elseif ($position7ModuleCount && !$position8ModuleCount)
{
$span = 'span9';
}
elseif (!$position7ModuleCount && $position8ModuleCount)
{
$span = 'span9';
}
else
{
$span = 'span12';
}

// Logo file or site title param
if ($this->params->get('logoFile'))
{
$logo = '<img src="' . JUri::root() . $this->params->get('logoFile') . '" alt="' . $sitename . '" />';
}
elseif ($this->params->get('sitetitle'))
{
$logo = '<span class="site-title" title="' . $sitename . '">' . htmlspecialchars($this->params->get('sitetitle'), ENT_COMPAT, 'UTF-8') . '</span>';
}
else
{
$logo = '<span class="site-title" title="' . $sitename . '">' . $sitename . '</span>';
}
?>
<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<jdoc:include type="head" />
</head>
<body class="site <?php echo $option
. ' view-' . $view
. ($layout ? ' layout-' . $layout : ' no-layout')
. ($task ? ' task-' . $task : ' no-task')
. ($itemid ? ' itemid-' . $itemid : '')
. ($params->get('fluidContainer') ? ' fluid' : '')
. ($this->direction === 'rtl' ? ' rtl' : '');
?>">
<!-- Body -->
<div class="body" id="top">
<div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : ''); ?>">
<!-- Header -->
<header class="header" role="banner">
<div class="header-inner clearfix">
<a class="brand pull-left" href="<?php echo $this->baseurl; ?>/">

</a>




<?php if ($this->countModules('position-00ztopmenumobile')) : ?>
<nav class="navigation" role="navigation">
<div class="navbar pull-right">
</div>
<div class="header-search pull-right">
<jdoc:include type="modules" name="position-00ztopmenumobile" style="none" />
</div>
</nav>
<?php endif; ?>





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





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


</div>




<div class="header-inner clearfix">

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

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

<div class="nav-collapse pull-left">
<jdoc:include type="modules" name="position-0d" style="none" />
</div>


</div>



</header>
<?php if ($this->countModules('position-1')) : ?>
<nav class="navigation" role="navigation">
<div class="navbar pull-left">
<a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
<span class="element-invisible"><?php echo JTEXT::_('TPL_PROTOSTAR_TOGGLE_MENU'); ?></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>




<div class="nav-collapse">
<jdoc:include type="modules" name="position-1" style="none" />
</div>
</nav>
<?php endif; ?>


<div class="nav-collapse pull-left">
<jdoc:include type="modules" name="position-1a" style="none" />
</div>


<jdoc:include type="modules" name="banner" style="xhtml" />
<div class="row-fluid">
<?php if ($position8ModuleCount) : ?>
<!-- Begin Sidebar -->
<div id="sidebar" class="span3">
<div class="sidebar-nav">
<jdoc:include type="modules" name="position-8" style="xhtml" />
</div>
</div>
<!-- End Sidebar -->
<?php endif; ?>
<main id="content" role="main" class="<?php echo $span; ?>">
<!-- Begin Content -->
<jdoc:include type="modules" name="position-3" style="xhtml" />
<jdoc:include type="message" />
<jdoc:include type="component" />
<div class="clearfix"></div>
<jdoc:include type="modules" name="position-2" style="none" />
<!-- End Content -->
</main>
<?php if ($position7ModuleCount) : ?>
<div id="aside" class="span3">
<!-- Begin Right Sidebar -->
<jdoc:include type="modules" name="position-7" style="well" />
<!-- End Right Sidebar -->
</div>
<?php endif; ?>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer" role="contentinfo">
<div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : ''); ?>">
<hr />
<jdoc:include type="modules" name="footer" style="none" />
<p class="pull-right">
<a href="#top" id="back-top">
<?php echo JText::_('TPL_PROTOSTAR_BACKTOTOP'); ?>
</a>

</div>
</footer>
<jdoc:include type="modules" name="debug" style="none" />
</body>
</html>

[starazure]

Add the positions in two bootstrap grid columns..
So the red position will go inside col-md-4 and the green position will go inside col-md-8