[my wishful thoughts] How to replace original header with an image??

buonumore · 2010-02-17 14:42:12

Hello everyone!

This is my very first post here, I really hope I placed it in the right place!! :-p

I need to replace the original header of this very very nice template, with a simple JPEG image and a background where there’s no image.

Is this very complicated??

Am I in the right place to get a hand? :-)

Thank you very much everyone.

Alex

P.s.: TextPattern really looks brilliant, well done to developers!!!

jsoo · 2010-02-17 15:13:03

The header image is done as a CSS background image, so you need to edit the stylesheet.

buonumore · 2010-02-17 15:19:33

I appreciate your reply, but could you please explain it better to a newbie, please?? ;-)

I’m actually working on changing colors of the template, so I’m working there, in the stylesheet, using the CSS file.

I can see the “header” information, but absolutely don’t know what I should change to get my picture displayied…

Any suggestion? :-)

jsoo · 2010-02-17 15:55:56

Find a tool that will allow you to x-ray into a web page to see what’s happening behind the scenes. Firefox has Firebug and the Web Developer add-ons. WebKit, which powers Safari & OmniWeb (inter alia) has its own Inspector. Either allows you to see what HTML element you’re looking at, and what CSS is attached to it. These are invaluable tools for learning and managing CSS.

maniar · 2010-02-18 02:30:46

hmm… it seems that you are also new to html and css is that right ? If you are new to all this perhaps a general screen cast about css and background image could help.

If you have been able to install the template correctly into textpatter then you need to go into Admin > Styles, and look into the code and look for something like

background-image{ url(http://example.com/images/background.jpeg);}

or

background{ url(http://example.com/images/background.jpeg) repeat 0px 0px}

and so on and simply replace the url with the location of your image.

Experiment and make mistakes – it’s the only way to learn !

buonumore · 2010-02-18 07:03:17

Thanks a lot to both of you, I truly appreciate your help!!

@Jeff: I downloaded the tools you suggested me and am using Firebug to understand how things work behind the scenes. That’s extremely interesting, thanks a lot!! :-) Not sure how to use Web Developer, will have to spend some time on it.

@Jaffer: not really, I was quite familiar to HTML a few years ago… But no CSS into my life until a few days ago, right. I’m a complete newbie to TextPattern! What I thought I could do is to try to replace the original header image with mine, just to see what happends! ;-) Thanks for the tutorial, I’ll watch it later.

Do you think there is a way to clearly understand how the template is structured? I mean, how to understand, in the CSS sheet, what’s supposed to be the “menu ul li” or the “div. excerptlist-last”… Are all themes built on same common “referrals”? Is there a structure instruction that would help me to understand where I’m working on?

…or is there a program where to locally import the CSS of the site, modify it “WYSIWYG” and then replace it on the mainsite?? ;-)

THANKS FOR ALL IDEAS/SUGGESTIONS!!

Have a nice day.

Alex

jsoo · 2010-02-18 12:01:34

buonumore wrote:

Do you think there is a way to clearly understand how the template is structured? I mean, how to understand, in the CSS sheet, what’s supposed to be the “menu ul li” or the “div. excerptlist-last”…

A CSS stylesheet is a set of rules that get applied to an HTML page. The first part of a CSS rule, such as you have quoted, is the selector. Then everything in the curly braces that follow the selector are the properties. Curl up with a good CSS tutorial.

Are all themes built on same common “referrals”?

No, theming isn’t really a feature or even convention in Txp, so themes come packaged however the theme author chooses.

Is there a structure instruction that would help me to understand where I’m working on?

If you mean in the CSS, as above you need to learn the basics of CSS selector syntax.

…or is there a program where to locally import the CSS of the site, modify it “WYSIWYG” and then replace it on the mainsite?? ;-)

There are WYSIWYG CSS tools, certainly. Don’t use one myself.

maniar · 2010-02-18 12:11:43

Well, in that case the good news is that HTML has not changed any in the last few years. I think a good place to start the basics of learning css would be at W3Schools

