Template header: Ads on each side of site logo

Everything to do with Joomla! 3.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
User avatar
Bob_Sprague
Joomla! Intern
Joomla! Intern
Posts: 86
Joined: Mon Oct 15, 2007 3:25 pm
Location: Arlington, Mass.
Contact:

Template header: Ads on each side of site logo

Postby Bob_Sprague » Thu Mar 08, 2018 8:10 pm

I am working on a new template for https://www.yourarlington.com/, a site using the latest Joomla! version.

The template is on a test site at http://arlingtonmanews.com/index.php

I want to place module positions in the header to accommodate 250px-wide ads on either side of the site logo.

In the code for this template (Artisteer), I am looking for the locations to place the module positions. Is that within an image? Is it in .css?

I know some parts of this puzzle, but not others, and would appreciate help.

Bob Sprague
Bob Sprague
Your news, views at http://www.yourarlington.com/

venci
Joomla! Apprentice
Joomla! Apprentice
Posts: 45
Joined: Sat Nov 17, 2012 6:10 am

Re: Template header: Ads on each side of site logo

Postby venci » Fri Mar 09, 2018 8:27 am

Hi,
To have a modular position on the side of the header you must change the index.php file to the template.
It's just an idea how to do it:

Code: Select all

<div class="headerblock">
<div class="headerleft">module position</div>
<div class="art-header">Header</div>
<div class="headerright">module position</div>
</div>

You need to edit and template.css file to suit your needs.
Hope this helps.

User avatar
Bob_Sprague
Joomla! Intern
Joomla! Intern
Posts: 86
Joined: Mon Oct 15, 2007 3:25 pm
Location: Arlington, Mass.
Contact:

Re: Template header: Ads on each side of site logo

Postby Bob_Sprague » Fri Mar 09, 2018 1:22 pm

Thanks very much for your reply, venci. What I am seeking is little more complicated. I want to embed two module positions inside of the header -- on either side of the site logo. Looking the code behind my test site -- http://arlingtonmanews.com/ -- I cannot tell what header image I need to adjust to accommodate "windows" for each of those module positions.
Bob Sprague
Your news, views at http://www.yourarlington.com/

venci
Joomla! Apprentice
Joomla! Apprentice
Posts: 45
Joined: Sat Nov 17, 2012 6:10 am

Re: Template header: Ads on each side of site logo

Postby venci » Fri Mar 09, 2018 1:35 pm

Hi,
If I want to available your link I get the following message:

Access Denied
You are attempting to access a forbidden site.
Consult your system administrator for details.

User avatar
Bob_Sprague
Joomla! Intern
Joomla! Intern
Posts: 86
Joined: Mon Oct 15, 2007 3:25 pm
Location: Arlington, Mass.
Contact:

Re: Template header: Ads on each side of site logo

Postby Bob_Sprague » Fri Mar 09, 2018 1:49 pm

Hmm. Not sure why. While it is my test site, it is available to any who knows about it: http://arlingtonmanews.com/

Does anyone else have an issue?
Bob Sprague
Your news, views at http://www.yourarlington.com/

User avatar
starazure
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 138
Joined: Mon Sep 11, 2017 5:18 pm
Location: OH, United States
Contact:

Re: Template header: Ads on each side of site logo

Postby starazure » Wed Mar 21, 2018 9:48 pm

Simply use Bootstrap grids that use flexbox.

col-md-5 - left header

col-md-2 (for the logo)

col-md-5 - right header.

User avatar
Bob_Sprague
Joomla! Intern
Joomla! Intern
Posts: 86
Joined: Mon Oct 15, 2007 3:25 pm
Location: Arlington, Mass.
Contact:

Re: Template header: Ads on each side of site logo

Postby Bob_Sprague » Thu Mar 22, 2018 7:21 pm

tijjk wrote:Simply use Bootstrap grids that use flexbox.

col-md-5 - left header

col-md-2 (for the logo)

col-md-5 - right header.


Thank you for this response, tijjk. Can you recommend a good tutorial explaining Bootstrap grids using flexbox? Thank you.
Bob Sprague
Your news, views at http://www.yourarlington.com/

User avatar
starazure
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 138
Joined: Mon Sep 11, 2017 5:18 pm
Location: OH, United States
Contact:

Re: Template header: Ads on each side of site logo

Postby starazure » Thu Mar 22, 2018 11:20 pm

