Public Forums 71,145 posts

[Scott Lavelle Friend Scott LavelleJoin date: November 2010Posts: 266Downloads:16Uploads:5 Thanks: 6 Thanked: 64 times in 27 posts]

#191050

Hi all. I build custom templates using the T3 framework and most of them have some custom module positions in the header area. I’ve been pretty successful in getting the code in there to do it and have it work correctly through all the responsive levels, but I struggle with understanding some of the aspects of this, so I’m looking for some advice.

Here’s an example of what I might do:

I create a custom html module and name it Header Info and put it in position header-slogan.
I edit the header.php file and include something like this:


<div class="span5 header-slogan <?php $this->_c('header-slogan')?>">
<jdoc:include type="modules" name="<?php $this->_p('header-slogan') ?>" style="raw" />
</div>


The I update my custom.css to position and style the text and such.

So far so good.

So here’s where the challenge is: When I go to the template manager and go to the layout tab, then to the responsive section, when I look at the modules in the header area, they are where I expect them to be, but I don’t have any options other than to disable or enable. I’d like to be able to control things like how many span positions it takes so I can force it to drop under the logo – to have more control of the placement/positioning of the module based on the responsive.

For example, with the spotlights, I can go to a three-across spotlight and when in X-Tablet and smaller, force them to be full width so that they stack up under each other rather than sitting side-by-side. I’d like to be able to do this with my custom modules.

If I have a span5 assigned, as above, it stays a span5 in responsive modes and I have issues with trying to get it to center under the logo – it would be common on the smaller sizes for the logo to center, then my custom module ends up on the next line down, but because it’s a span5, it flats to the left and it doesn’t seem there is anything I can do to get it to center up.

The only way that I’ve been able to do something similar is to create another location in the template and load that module position (header-slogan) into that location in the smaller versions and disable the header versions of the same. This works, but it’s a pain 🙂

Am I missing something here or is this just the way it works?

Any assistance is appreciated.

Scott Lavelle - Technical Resource Solutions, LLC
Certified Joomla Administrator

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#507645

Hi Scott,

Generally, the span width of Bootstrap will automatically resize to the corresponding width on different device screens. I.e

span5: 475px in 1200px and higher screens.
span5: 365px in 767px and smaller screens

Anyways, you can try to add below css styles into custom.css file:

@media (max-width: 767px) {
.span5.header-slogan {
clear: both;
}
}


So that, the header-slogan module will always under the logo mobile/table view.

[Scott Lavelle Friend Scott LavelleJoin date: November 2010Posts: 266Downloads:16Uploads:5 Thanks: 6 Thanked: 64 times in 27 posts]

#507678

Thanks Leo, but that is only part of it. The issue that I have is not just that it doesn’t drop below in a predictable way, it’s that when it does, it’s still just a span5. So when I say “center” the div that’s contained in it (like a div.custom_header-slogan or whatever), that div is only within a block taking up about 40$ of the screen, so the center of that space is not centered on the page, it’s sitting to the left still.

I effectively want to make it work like the spotlights do. When the size gets below a threshold, I want it to take up all 12 columns, which would force it to drop to the next row as well as allow me to position the contents of it so that they are centered on the screen.

It would be ideal if I could do this with the admin backend controls like I can with the spotlights, but even if it was only an option to do via the css/less files, that would suffice if I could at least control it.

Thanks again for your help. Looking forward to your response.

Scott Lavelle - Technical Resource Solutions, LLC
Certified Joomla Administrator

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#507698

Hi Scott,

The spotlight is the special blocks defined in the base layout of our T3 framework which allows user to select the number of positions and span width on responsive layout. But you see that, the block (i.e header) can’t define another block (spotlight-3) inside it.

By that reason, you should use the overridden css styles to make your header-slogan modules to be adjusted on responsive screens. If possible, can you put your website’s url here or send me PM ? I will try to give you more accurate css styles on your website.

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#508346

Hi Scott,

Thank you for sending PM i already received this morning. After reading carefully your requirement in forcing the slogan module to get down the line (responsive) from 700px width screen, the reason that the slogon doesn’t get down to 2nd line on 700px because we defined only the width of logo on responsive with @media query on 767px and smaller screen, not fixed width like 700px.

So, you can get your requirement by openning templatest3_blanklessstyle-responsive.less file, find (29-33th) lines:

.logo {
float: left !important;
text-align: center;
width: 100% !important;
}

>> Change to width: 100%;

Then also put below css tyles into the end of style-responsive.less file:

// Adjusting the logo to get 2nd line since 700px
@media (min-width: 700px) and (max-width: 900px) {
.logo-image a {
width: 143px;
height: 138px;
background-size: 100% 100%;
}
}

@media (max-width: 700px) {
.logo {
width: 100% !important;
}
}

Note: Make sure you backup your files before editting and look my guide carefully.

1 user says Thank You to phong nam for this useful post

1. Scott Lavelle

[Scott Lavelle Friend Scott LavelleJoin date: November 2010Posts: 266Downloads:16Uploads:5 Thanks: 6 Thanked: 64 times in 27 posts]

#508501

This advice was pointed at the logo going 100% (which was already happening), but I was able to adapt it to my need. Such a simple fix that I didn’t even consider! Simply making the width of the div that contains my slogan and social icons (div.header-info for example) 100% totally got what I wanted.

In the event anyone else looks at this, if you have additional modules in the header.php that are to the right of the logo (or whatever), they will likely respond to a certain degree on their own, but if you have coded them right in the template, then you can give their outermost div class a width: 100% in the style-responsive.less and that will force it to take the full 12 span spaces of the site.

Thanks Leo.

Scott Lavelle - Technical Resource Solutions, LLC
Certified Joomla Administrator

[Author]

Posts