Adding graphics to the website...

[JCBN]

Hi all!

I am wondering where i should start digging, if i want to change graphics on the whole website.

I am interesting in changing header graphics (logo works, background doesnt, only when i add it in .css), navigation bar graphic, main container graphic, sidebar graphic, footer graphic and some other graphic things.

Is this at all possible in the "Suffision Options"... i dont think so, since i have tried messing around for days now. I have all the graphics made in Photoshop, and have it "semi working" on another theme... (Bones).

Anyways, enough rambling... questions goes, where do i change the overall graphic parts of the site?

Thanks alot in advance!

/TP

[Colin]

What do you mean by graphics on the whole website?

Which skin are you using? What is your url? What have you done with the header that doesn't do what you want etc etc.

A more detailed explanation, the url to your site (forum rule #6) and a mockup in Photoshop will go a long way to us being able to give you some help.

[JCBN]

What do you mean by graphics on the whole website?

Which skin are you using? What is your url? What have you done with the header that doesn't do what you want etc etc.

A more detailed explanation, the url to your site (forum rule #6) and a mockup in Photoshop will go a long way to us being able to give you some help.

Yeah sorry bout no link, its basically cause its just the basic stuff atm.

http://townportal.dk/

What i mean about graphics?

Stuff like this added to Main Container for example http://townportal.dk/lol.jpg - and graphics for header i made, and sidebar... and so on.

[Colin]

To utilise these graphics in the way you want you will have to upload them to your site and then identify the CSS name of the elements that you want them as background for and then add them as images to the background.

So in Suffusion Options > Back-End > Custom Includes > Custom Styles put

Code: Select all

#content {backgound: #ffffff url("http://townportal.dk/lol.jpg")  no-repeat right top;}


Then do the same for the other items and images.

[JCBN]

Thanks Colin, makes sense!

Since you say "the way you want" is it a bad way im doing it? Is it wrong so to speak?

[Colin]

No what you are doing is the best way to achieve what you want. There is no correct way. I was meaning that the items you want to change are not able to be done through standard Suffusion options and need to be done with custom styles as I suggested.

[JCBN]

Thanks Colin.
I can sorta get it to work... #header works fine. I want Logo to float though, so it does not push my other content down.

Problem with #content is that the graphic is divided into 3, 1 top-container-part 1 mid-container-part (which is repeatable, so it is endless), and 1 bot-container-part....

Im gonna dig around some more... fear i gotta travel into the style.css

[sayontan]

fear i gotta travel into the style.css

That is, both not necessary and not recommended.

For your specific layout you should consider splitting your image into 3 - an upper portion that is as tall as your header needs to be (applied to #header-container), a footer portion which is around 50px tall (the height of the #cred element), and a thin mid-section strip that will repeat along the Y-axis (applied to #container).

[JCBN]

fear i gotta travel into the style.css

That is, both not necessary and not recommended.

For your specific layout you should consider splitting your image into 3 - an upper portion that is as tall as your header needs to be (applied to #header-container), a footer portion which is around 50px tall (the height of the #cred element), and a thin mid-section strip that will repeat along the Y-axis (applied to #container).

Thanks alot for the reply sayontan.

I understand what you want me to do, but my container graphic should be below the header and navbar, that is the problem.

Here is an idea how i planned for it to look, not sure if it is possible, or what i should change... this is an "old version, the header is changed to be alot smaller since then and the logo is different.

http://townportal.dk/lol2.jpg

As you can see, my plan was to have a header+logo, with navbar below, followed by main container which should be repeatable, and a sidebar that should not be repeatable.

Appreciate any help, even if harsh!

/TP

[Colin]

Yes that is doable. You need to carve your graphic up as Sayontan said. The header and nav bar should be one image assigned to the header and then adjust the height of the header to position the nav elements. Set your nav elements to have a transparent background so your image shows through in the Suffusion options. Then use your other bits of cut up images as appropriate for the other containers. I have done something similar to the header graphic at http://jvh.orba-design.com