Its very simple so I dont think it will need a tutorial. I will try to explain.

1) Load bootstrap 4 in your template. I know Joomla loads bootstrap 3 but I wrote a plugin to disable it. For the time being dont worry about bootstrap 3. I can help you once you are all set with this.
To load bootstrap use code below:

Code: Select all

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


2) the in your header section use this code:

Code: Select all

<div class="container">
  <div class="row">
    <div class="col-md-5">
      Your left header code goes here.
    </div>
    <div class="col-md-2">
      Your logo here
    </div>
    <div class="col-md-5">
         Your right header code goes here.
    </div>
  </div>
</div>


Thats it. This is responsive. On smaller screens they will stack one below other. If you want to hide specific elements on smaller screens, let me know. if you are stuck and still need help, let me know.

User avatar
Bob_Sprague
Joomla! Intern
Joomla! Intern
Posts: 86
Joined: Mon Oct 15, 2007 3:25 pm
Location: Arlington, Mass.
Contact:

Re: Template header: Ads on each side of site logo

Postby Bob_Sprague » Thu Mar 22, 2018 11:32 pm

Thanks much, tijjk. I will work on this.
Bob Sprague
Your news, views at http://www.yourarlington.com/

User avatar
starazure
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 138
Joined: Mon Sep 11, 2017 5:18 pm
Location: OH, United States
Contact:

Re: Template header: Ads on each side of site logo

Postby starazure » Fri Mar 23, 2018 10:35 pm

ok, I forgot to mention these points too:
There are two main ways of doing this:
1) create a custom html module and code like above. In the custom html module you can simply add the html code - This is the easy way but I like the method below:
2) Modify your template.xml to add 3 positions - header1, logo and header 2 - Then add these positions in your index.php inside the code I provided above.
Free fastest Joomla themes - https://starazure.com/joomla-templates

Free useful Joomla extensions - https://starazure.com/extensions

User avatar
Bob_Sprague
Joomla! Intern
Joomla! Intern
Posts: 86
Joined: Mon Oct 15, 2007 3:25 pm
Location: Arlington, Mass.
Contact:

Re: Template header: Ads on each side of site logo

Postby Bob_Sprague » Fri Mar 23, 2018 11:01 pm

Gotcha on all.
Bob Sprague
Your news, views at http://www.yourarlington.com/

User avatar
Bob_Sprague
Joomla! Intern
Joomla! Intern
Posts: 86
Joined: Mon Oct 15, 2007 3:25 pm
Location: Arlington, Mass.
Contact:

Re: Template header: Ads on each side of site logo

Postby Bob_Sprague » Mon Mar 26, 2018 7:06 pm

Thanks for your advice, tijjk. I have followed your suggestions, but nothing added to the code displays.

See the test site at http://arlingtonmanews.com/index.php

What you see in the header with the embedded logo was there before I added suggested code.

I suspect I have fouled something up and welcome your help.
Bob Sprague
Your news, views at http://www.yourarlington.com/

User avatar
starazure
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 138
Joined: Mon Sep 11, 2017 5:18 pm
Location: OH, United States
Contact:

Re: Template header: Ads on each side of site logo

Postby starazure » Tue Mar 27, 2018 12:40 am

Hello - I created a fiddle for you - You can see the modules are on either side of the logo - https://jsfiddle.net/tijjk/a5hf36hp/19/

A few things:
1) Your template is heavily loaded with a lot of css and js files. I have to say that because its just not the right thing. Its not your fault - many files are loaded by the template and then there are all those extensions. if you view the source of your home page, you can see all those files being loaded. please install extensions only if necessary.
2) That aside, Bootstrap was not loaded on your site. I know that yet another css file. Thats probably why it didnt work for you.

My humble suggestions.
1) Dont install extensions for simple things. For example the [youtube] video section - You can use https://getbootstrap.com/docs/4.0/components/navs/#tabs

2) Use a lighter template if possible.

3) Instead of the DJ slider on the left bottom use https://getbootstrap.com/docs/4.0/components/carousel/. All these components load a lot of css and js.
Free fastest Joomla themes - https://starazure.com/joomla-templates

Free useful Joomla extensions - https://starazure.com/extensions

User avatar
Bob_Sprague
Joomla! Intern
Joomla! Intern
Posts: 86
Joined: Mon Oct 15, 2007 3:25 pm
Location: Arlington, Mass.
Contact:

