Header need huge improvement


Author Message
dotcom22

Posted: 4/16/2009
Quote message 

Hi

Artisteer appear to be more dedicated to who need to build several template then who just need only one template. That mean who need several template want probably sell that template or sell services related to joomla. So I think template header are the most important point because generally it contain a logo, title and header image and so need to be very flexible part. Actually Artisteer permit only to set a header and background image and a title/slogan no more... I would like add animated logo (gif format) to left side and a header image to right side...and right now this is just impossible...

The structure of any generated template appear to not permit to manually make this kind of change because the default index.php are not build like any "real" template...Artisteer need to have some other related HTML files for display correctly the site...

Somebody have some tips for manually make some change ? What is the files need to be changed ??

I think more flexibility must be added to header for increase customization...making possible for example to divide header in different part where we can be free to add images, text, logo (with ability to put a link to homepage), swf files or module...
 
Jim

Posted: 4/16/2009
Quote message 

I also would like to use an amimated gif as my foreground picture in the header. I choose this from my files but it is not animated in IE7? Is there a way to use animated gif in header?
 
willdao3

Posted: 5/12/2009
Quote message 

Yes: Any way to add an animated .gif as foreground pic in header?

Thanks!
 
Garry

Posted: 5/13/2009
Quote message 

Insert it directly into your template or insert it to your joomla backend and assign a module position to it.
 
willdao3

Posted: 5/13/2009
Quote message 

Thanks, Garry,

For the kind reply; I'm a newbie (we're everywhere!), and plan at this early stage on using only WP. Joomla is a whole 'nother learning curve in the future!

I assume that you mean by inserting it directly into the template, to open up the appropriate folder on the server and loading the .gif there--so, perhaps a way to do this would be to load a static "placeholder" foreground pic that I know the filename of, and then replacing it with the animated .gif when i recognize the file?

Just trying to feel my way through the coding that I'm not (yet) familiar with; thanks in advance for the reply(ies).

Nice forum, here!

Willdao3
 
Your Web Pros

Posted: 5/13/2009
Quote message 

Hi wildao3

you can find the header file name and edit the file name using this method

> administrator > extensions > template manager > choose your default template > edit css > syle.css

find this code :

div.Header-jpeg
{
position: absolute;
z-index:-1;
top: 0;
left: 0;
width: 1000px;
height: 225px;
background-image: url('../images/Header.jpg');
background-repeat: no-repeat;
background-position: center center;
}

if u want a .gif image. You have to edit the Header.jpg.

Hope that helps

yourwebpros - pongz
 
willdao3

Posted: 5/13/2009
Quote message 

Thanks much, I'll give it a go this weekend!
 
Hallo

Posted: 5/15/2009
Quote message 

Quote Your Web Pros:

Hi wildao3

you can find the header file name and edit the file name using this method

> administrator > extensions > template manager > choose your default template > edit css > syle.css

find this code :

div.Header-jpeg
{
position: absolute;
z-index:-1;
top: 0;
left: 0;
width: 1000px;
height: 225px;
background-image: url('../images/Header.jpg');
background-repeat: no-repeat;
background-position: center center;
}

if u want a .gif image. You have to edit the Header.jpg.

Hope that helps

yourwebpros - pongz


I have to chang to be But, notthing happen. How can I do?

Thank

 
Your Web Pros

Posted: 5/15/2009
Quote message 

Hi hallo

did you create a gif image?
or you only change the file?

I created a quick sample. take a quick look on this one and let me know it this is what you want.

http://test.pongzter.com/

i tested in IE too and it works.

Note: the problem is artisteer doesnt separate the logo and header but theres a way to fix it.

yourwebpros - pongz
 
willdao3

Posted: 8/28/2009
Quote message 

Back, again :-)

I haven't had my site up yet, but now have hosting, and just want to clarify how I want my animated .gif to show in the header, to see if the above advice is applicable in my perhaps unique situation--and also to ask another quick question about adding static text to the header. Thanks in advance for any reply(ies)!

I have a header, currently generated in Artisteer, that has the following elements: background image., a FOREGROUND .gif image of a helicopter at the far left (the one I want to be an animated .gif but is now static, just a placeholder for now, really), large title justified to the far right, and under that, a large/long subtitle also justified far right, but taking up most of the whole bottom of the header, from the helicopter image all the way to the right edge.

The subtitle looks clunky--and, furthermore, some of its data really needs to go at the top, leading into the logo, to preface it, message-wise. How do I do this? Can I put just the text I want to keep as a subtitle (in the current position) into the header, plug my theme into WP, then copy/paste the header image into photoshop and put a text layer at the top of the header image, with all the other info. from the old subtitle now on top of the header image, leading into the logo text? I.e. I will have/desire three lines of text: 1) part of the "old" subtitle info. at the top, leading into/prefacing : 2) the title/logo text, with: 3) part of the "old" subtitle info still under the title, as a subtitle, per the Artisteer norm. And, now, how to animate the .gif foreground image at far left to integrate the whole...

Thanks for reading this long novel, and thanks for the help. Artisteer is enabling me to create a theme that is FAR superior to any of the free, and most of the premium, themes I've seen online (and I've seen FAR too many, lol!)!
 
