Public Forums 71,145 posts

[krumz Friend krumzJoin date: October 2012Posts: 138Downloads:77Uploads:22 Thanks: 23 Thanked: 4 times in 2 posts]

#205307

Hey everyone,

I hope I’ve posted this question to the right forum, it seemed to be the only one that fit? The website is in the process of my building it and not online.

I am adding a new block to the t3bs3blank template. The block I want to add will be between the header and the menu. I want to be able to add any image I want (same size as header image) to any page I want instead of using the header image specified in the template settings.

I’m also doing this because I really want to use this template and I have already added some customization that I really like, I’ve made it my own completely unique template and love it.

So far I have created a new block to my copy of default.php which looks like this, it is the headimg block:

<?php $this->loadBlock(‘header’) ?>

<?php $this->loadBlock(‘headimg’) ?>

<?php $this->loadBlock(‘mainnav’) ?>

<?php $this->loadBlock(‘spotlight-1’) ?>

<?php $this->loadBlock(‘copy-mainbody-content-left’) ?>

<?php $this->loadBlock(‘spotlight-2’) ?>

<?php $this->loadBlock(‘navhelper’) ?>

<?php $this->loadBlock(‘footer’) ?>

Then I created a new php file called headimg.php. This is where I’m not sure what I should do. Right now I’m playing around and have added a few pieces of code which seems to kind of work but obviously I’m seeing 3 “headimg” positions in my template. This is what I have added to headimg.php:

<div id=”t3-mainbody” class=”container t3-mainbody”>

<div class=”row”>

<!– //Full Width Image After Header Image and Before Menu –>

<?php if ($this->countModules(‘headimg’)) : ?>
<!– after content full width –>
<div class=”wrap t3-headimg <?php $this->_c(‘headimg’) ?>”>
<div class=”container t3-content”>
<jdoc:include type=”modules” name=”<?php $this->_p(‘headimg’) ?>” style=”T3Xhtml” />
</div>
</div>
<!–//end after content full width –>
<?php endif ?>
<jdoc:include type=”modules” name=”<?php $this->_p(‘headimg’) ?>” />
<jdoc:include type=”modules” name=”<?php $this->_p($headimg) ?>” style=”JAxhtml” />
</div>
</div>

What is the right code I should be adding here?

And – should I add this position to my copy of the default.ini file and any other files?

Thanks so much for your help.

[krumz Friend krumzJoin date: October 2012Posts: 138Downloads:77Uploads:22 Thanks: 23 Thanked: 4 times in 2 posts]

#565863

So I may have solved my own question after messing around a bit. Below is what I ended up with, I now have my new position which is the full width of the template (between the header logo image and the menu) where a different header type image can be added to any page I want using my favorite template. t3bs3blank is highly customizable and I love it. Hope the code is right.

I can mark this as solved if someone can confirm the below code is correct. Thanks.

<div id=”t3-mainbody” class=”container t3-mainbody”>

<div class=”row”>

<!– //Full Width Image Before Menu –>

<?php if ($this->countModules(‘headimg’)) : ?>
<!– after content full width –>
<div class=”wrap t3-headimg <?php $this->_c(‘headimg’) ?>”>
<div class=”container t3-content”>
<jdoc:include type=”modules” name=”<?php $this->_p(‘headimg’) ?>” style=”T3Xhtml” />
</div>
</div>
<!–//end headimg –>
<?php endif ?>

</div>
</div>

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#565866

Hi krumz,

Basically, the ‘headimg’ block on your site will load a module position called ‘headimg‘ and you can assign module (which displays image) to this position.

The code inside ‘headimg’ block can be:


<?php
defined('_JEXEC') or die;
?>

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


Also make sure that you’ve created headimg position already.

You can check out this TIPS for how to CREATE A NEW MODULE POSITION

[krumz Friend krumzJoin date: October 2012Posts: 138Downloads:77Uploads:22 Thanks: 23 Thanked: 4 times in 2 posts]

#565949

Thank you Saguaros,

Maybe you can help me better explain a couple of things. I did do a search in the documents available but I’m not sure I completely understand what the difference is between style=”raw” vs style=”T3Xhtml” and why “raw” should be used instead of “T3Xhtml”?

Thank you for your help, I appreciate it very much.

So this is the final code:

<?php
/**
* @package T3 Blank
* Copyright (C) 2005 – 2012 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/

defined(‘_JEXEC’) or die;
?>

<?php if ($this->countModules(‘headimg’)) : ?>
<!– headimg –>
<div class=”wrap ja-headimg<?php $this->_c(‘headimg’) ?>”>
<div class=”container t3-content”>
<jdoc:include type=”modules” name=”<?php $this->_p(‘headimg’) ?>” style=”raw” />
</div>
</div>
<!– //headimg –>
<?php endif ?>

How do I make this responsive without having to add “class img-responsive” to the image? Is there something I can do with css?

Update: I surprise myself sometimes.

So I added this to the css to make image responsive and it seems to work. But is it correct?

.ja-headimg img{width:100%!important; background-size:100%!important; background-position:center center!important;}

[krumz Friend krumzJoin date: October 2012Posts: 138Downloads:77Uploads:22 Thanks: 23 Thanked: 4 times in 2 posts]

#565950

Maybe I posted to soon. Hit Less to CSS (which is something else altogether I don’t understand) and know my changes are completely messed up and my template is all skewed. Schnikies!!!! I’ve hosed myself. Crap.

Update: Later in the afternoon after I calmed down and quit freaking out – I figured out I had a div tag that wasn’t closed in a module that was causing my template to tweak.

Uhm. Note to self – Breathe, Relax, Take a Second Look and when nothing else works. Freak out.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#566089

Also notice that you should put your custom CSS code into the file: /templates/ja_your_default_template/css/custom.css (create this file if it doesn’t exist). This file will keep your custom code not be affected when you update template or compile less to css.

1 user says Thank You to Saguaros for this useful post

1. krumz

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

#566163

Hey krumz – for this code that you posted:


.ja-headimg img{width:100%!important; background-size:100%!important; background-position:center center!important;}


Unless you are actually applying a background image to this stuff, you shouldn’t need the background-size or the background-position parts of this. The img directive should take care of any image that you are adding as a part of the module itself.

You will definitely want to have that custom.css file noted above, as it will let you add css that falls at the end of the css file chain so it will be the “final say” as long as it covers the cascade.

You cannot backup too often! Especailly while learning how all the template parts work together. I recommend getting a copy of Akeeba Backup installed on your site. That will backup everything you have at once. Even though it’s not a one click restore, the zip file it creates (config to use zip and not jpa) will contain all of your template files as well. Of course, you could just copy your template folder via FTP, but the Akeeba backup will also give you a full site safety net should you need one.

Hope that helps.

Scott Lavelle - Technical Resource Solutions, LLC
Certified Joomla Administrator

1 user says Thank You to Scott Lavelle for this useful post

1. krumz

[krumz Friend krumzJoin date: October 2012Posts: 138Downloads:77Uploads:22 Thanks: 23 Thanked: 4 times in 2 posts]

#566180

Yes Saguaros, thank you. I do have the custom css file (that part I am aware of 🙂 )

[krumz Friend krumzJoin date: October 2012Posts: 138Downloads:77Uploads:22 Thanks: 23 Thanked: 4 times in 2 posts]

#566181

Hello slavelle,

This new position will mostly be used for images. My daughter wanted something where she could have a different logo image on any page, so this works great. So knowing that this new position will mainly be used for images, is the snippet of css I have correct?

Yes, I do use Akeeba and also backup sql through myphpadmin. I never Not backup, I know what you mean you can never do it too often. I am pretty familiar with Joomla, been using it for years, but there are just some things I have never really quite understood, such as Less to CSS.

Thanks.

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

#566185

On the background images, it really depends if you are actually using background images for that section or not. If so, leave them alone; if not, they won’t hurt anything, but if you later added a background image to that container, the css rules you have for them might do things you didn’t expect. Just really noting the difference between “background-image” and “img”. The latter is not a background anything, so the background related css rules will have nothing to do with it. Make sense?

As for the LESS->CSS thing, maybe this will help:

In case you didn’t know, LESS is like a more advanced form of css. You can do things like nest rules in other rules, modify css programmatically (like “darken” or “lighten”), and some other cool stuff. In order for it to work though, you have to have a “pre-processor” running. When you have the template in Development Mode (ON) the pre-processor runs live as you change the LESS files. This makes the site load slower each time you change one of the LESS files, but it’s faster than if you had to fully-compile all of them at once to account for a single LESS change in one file.

When you take the site out of Development mode, you have to finalize the LESS->CSS process by clicking that button. So you take it out of Dev mode and click the button. This causes a bunch of css files to be created from the LESS files, overwriting the css files that are in the template folders (except your custom.css). This allows the site to run without having to process LESS files on the fly any more. You should not ever modify the css files directly (except the custom.css), as they will get overwritten by the compilation of the LESS files.

If you take it back into Development mode, just remember that you need to compile the LESS files again when you are done.

Does that help to clarify the role and purpose?

Scott Lavelle - Technical Resource Solutions, LLC
Certified Joomla Administrator

1 user says Thank You to Scott Lavelle for this useful post

1. krumz

[krumz Friend krumzJoin date: October 2012Posts: 138Downloads:77Uploads:22 Thanks: 23 Thanked: 4 times in 2 posts]

#566187

Yes, thank you slavelle.

[krumz Friend krumzJoin date: October 2012Posts: 138Downloads:77Uploads:22 Thanks: 23 Thanked: 4 times in 2 posts]

#566488

Hey Saguaros or slavelle

First, I know this thread has been marked “Answered” so I don’t know if it’s right for me to ask another question or not.

So I added that new position and I love it! Thank you both for your help. But I was wondering if there is a way in css or something that I can make the “logo text” only show on small devices. I know for modules under “module class suffix” I can enter ” visible-xs visible-sm”, can I do this for the logo text as well. I only want it to show on small devices.

Thanks.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#566595

You can override the style by adding the follow css rule into: /templates/ja_your_default_template/css/custom.css file (create this file if it doesn’t exist)

@media (max-width: 320px) {
.logo-image span, .logo-image small {
display: block !important;
}
}


[krumz Friend krumzJoin date: October 2012Posts: 138Downloads:77Uploads:22 Thanks: 23 Thanked: 4 times in 2 posts]

#567474

Thank you Saguaros I just saw this.

[Author]

Posts