Re: Template header: Ads on each side of site logo

Postby Bob_Sprague » Tue Mar 27, 2018 9:15 pm

tijjk wrote:2) That aside, Bootstrap was not loaded on your site. I know that yet another css file. Thats probably why it didnt work for you.


Much to digest here. Let's start small. You did not indicate where to place the Boostrap link. I placed it below <head> in my test site's template. Is that correct?
Bob Sprague
Your news, views at http://www.yourarlington.com/

User avatar
starazure
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 138
Joined: Mon Sep 11, 2017 5:18 pm
Location: OH, United States
Contact:

Re: Template header: Ads on each side of site logo

Postby starazure » Wed Mar 28, 2018 1:59 am

Bob_Sprague wrote:
tijjk wrote:2) That aside, Bootstrap was not loaded on your site. I know that yet another css file. Thats probably why it didnt work for you.


Much to digest here. Let's start small. You did not indicate where to place the Boostrap link. I placed it below <head> in my test site's template. Is that correct?


Yes - It should be placed like any other css file.
Free fastest Joomla themes - https://starazure.com/joomla-templates

Free useful Joomla extensions - https://starazure.com/extensions

User avatar
Bob_Sprague
Joomla! Intern
Joomla! Intern
Posts: 86
Joined: Mon Oct 15, 2007 3:25 pm
Location: Arlington, Mass.
Contact:

Re: Template header: Ads on each side of site logo

Postby Bob_Sprague » Thu Mar 29, 2018 4:42 pm

tijjk wrote:
Bob_Sprague wrote:
tijjk wrote:2) That aside, Bootstrap was not loaded on your site. I know that yet another css file. Thats probably why it didnt work for you.


Much to digest here. Let's start small. You did not indicate where to place the Boostrap link. I placed it below <head> in my test site's template. Is that correct?


Yes - It should be placed like any other css file.


Thanks for confirming, tijjk, and for your patience. Your code was not showing up because I had made the wrong template file the default. The right one is assigned now.

See the left-middle-right code placers at the very top of http://arlingtonmanews.com/index.php. Does this mean that Bootstrap 4 is loading, or does it mean something else?
Bob Sprague
Your news, views at http://www.yourarlington.com/

User avatar
starazure
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 138
Joined: Mon Sep 11, 2017 5:18 pm
Location: OH, United States
Contact:

Re: Template header: Ads on each side of site logo

Postby starazure » Thu Mar 29, 2018 9:41 pm

Bob_Sprague wrote:
tijjk wrote:
Bob_Sprague wrote:
Much to digest here. Let's start small. You did not indicate where to place the Boostrap link. I placed it below <head> in my test site's template. Is that correct?


Yes - It should be placed like any other css file.


Thanks for confirming, tijjk, and for your patience. Your code was not showing up because I had made the wrong template file the default. The right one is assigned now.

See the left-middle-right code placers at the very top of http://arlingtonmanews.com/index.php. Does this mean that Bootstrap 4 is loading, or does it mean something else?


Thats correct - Bootstrap is loading and working as expected. Now you can add your code/logo instead of the text.
Free fastest Joomla themes - https://starazure.com/joomla-templates

Free useful Joomla extensions - https://starazure.com/extensions

User avatar
Bob_Sprague
Joomla! Intern
Joomla! Intern
Posts: 86
Joined: Mon Oct 15, 2007 3:25 pm
Location: Arlington, Mass.
Contact:

Re: Template header: Ads on each side of site logo

Postby Bob_Sprague » Thu Mar 29, 2018 9:57 pm

Thanks much, tijjk. I will proceed. (I manage a news website, so I can work on this just a bit at a time.)

By the way, do you have a general opinion about the Helix Ultimate Framework?
Bob Sprague
Your news, views at http://www.yourarlington.com/

User avatar
starazure
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 138
Joined: Mon Sep 11, 2017 5:18 pm
Location: OH, United States
Contact:

Re: Template header: Ads on each side of site logo

Postby starazure » Sat Mar 31, 2018 6:52 pm

Bob_Sprague wrote:Thanks much, tijjk. I will proceed. (I manage a news website, so I can work on this just a bit at a time.)

By the way, do you have a general opinion about the Helix Ultimate Framework?