I began from there too years ago. After that SitePoint became very helpful for implementing some good CSS practices (Check out the Guru List in the Sidebar too)

CSS as far as I know is best coded with hand.

Just dive into the above links – I think understanding the template would come to you instead of me typing a long winded explaination

Good Luck !

Last edited by maniar (2010-02-18 12:13:08)

uli · 2010-02-18 13:39:38

buonumore wrote:

…or is there a program where to locally import the CSS of the site, modify it “WYSIWYG” and then replace it on the mainsite?? ;-)

Much easier, quicker, cheaper:
One of the nicest things about Firebug is the live editing feature: select an element, edit its parameters shown bottom right, add properties (doubleclick the selector), edit HTML code (doubleclick the code) and see the browser window reflecting your changes on the fly.

Have fun! :)

buonumore · 2010-02-22 10:49:40

@Jeff: thanks for your answers, you teached me some things!

@Jaffer: I watched the tutorial you suggested me, easy enough for a non-English speaking and interesting!! I’ll watch other videos from that guy, thank you! I’ll soon check the other links, especially the one at SitePoint.com!

maniar wrote:

bq.CSS as far as I know is best coded with hand.
…
I think understanding the template would come to you instead of me typing a long winded explaination

I agree, you’re certainly right!! I’m gently getting in to the theme structure and am slowly getting a bit confident with it!! ;-)

@Uli: that’s what I’m using right now, but have a question: is there a chance to save the canges and then to put them on the site??

Another question to everyone: is there a chance, here in the forum, to know if other users are using this template?? I’ve tried by searching through the topics name, but got a n unuseful result. :-p It would be extremely useful to get tips and informations for those who are new to the template…

Thank you very much, guys, have a wonderfuld monday!! :-)

uli · 2010-02-22 12:40:38

buonumore wrote:

is there a chance to save the canges and then to put them on the site??

Though there’s no hint by the form of the mouse pointer you can actually copy the css code (Since some updates back it’s a little harder to make a selection but it still works). You get clear advice where to paste it by the underlined stylesheet names (your_sheet_name.css, line 439)

Another question to everyone: is there a chance, here in the forum, to know if other users are using this template??

You can always open a new topic, it’s the right place here. BTW Have you mentioned the template’s name yet?

Last edited by uli (2010-02-22 12:41:53)

buonumore · 2010-02-22 12:55:39

Hello Uli!

Yes, didn’t want to appear lazy, but thought there might be the option to do it and wasn’it finding it.

The template name is already in my topic name, yes.

Oh yes, if it’s fine for team and forum rules, I’ll gladly open a new topic looking for other “My Wishful Thoughts” users.

Vielen dank und viele grüsse!! :-)

Textpattern CMS

Textpattern CMS support forum

#1 2010-02-17 14:42:12

[my wishful thoughts] How to replace original header with an image??

#2 2010-02-17 15:13:03

Re: [my wishful thoughts] How to replace original header with an image??

#3 2010-02-17 15:19:33

Re: [my wishful thoughts] How to replace original header with an image??

#4 2010-02-17 15:55:56

Re: [my wishful thoughts] How to replace original header with an image??

#5 2010-02-18 02:30:46

Re: [my wishful thoughts] How to replace original header with an image??

#6 2010-02-18 07:03:17

Re: [my wishful thoughts] How to replace original header with an image??

#7 2010-02-18 12:01:34

Re: [my wishful thoughts] How to replace original header with an image??

#8 2010-02-18 12:11:43

Re: [my wishful thoughts] How to replace original header with an image??

#9 2010-02-18 13:39:38

Re: [my wishful thoughts] How to replace original header with an image??

#10 2010-02-22 10:49:40

Re: [my wishful thoughts] How to replace original header with an image??

#11 2010-02-22 12:40:38

Re: [my wishful thoughts] How to replace original header with an image??

#12 2010-02-22 12:55:39

Re: [my wishful thoughts] How to replace original header with an image??

Board footer