willdao3

Posted: 8/28/2009
Quote message 

Um, an addendum:

Obviously, I don't know much about html or css...hence my trying to find an "analog" solution via photoshop...but, if there's a way to do this via coding, that would be great...if you can tell me where within the WP structure on the server I will be able to find/create/manipulate the variables, way cool! I still undoubtedly will want to be able to save a copy of the finalized header image on my PC, though...

Thanks--I'm a n))b, but won't be forever!
 
Garry

Posted: 8/28/2009
Quote message 

You can use your custom background and foreground images in Artisteer going header->background->from file, header->foreground->from file
 
2ninerniner2

Posted: 8/29/2009
Quote message 

Bonjour,

@Garry - only problem with that is Artisteer converts any animated GIF or whatever to a JPG, namely, Header.jpg :)

For the "rest" of the folks here:

Until a future update to Artisteer addresses this concern, YOU GOTTA GET YOUR "HANDS DIRTY"! :) ... in other words, you HAVE to know at least BASIC to INTERMEDIATE HTML and CSS! And VERY contrary to one of the other posts, Artisteer produces EXTREMELY readable and workable code! :)

Until such an update comes along, either "hire" someone who knows how to do it, or you can go here and start to learn:

http://www.w3schools.com

For me, this was a "snap" to do, because I have been "doing this for a while" :) Check out this site:

http://www.2ninerniner2.com/demo2992/

The following "tweaks" were made to a standard Artisteer 2.2 Joomla template:

- new module position at the very top of the page (29.92 News)
- completely replaced the standard, static Artisteer "Header" graphic with a new, "Header" module position, into which I placed the RokSlideshow module from RocketTheme
- "adjusted" the standard Artisteer 'Headline' and 'slogan' so that they are always "on top" and link to the home page

Cheers!
Lyle
 
willdao3

Posted: 9/1/2009
Quote message 

Lyle,

That looks EXCELLENT! :-)

Far more ambitious than my little animated logo, if I can figure out how to do it. As I'm pretty broke, looks like "hire" is out and "hands dirty" is in...thanks for the tips!

Will
 
Garry

Posted: 9/1/2009
Quote message 

It is in functionality of Artisteer that it merge background and foreground photo change its format to .jpg and export it, but still you can change its format going style.css and insert a new image with your desired extension in images folder after exporting a theme/template from Artisteer
 
zeusrw

Posted: 9/2/2009
Quote message 

Well, I have been searching for a while for a way to add module positions to the header. I'm a novice (but a keen one) and today I surprised myself with how easy it was to remove the artisteer generated "header" and replace it with 3 module positions "headerleft" "headercenter" and "headerright" so I can now customise my header as much as I want. Wanna know how it looks, try [url]http://zeusinternethost.com/testing2[/url] ? Want to know how I did it... read on...

1. Open your index.php file and comment out the artisteer header lines, i.e. find
<div class="art-Header">


<div class="art-Header-jpeg"></div>

</div>

and replace it with:
<!-- <div class="art-Header">


<div class="art-Header-jpeg"></div>

</div> -->


2. Immediately below this add the following code:
<!-- BEGIN: headermain -->

<div id="headermain">
<!-- BEGIN: headerleft -->

<div class="headerleft" >

<jdoc:include type="modules" name="headerleft" style="xhtml" />

</div>
<!-- END: headerleft -->
<!-- BEGIN: headercenter -->

<div class="headercenter" >

<jdoc:include type="modules" name="headercenter" style="xhtml" />

</div>
<!-- END: headercenter -->
<!-- BEGIN: headerright -->

<div class="headerright">
<jdoc:include type="modules" name="headerright" style="xhtml" />
</div>

<!-- END: headerright -->
</div>
<!-- END: headermain -->


3. In your templateDetails.xml file add the following "positions" to the end of your positions list (after the "user3" position)
	<position>headerleft</position>

<position>headercenter</position>
<position>headerright</position>


4. In your template.css file add the following code to the end (you might wish to customise your code with the appropriate sizes and colours and anything else you fancy). Make sure the width of the "headermain" is the width of your template (unless you want to overlap), ensure the height of each of the divs below is the same (unless you don't want to)... change the colours (the colours I have used are for illustrative purposes only... unless you're feeling weird).
#headermain {width: 1000px; height:150px; z-index: 0; margin: 5px auto 0 auto}