Honestly, I don't want to comment on other frameworks because I make themes and framework myself.
Which is best - It all depends on your needs. I am glad you are working on a news website because our next theme is called StarAzure News. Please try it's free - if you can when it's released.
I don't want to say anyone is good or bad but you should create a test site on your local computer and install many themes to see what is best. Every site is different and everyone has different requirements. Lighter, simpler sites with meaningful content improves google ranking.
If you need more help with your site, let me know. 10 years ago I was struggling to make simple things work so I am willing to help.
Free fastest Joomla themes - https://starazure.com/joomla-templates

Free useful Joomla extensions - https://starazure.com/extensions

User avatar
Bob_Sprague
Joomla! Intern
Joomla! Intern
Posts: 86
Joined: Mon Oct 15, 2007 3:25 pm
Location: Arlington, Mass.
Contact:

Re: Template header: Ads on each side of site logo

Postby Bob_Sprague » Sat Mar 31, 2018 7:28 pm

tijjk wrote:
Bob_Sprague wrote:By the way, do you have a general opinion about the Helix Ultimate Framework?


Honestly, I don't want to comment on other frameworks because I make themes and framework myself.
Which is best - It all depends on your needs. I am glad you are working on a news website because our next theme is called StarAzure News. Please try it's free - if you can when it's released.
I don't want to say anyone is good or bad but you should create a test site on your local computer and install many themes to see what is best. Every site is different and everyone has different requirements. Lighter, simpler sites with meaningful content improves google ranking.
If you need more help with your site, let me know. 10 years ago I was struggling to make simple things work so I am willing to help.


No problem about commenting on frameworks. My query is also open to anyone reading this thread. And thanks for the template offer.

As to the specific case that you are helping me with: I have placed module-position code in the spots in the Bootstrap container you provided, but nothing is showing up at http://arlingtonmanews.com/. If anything would display, it would be *above* the gray header with site logo. The code shows up in the index.php and details.xml files, but not in the index.php when seen via viewsource. Appreciate any further advice.
Bob Sprague
Your news, views at http://www.yourarlington.com/

User avatar
starazure
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 138
Joined: Mon Sep 11, 2017 5:18 pm
Location: OH, United States
Contact:

Re: Template header: Ads on each side of site logo

Postby starazure » Sun Apr 01, 2018 12:33 am

Bob_Sprague wrote:
tijjk wrote:
Bob_Sprague wrote:By the way, do you have a general opinion about the Helix Ultimate Framework?


Honestly, I don't want to comment on other frameworks because I make themes and framework myself.
Which is best - It all depends on your needs. I am glad you are working on a news website because our next theme is called StarAzure News. Please try it's free - if you can when it's released.
I don't want to say anyone is good or bad but you should create a test site on your local computer and install many themes to see what is best. Every site is different and everyone has different requirements. Lighter, simpler sites with meaningful content improves google ranking.
If you need more help with your site, let me know. 10 years ago I was struggling to make simple things work so I am willing to help.


No problem about commenting on frameworks. My query is also open to anyone reading this thread. And thanks for the template offer.

As to the specific case that you are helping me with: I have placed module-position code in the spots in the Bootstrap container you provided, but nothing is showing up at http://arlingtonmanews.com/. If anything would display, it would be *above* the gray header with site logo. The code shows up in the index.php and details.xml files, but not in the index.php when seen via viewsource. Appreciate any further advice.


You need to:
1) add the code from my fiddle in the div which has - class="art-shapes"
2) Remove all css background from class="art-header". (template.css line 446).
Free fastest Joomla themes - https://starazure.com/joomla-templates

Free useful Joomla extensions - https://starazure.com/extensions

User avatar
Bob_Sprague
Joomla! Intern
Joomla! Intern
Posts: 86
Joined: Mon Oct 15, 2007 3:25 pm
Location: Arlington, Mass.
Contact:

Re: Template header: Ads on each side of site logo

Postby Bob_Sprague » Mon Apr 02, 2018 3:14 pm

tjiik wrote April 1:

<<You need to:
<<1) add the code from my fiddle in the div which has - class="art-shapes"
<<2) Remove all css background from class="art-header". (template.css line 446).>>

Bear with me. Where is the "code in my fiddle," and what is your "fiddle"?
Bob Sprague
Your news, views at http://www.yourarlington.com/


Return to “Templates for Joomla! 3.x”

Who is online

Users browsing this forum: No registered users and 6 guests