Joomla Templates Club 406,261 posts

[denmac Friend denmacJoin date: July 2010Posts: 39Downloads:0Uploads:13 Thanks: 6 Thanked: 1 times in 1 posts]

#174520

I posted this question before in another question.

I have a logo that has some code on it (links and extra images) I am wanting to know how to change the current logo area into a module so I can add my css and html in that way. How do I change it,
kind Regards

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#441241

<em>@denmac 304370 wrote:</em><blockquote>I posted this question before in another question.

I have a logo that has some code on it (links and extra images) I am wanting to know how to change the current logo area into a module so I can add my css and html in that way. How do I change it,
kind Regards</blockquote>
Hmmm … this sounds interesting – and I am quite certain can be accomplished. Assuming you want your logo in the same space, this would be a matter of creating a new module position and styling/positioning it accordingly.

Perhaps you can provide a mock-up screenshot of your idea/what you are wanting to accomplish?

[denmac Friend denmacJoin date: July 2010Posts: 39Downloads:0Uploads:13 Thanks: 6 Thanked: 1 times in 1 posts]

#441258

here is what I am after

Possible? Thanks

---

Attachments:

1. 

[denmac Friend denmacJoin date: July 2010Posts: 39Downloads:0Uploads:13 Thanks: 6 Thanked: 1 times in 1 posts]

#441809

Hey there, anyone. I know you guys are busy!

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#441851

<em>@denmac 305066 wrote:</em><blockquote>Hey there, anyone. I know you guys are busy!</blockquote>
What you would need to do is create a new module position within the header section of your template, and then create/configure relative css rules to position the module where the logo it. (For this, you can duplicate the positioning of the css for the logo that is within your template.css file).

It’s actually not too difficult a task.

[denmac Friend denmacJoin date: July 2010Posts: 39Downloads:0Uploads:13 Thanks: 6 Thanked: 1 times in 1 posts]

#441852

Thanks Tom,

I will be the first to say I am not a great coder. I have given it a go and failed. I tried copying the header-r css etc. Just need a pointer and a little bit of code.

Cheers

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#441854

<em>@denmac 305117 wrote:</em><blockquote>Thanks Tom,

I will be the first to say I am not a great coder. I have given it a go and failed. I tried copying the header-r css etc. Just need a pointer and a little bit of code.

Cheers</blockquote>
Not a problem … I will throw together a short tutorial to help guide you.
I’ll have something for you soon.

1 user says Thank You to TomC for this useful post

1. denmac

[denmac Friend denmacJoin date: July 2010Posts: 39Downloads:0Uploads:13 Thanks: 6 Thanked: 1 times in 1 posts]

#441863

<em>@TomC 305119 wrote:</em><blockquote>Not a problem … I will throw together a short tutorial to help guide you.
I’ll have something for you soon.</blockquote>

Thank you so much for your help

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#442114

STEP ONE:
Make a BACK UP of ALL FILES that we’ll be working with – in case you need to revert back.

STEP TWO:
Open templatesja_teline_ivblocksheader.php


edit as follows:


<blockquote>
<div class=”ja-header-l”>
<jdoc:include type=”modules” name=”header-l” />
</div>

<div class=”ja-header-r”>
<jdoc:include type=”modules” name=”header-r” />
</div>
</blockquote>

SAVE CHANGES

STEP THREE:
Add this position to templateDetails.xml … as follows:

<blockquote>
<positions>
<position>hornav</position>
<position>breadcrumbs</position>
<position>search</position>
<position>banner</position>
<position>left</position>
<position>right</position>
<position>right1</position>
<position>right2</position>
<position>top</position>
<position>headlines</position>
<position>header-l</position>
<position>header-r</position>
<position>mega</position>
</blockquote>

SAVE CHANGES

STEP FOUR:
Within templatesja_teline_ivcsstemplate.css, create the CSS for the new position.
(you can add this at/about line 744)

<blockquote>
/* Header Left —*/
.ja-header-l {
padding: 0;
position: absolute;
right: 0;
top: 40px;
width: 500px;
}
</blockquote>

of course, you can play around with the various properties to configure to suit your logo file’s needs.


SAVE CHANGES




STEP FIVE:
Within your Module Manager, create your Custom HTML module with your logo image and related coding.
Select “header-l” from the position list. (If it isn’t displaying, type it in manually).




SAVE CHANGES – CLEAR CACHE – REFRESH PAGE

That’s the basic process for what you want to accomplish. As with most customization, there will likely be some additional trial-and-error you will need to perform to get things just right – but it’s all part of the process and, when all is said and done, you will now have this new info as part of your own personal knowledgebase.

Let me know how things go.

1 user says Thank You to TomC for this useful post

1. waelali

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#442117

ADDENDUM:

If the logo image/text continues to display after performing the above steps, you may need to edit one additional file . . .

/plugins/system/jat3/jat3/base-themes/default/header.php

<blockquote>// No direct access
defined(‘_JEXEC’) or die;
?>
<?php
$app = & JFactory::getApplication();
$siteName = $app->getCfg(‘sitename’);
if ($this->getParam(‘logoType’, ‘image’)==’image’): ?>
<h1 class=”logo”>
<a href=”index.php” title=”<?php echo $siteName; ?>”><span><?php echo $siteName; ?></span></a>
</h1>
<?php else:
$logoText = (trim($this->getParam(‘logoText’))==”) ? $siteName : JText::_(trim($this->getParam(‘logoText’)));
$sloganText = JText::_(trim($this->getParam(‘sloganText’))); ?>
<div class=”logo-text”>
<h1><a href=”<?php JURI::base(true) ?>” title=”<?php echo $siteName; ?>”><span><?php echo $logoText; ?></span></a></h1>
<p class=”site-slogan”><?php echo $sloganText;?></p>
</div>
<?php endif; ?>


<?php if($this->countModules(‘search’)) : ?>
<div id=”ja-search”>
<jdoc:include type=”modules” name=”search” />
</div>
<?php endif; ?>
</blockquote>

edit as follows:

<blockquote>
<?php if($this->countModules(‘search’)) : ?>
<div id=”ja-search”>
<jdoc:include type=”modules” name=”search” />
</div>
<?php endif; ?>
</blockquote>

If the steps described don’t achieve the results you’re looking for, let me know and we’ll continue to work on it together.

😎

[Author]

Posts