Transparent header


Author Message
RobertSC

Posted: 1/31/2009
Quote message 

I would like to use my wife's artwork as a background but at the same time I would like the header to be transparent so the work shows through. I did a test and set the header color to something easy to find (ABABAB) then did a search to find where that color is set. I could find no place in the code where the header bg color exists! Any suggestions???
 
Marc Smith

Posted: 1/31/2009
Quote message 

Any and all of the colors are set in the style.css file.
 
RobertSC

Posted: 1/31/2009
Quote message 

If that's so, then why doesn't the color code appear anywhere - not just the style sheet. As I said above, I did a search through ALL code and couldn't find it. BTW, I'm using the beta version.
 
Caroline

Posted: 1/31/2009
Quote message 

Hi RobertSC,

If I understand you correctly, you are talking about the image properties like

Header > Background > Recolor
Header > Background > Fill Color

and similar, right?

If so, then please notice that Artisteer applies your color settings to the image on the fly and generates the header image that is already customized - that's why there is no need to include any color reference in the generated style.css file.
And actually I'm not sure if it is possible to control such image settings by CSS means at all.

Caroline.
 
RobertSC

Posted: 1/31/2009
Quote message 

Thanks, Caroline! Perhaps I should send a request in for that feature; unless I'm the only one that would like a transparent header....
 
David

Posted: 2/3/2009
Quote message 

First of all, I'm still just playing around with Artisteer, especially for creating a template for Joomla, but I am already VERY impressed! Great software!

Back to the topic, I've been trying to get a transparent header too. It would be a great feature! Transparency for the blocks and menu would also be very welcome :-)
 
BillH

Posted: 2/3/2009
Quote message 

Not a fix, and definitely not part of the program, but we have a way to create transparent header we use. It works, but you have to edit the file for each theme after you create it.

Simply open your themes css file, usually around line 200ish youll start seeing the header options for the theme, find where it calls for your Header.jpg image, simply change the file type to .png. Resave that css file.
Now replace the Header.jpg file in the images folder with your new Header.png and you now have a transparent header image.(as long as you created it with a clear background-oh, and of course you can name it anything you want while your editing it)

I know its not a perfect way to do it, buy hey it works and keeps our clients happy at the same time.

I would much rather be able to have this option when building the templates as well, espicially since you can have transparancies with the theme main background now.

Hope that helps
BillH.
www.zazzlers.com
 
YiKeS

Posted: 2/3/2009
Quote message 