div.headerleft {width: 300px; background-color: #000000; color: #ffffff; height: 150px; float: left; z-index: -1; overflow: hidden}
div.headercenter {width: 300px; background-color: #00ff00; color: #ffffff; height: 150px; float: left; z-index: -1; overflow: hidden}
div.headerright {width: 400px; background-color: #0000ff; color: #ffffff; height: 150px; float: right; z-index: -1; overflow: hidden}


5. Save all of the files to your server

6. Go into your Joomla backend and assign modules to the above positions. I haven't tried it but if you added the "custom html" module to one of the above positions, you could probably use your animated gif of even drop in a flash module.

This worked for my template, I cannot confess to being a Joomla expert so if it doesn't work for you... erm... whoops! I'm probably not the guy to be able to help you. I spent 20 mins writing this up so I hope it helps someone at least otherwise it just looks like I'm doing a nana-nana-boo-boo at you all.

If my code above is wrong and somebody more experienced than I spots it, unless it is going to break my website, please don't tell me... I have fragile confidence... however, if it does suck and will break, my email is rikki a t web presence designlab dot com


 
willdao3

Posted: 9/2/2009
Quote message 

Well, I know this is a Joomla forum--I hadn't noticed this in my original post, I was just eager to find a resolution on an existing thread, rather than post a new thread (forum etiquette, and all that) but my theme is a Wordpress theme! Will this still apply?

Thanks! Food for future thought! (Rich food...as I'm a TOTAL novice.)

Even easier, for the moment: Garry: are you saying I can just replace the now-static exported helicopter.jpg foreground image with the original helicopter animated .gif image in style.css? Then upload into WP? Thx! (I'm having server problems, so I can't just go test this for the moment.)

Will
 
zeusrw

Posted: 9/2/2009
Quote message 

Hey Will

Don't know WP but in theory it should operate the same... if you amend the css to point to your manually uploaded animated gif you should be laughing... if not you will probably be crying... this would work in Joomla... maybe you should graduate from WP.
 
willdao3

Posted: 9/2/2009
Quote message 

Wow, Zeussrw, "graduate?" I'm only on the first day of school (in first grade) in WP, lol! And "trying to learn to learn" to ride a bike, if you get my drift. (pun intended.) And, I think the whole, massive, holistc WP Codex--and tons of idiot-proof widgets) will be some necessary training wheels for me for a while.

When my server's back online, I'll give this a try: anyone with WP experience able to direct me to the directory where the header images are stored--and/or give an idea if this is possible, please? Maybe some simple directions, too? Thanks, in advance,

Will

P.S. Anyone have a recommendation for a good, simple, photo-editing prog that doesn't take up even a tenth of the storage resources of Photoshop? I have PS, but little HD space on this PC I'm using, so it's not currently loaded; all I have to do is enter some text in a layer for the top of the Artisteer header I've created, in a relatively obscure font (already on my machine). Thx! I think the folks on this forum are great! (Unlike too many others.)
 
willdao3

Posted: 9/5/2009
Quote message 

Hi, folks, just wanted to update this with news that I got the header configured roughly the way I wanted, and the theme is loaded in WP--the animated "hecilopter" is working, and the added text looks O.K. above the "standard blurb." I used Ulead Gif Animator to import the header.jpg, convert it to header.gif, add the new text to the right of the logo, add the animated "hecilopter" .gif, compress the layers to a single layer, and export it so I could place it in the theme's Images directory. Then I updated the style.css code to point to the new "header.gif." You can check it out at:

http://hecilopter.com

(If you like; it's still WAY under construction! Looks best in IE, as Fx has some minor spacing issues with the header text that I've yet to figure out how to fix.)

Thanks, everyone, for your kind help and attention!

Will
 
Petra

Posted: 3/24/2010
Quote message 

Hi All

Zeusrw, I just want to thank you for your post on how to place modules in the header. It was a really big help to me. :-)
 
Armando O

Posted: 5/8/2010
Quote message 

Excellent article I try it and it works

 
Node-0

Posted: 5/8/2010
Quote message 

If you want to save on your Joomla headaches:

Learn how modules stack together in module positions, and then learn how to use the custom html module in Joomla to insert anything you want instead of hardcoding it into the template.

Same goes for flash, why on earth extensoft spent the time to implement flash into templates can only be explained by the other cms systems' need for flash.

If you're using Joomla, get yourself a flash display module and learn how to use it, that way your web operations life will == less coding, more content updating.

Take care!
 
Acceleral

Posted: 6/1/2010
Quote message 

I'm working through zeusrw's excellent suggestion and I have the three coloured boxes located OK, but I've hit the same issue as when I used top1, top2 and top3....

And that is, the Joomla! Top Menu is not presented in the same format as it was when I assigned it to user3.

In user3 it looks like it did in Artisteer - a horizontal row of little graphic items with menu text in each.

In zeusrw's headercenter (or top2) Module Position, the menu is presented as a vertical list with a bullet beside each item. (They are in the same format as the Artisteer menu items "Home", "Joomla! Overview" etc that's found on the right hand side of the Artisteer Joomla! template screen.)

Obviously, the art-style has been clobbered in the transition and I'm wondering whether the solution is similar to getting Vertical Menu's to work?

That is, add a CSS suffix to the Top Menu class.

Any suggestions?

Thanks, Michael
 
rosss ggggert

Posted: 7/8/2023
Quote message 


I absolutely support projects that aid children and strive to better their lives. This is indeed commendable. As a result, I urge individuals who are willing to help others to make contributions. There should be no difficulty in selecting gifts for youngsters. However, I believe that purchasing a bike is the best alternative. And for further information on selecting a decent bike for a youngster, see https://www.intelligentliving.co/how-to-choose-the-right-child-bike-seat/