Changing the sitewide header site title area size
Permalink Browser Info Environment
Hello!
How can i change the size of the sitewide header site title area?
Picture what i can set to site logo is a bigger than area.
I change header.php, in packages/xw_replica/elements folder, but this change only position.
<div class="container">
<div class="row">
<div class="col-sm-2 col-xs-6 header-site-title" id="logo-area">
<?php
$a = new GlobalArea('Header Site Title');
$a->display();
?>
</div>
Can anyone please help?
Thanks!
How can i change the size of the sitewide header site title area?
Picture what i can set to site logo is a bigger than area.
I change header.php, in packages/xw_replica/elements folder, but this change only position.
<div class="container">
<div class="row">
<div class="col-sm-2 col-xs-6 header-site-title" id="logo-area">
<?php
$a = new GlobalArea('Header Site Title');
$a->display();
?>
</div>
Can anyone please help?
Thanks!
Type: | Discussion |
---|---|
Status: | Resolved |
It works, but i don't understand this logic.
I want to make this picture little bit bigger. If i change this line <div class="col-sm-3 col-xs-6 header-site-title" id="logo-area"> to
<div class="col-sm-4 col-xs-6 header-site-title" id="logo-area">
then only the position of the search area changes and it moves down.
Screenshot:http://mavek.ee/picture1.jpg
All header.php code:
<?php defined('C5_EXECUTE') or die('Access Denied.');
$this->inc('elements/header_top.php');
$as = new GlobalArea('Header Search');
$blocks = $as->getTotalBlocksInArea();
$displayThirdColumn = $blocks > 0 || $c->isEditMode();
?>
<header>
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-6 header-site-title" id="logo-area">
<?php
$a = new GlobalArea('Header Site Title');
$a->display();
?>
</div>
<div class="<?php echo ($displayThirdColumn) ? 'col-sm-6 col-xs-6' : 'col-sm-6 col-xs-6'; ?> responsive-navigation">
<?php
$a = new GlobalArea('Header Navigation');
$a->display();
?>
</div>
<?php
if ($displayThirdColumn) {
?>
<div class="col-sm-3 col-xs-12">
<?php $as->display(); ?>
</div>
<?php
}
?>
</div>
</div>
</header>
Best regards,
Martin
I want to make this picture little bit bigger. If i change this line <div class="col-sm-3 col-xs-6 header-site-title" id="logo-area"> to
<div class="col-sm-4 col-xs-6 header-site-title" id="logo-area">
then only the position of the search area changes and it moves down.
Screenshot:http://mavek.ee/picture1.jpg
All header.php code:
<?php defined('C5_EXECUTE') or die('Access Denied.');
$this->inc('elements/header_top.php');
$as = new GlobalArea('Header Search');
$blocks = $as->getTotalBlocksInArea();
$displayThirdColumn = $blocks > 0 || $c->isEditMode();
?>
<header>
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-6 header-site-title" id="logo-area">
<?php
$a = new GlobalArea('Header Site Title');
$a->display();
?>
</div>
<div class="<?php echo ($displayThirdColumn) ? 'col-sm-6 col-xs-6' : 'col-sm-6 col-xs-6'; ?> responsive-navigation">
<?php
$a = new GlobalArea('Header Navigation');
$a->display();
?>
</div>
<?php
if ($displayThirdColumn) {
?>
<div class="col-sm-3 col-xs-12">
<?php $as->display(); ?>
</div>
<?php
}
?>
</div>
</div>
</header>
Best regards,
Martin
this how bootstrap works! within a row you can only have 12 cols
so i you use a col4 for the header (what is too much in my opinion for a logo my be the image itselff is not big enough!)so you need to reduce one of the other cols!
col-sm-6 should change to col-sm-5 but it could be not enough for a navigation!!!
for more comprehension how bootstrap works
see:https://getbootstrap.com/docs/4.0/layout/grid/...
so i you use a col4 for the header (what is too much in my opinion for a logo my be the image itselff is not big enough!)so you need to reduce one of the other cols!
col-sm-6 should change to col-sm-5 but it could be not enough for a navigation!!!
for more comprehension how bootstrap works
see:https://getbootstrap.com/docs/4.0/layout/grid/...
You can change header.php areas like below:
Best Regards,
Concrete5 DE Support Team
http://www.concrete5.de/
http://www.xanweb.com/