G`day,

looks like a few of us have the same idea ... :-) ... I`ll see if my grafix dood is prepared to offer a "custom service" for transparent images ... anyone interested? Please reply if so ... I`ll post some samples later this week of what I have him creating now for me.

BillH ... your "solution" still requires the transparent image to be created does it not? So unless you have/use Photoshop or pay for a new image to be created, it won`t "make" the original header transparent ... still, the css file will need to be edited if it`s anything other than .jpg as stated.

YiKeS
 
BillH

Posted: 2/3/2009
Quote message 

Yea you have to create the image with a transparent background, but you have to do that with any image to make it have a transparent background.

For people without the software to do it, just do a google search, there are free sites out there that offer the service to remove solid colors from images and such. They dont have to be .png, they can also be .gifs, but the benefit of a .png is its lossless when saved, trasnferred or uploaded so you wont lose the crispness of your image.

We run a multi-blog hosting service using wpmu and have done dozens of them.
 
Denise

Posted: 2/24/2009
Quote message 

Hi There

I wonder if anyone can advise please?

I am very interested in this software but need to ensure it is exactly what I need first - apologies for the length of the post.

I have built a few sites in the past (mostly hand coding HTML and CSS) but am not an expert by any means and am looking at using Wordpress for some sites as it seems the best solution for some of them.

I want to build some sites with Wordpress for both myself and for a few other people (friends and family). However, whilst I want to get them started and help them set the sites up etc, I won't be doing this forever and at some time in the future I will want to pass them the files.

When working with css I have always used them with static sites - and PHP is a bit beyond me. I have set up an ecommerce site that is dynamically generated by just following instructions etc and I understand the concept of what dynamic means, but my knowledge doesn't go beyond that.

In the past, I have always changed the look of the header and all graphics etc within the style sheet. Indeed, a friend of mine recently purchased a Wordpress theme and I have made all the design changes for her within the style sheet and it hasn't mattered that I have no knowledge of PHP.

I am trying to simplify things and not think too much about all the techy stuff (hence using Wordpress) because I have learned from experience that whilst it is fun to play around I cannot actually make any money that way However, I don't want to cause problems in the future for people so do at least need to understand a little more about how Artisteer works.

The answer in this thread that the header is created on the fly has thrown me a little as I'm used to having control over ALL the design myself and have never used software like this before.

I know that when we design a site with Artisteer we have all the files on our computer but does that mean that as we make (any) changes all those changes are stored within not only the CSS file but the PHP files also?

Can you advise as to what happens if I pass the files to someone else in the future? Would they need a copy of Artisteer to make changes and work on the site, or would they need to employ someone with knowledge of PHP?

As you can see I'm a little confused as to how this software actually works and if this is a PHP issue rather than a software issue.

Can you please advise, as this software seems just what I'm looking for but I don't want to create problems for the future.

Does all that make sense?

Thanks very much, I would much appreciate some clarity from someone who understand it all.

Denise
;-) ;-)
 
Marc Smith

Posted: 2/24/2009
Quote message 

Artsiteer creates CSS which is then wrapped in the code needed for Wordpress, HTML, Joomla or Drupal to use according to it's technology.

In html, it is very straight forward, you have a CSS file and html code. You control the look by editing the CSS.

Same with Wordpress, Joomla or Druapl, the problem is that it needs a framework to "hang the design on".

If you create a 'theme' in Artisteer, you are giving them images, php pages and css that they load into their Wordpress site and activate.

If you have worked in Wordpress before, then you know what a theme is and where it is located and how you activate it. This is what Artisteer exports for you.

You can save the design in the native ARTX file so you can go back and edit it, but once you have exported the theme, making any changes to the theme itself is a *manual* process, mostly done within the CSS files.

Best thing for you to do is to download the demo and play with it.
 
Denise

Posted: 2/25/2009
Quote message 

Hi Marc

Thanks for replying.

I have now found where I can change the URL of the header image within the style sheet. I didn't see it at first, and then when reading the thread about the transparent header it threw me - and I think it was then a case of seeing what you expect to see (or not). :-X
 
Plotterhexe

Posted: 2/28/2009
Quote message 

Quote RobertSC:

Thanks, Caroline! Perhaps I should send a request in for that feature; unless I'm the only one that would like a transparent header....

Guess I just ran into that problem as well, I coundn´t find a way to set the header fill color to transparent. Of course it´s possible to do that in the CSS file in an external Editor but it´d be much nicer if Artisteer would hat this as a feature. I´d be the first one to support your request!
 
oupsla

Posted: 3/6/2009
Quote message 

for a transparent header
if your style sheet is transparent just delete your Header.jpg in your exported theme
 
Jeroen

Posted: 3/18/2009
Quote message 

I have the same problem here. But there are some problems....

My content of the sides needs to have a with background, only the header nog. I am using a transparant header.png.... Is it a solution for deleting the whole backgroundcolor so it is transparant and then color each part with F000000 except the Header?


 
Jeroen

Posted: 3/18/2009
Quote message 

When deleting in the stylesheet:


.Sheet-cc {
background-color:#FFFFFF; <--- DELETE
bottom:0;
left:0;
overflow:hidden;
position:absolute;
right:0;
top:0;

will make the whole document transparent. But now my other sheets need to have a white background....

Coming close :-) :-) :-) :-)
 
Jeroen

Posted: 3/18/2009
Quote message 

SOLVED!!! (for me)

Remove the div=head completeley
place a new div sheet in the main div.

Just load the transparant png in there with <img scr="transparantimage.png"/>

:D:D:D:D:):):):)
 
Rocco

Posted: 3/19/2009
Quote message 

Hey Jeroen,

Thanks for the info, but can you please give me a step by step, including the file names.

Please?

Either way Thanks for your help.
 
Beej

Posted: 3/19/2009
Quote message 

How about adding this additional variable line to your stylesheet:

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

Naturally, experiment with the number to get the feel you want =)
 
Angela

Posted: 6/1/2009
Quote message 

GRRR...when I replace the header.jpg with my transparent header.png, the background of the header turns white instead of transparent. Can anyone tell me what I'm doing wrong?
 
Garry

Posted: 6/1/2009
Quote message 

It seems likt it is picking up white backgound. You may like to post your website address here.
 
Ruben

Posted: 9/17/2009
Quote message 

I also cannot make it, instead appear a white image as background, i tried with png, and gif, and anything and seems that many people has te same problem
 
Garry

Posted: 9/17/2009
Quote message 

You also need to change header.jpg in your style.css to header.png before replacing your header.jpg to header.png in your images folder.
 
Ruben

Posted: 9/18/2009
Quote message 

Quote Garry:

You also need to change header.jpg in your style.css to header.png before replacing your header.jpg to header.png in your images folder.


i made this also, the normal Header.jpg for the Header.png in the CSS, in other domains i change usually the header, but never tried a transparent png...
 
Juhani

Posted: 11/27/2009
Quote message 

I've got two files for header, that Artisteer exporter has made: Header.jpg (rectagle) and Header.png (rounded corners). I'm not using Gradient, Texture or Glare this time in header. Adding opacity to them is easy to do with Photoshop.

1. Open header.png
2. Select opacity % for layer that u like
3. Save for web as PNG-24 with transparency, rewrite over the old file
4. Open style.css
5. Inside class "div.art-Header-jpeg" change line "background-image: url('images/Header.jpg');" to "background-image: none;" and save the file.
6. Upload both to the web server

If you're using Gradient, Texture or Glare, editing operation in Photoshop can be more complex, but this is the idea how to do it O:) If there's something you need in Header.jpg, just save it with some new name like HeaderNew.png and change it to class "div.art-Header-jpeg" in style.css too.