How I could get this?

salvi992

Hello.

I would like to get this look to my web page header. I've been looking the way to create custom HTML modules HERE.

But, this tutorial is very basic for my needs, especially if I want to use the Bootstrap 3 grid to do the layout responsive. I don't even know if it can be done. Perhaps, using a little of custom css (with "position" tag), it could be done. But I think it can have an undesirable effect to "responsiveness". What's your opinion? You have more experience.

Could you help me?

Another issue (easier, I suppose) is that if I put the Title of a module in a position it doesn't appear.

aman204

salvi992 As per your screenshot shared, It would also be feasible to follow this documentation too

Moreover, It would depend upon your skills and expertise in getting the desired results as this would require creating new module position for assigning specific modules.

Also, You may require to add some CSS rule-sets in order to position the respective modules properly and ensure to use media queries in order to see the modules right for varied screen sizes

salvi992

Thank you very much aman204, I'll try to set several new positions, later I'll assign them custom modules and finally I'll try to move them. I've never made a responsive web, only classical webs, but I'll get it.

Regards.
Salvador.

aman204

salvi992 Best of luck with your progress 🙂

Cheers

salvi992

Hello again.

Well, this is my current state in my work. The first image is how I want the design (I've made easier).
The second is what I'm getting now. I don't know what's happening.

I'm focusing in normal, medium size (md, like laptops and classical desktop screens).

If Bootstrap grid is made up by 12 columns.

First logo has 3 columns (col-md-3)
Second one (module 'eltiempo', logo COLORES) has 3 columns.
Third one (module social-icons) has 6 columns.

Why the third module is under the other two? It's sure that there is any explanation, but which one?

I attach the code. It could be useful. It is in block 'header.php'. And of course, in home-1 layout. Later, I'll worry about the search and language switcher modules.

Thanks in advance. I hope not to be too annoying.

$logosize = 'col-sm-12';
if ($headright = $this->countModules('head-search or languageswitcherload')) {
$logosize = 'col-sm-8';
}

<header id="t3-header" class="container t3-header">
<div class="row">

	<!-- LOGO HERALDICO -->
	<div class="col-xs-12 col-md-3 <?php echo $logosize ?> logo">
		<div class="logo-<?php echo $logotype, ($logoimgsm ? ' logo-control' : '') ?>">
			<a href="<?php echo JUri::base() ?>" title="<?php echo strip_tags($sitename) ?>">
				<?php if($logotype == 'image'): ?>
					<img class="logo-img" src="<?php echo JUri::base(true) . '/' . $logoimage ?>" alt="<?php echo strip_tags($sitename) ?>" />		
				<?php endif ?>
				<?php if($logoimgsm) : ?>
					<img class="logo-img-sm" src="<?php echo JUri::base(true) . '/' . $logoimgsm ?>" alt="<?php echo strip_tags($sitename) ?>" />
				<?php endif ?>
				<span><?php echo $sitename ?></span>
			</a>
			<small class="site-slogan"><?php echo $slogan ?></small>
		</div>
	</div>
	<!-- //LOGO -->
	
	<!-- Logo Patronato COLORES -->
		<?php if ($this->countModules('eltiempo')) : ?>
			<div class="col-xs-12 col-md-3 <?php $this->_c('eltiempo')?>">
				<jdoc:include type="modules" name="<?php $this->_p('eltiempo') ?>" style="raw" />
			</div>
		<?php endif ?>
	<!--//Logo Patronato -->
	
		
		<div class="col-xs-12 col-md-6 col-sm-4">
			<jdoc:include type="modules" name="<?php $this->_p('social-icons') ?>" style="raw" />
		</div>
		
	
	
	

	<?php if ($headright): ?>
		<div class="col-xs-12 col-sm-4">
			<?php if ($this->countModules('head-search')) : ?>
				<!-- HEAD SEARCH -->
				<div class="head-search <?php $this->_c('head-search') ?>">
					<jdoc:include type="modules" name="<?php $this->_p('head-search') ?>" style="raw" />
				</div>
				<!-- //HEAD SEARCH -->
			<?php endif ?>

			<?php if ($this->countModules('languageswitcherload')) : ?>
				<!-- LANGUAGE SWITCHER -->
				<div class="languageswitcherload">
					<jdoc:include type="modules" name="<?php $this->_p('languageswitcherload') ?>" style="raw" />
				</div>
				<!-- //LANGUAGE SWITCHER -->
			<?php endif ?>
		</div>
	<?php endif ?>

</div>

</header>

aman204

salvi992 The third module position is not appearing as envisaged probably due to div mismatches or due to wrapping parent html div tag - closing before where it is to be contemplated for which you can check and verify here or it can also be checked through other validator services

As informed earlier, It would depend upon your skills and expertise in getting the desired results as this would also require to ensure that the html tags and php references are being placed in right location and coding being done in well organized way, as mismatches can always tend to break the template structure for particular area

salvi992

OK. I'll check it.

Thank you very much, aman204.

salvi992

I got it !! The responsible was an error in a tag <div> that I didn't realized. I've been one day and a half to notice the error. The template works perfectly and it fits to all devices and screen sizes that I've tested . You can see it on my web.

Thank you very much, again. The link that you have sent me couldn't find the error properly, though it detected something strange. Other div testers didn't even detect any error.

Well, I will prepare the next question. :-D

aman204

salvi992 Sure, You can let us know in case further assistance needed, however, would be always suggested to open new topic for varied issues/queries if it doesnt relate to initial topic so as to avoid confusion primarily 🙂

Liked the way you have been troubeshooting the relative issue as this is something which requires dedication and perseverance in initial phase

"If you say that something is worth the effort, you mean that it will justify the energy that you have spent or will spend on it. Fortunately, the chore of leaf sweeping is well worth the effort." 🙂

Best of luck!