Template header: Ads on each side of site logo

[Bob_Sprague]

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

[venci]

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.

[Bob_Sprague]

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.

[venci]

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.

[Bob_Sprague]

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?

[starazure]

Simply use Bootstrap grids that use flexbox.

col-md-5 - left header

col-md-2 (for the logo)

col-md-5 - right header.

[Bob_Sprague]

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.

[starazure]

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.

[Bob_Sprague]

Thanks much, tijjk. I will work on this.

[starazure]

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.

[Bob_Sprague]

Gotcha on all.

[Bob_Sprague]

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.

[starazure]

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.

[Bob_Sprague]

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?

[starazure]

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.

[Bob_Sprague]

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?

[starazure]

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.

[Bob_Sprague]

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?

[starazure]

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.

[Bob_Sprague]

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.

[starazure]

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).

[Bob_Sprague]

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"?