Should images be coded in css or php files?

mrdimsum
(@mrdimsum)

17 years, 5 months ago

Here’s the breakdown.. I’ve been in graphic design for quite sometime and I’ve even studied it, but admittingly, my area of specialty is definitely not coding.

I’ve just recently migrated over to WordPress and find the Theme system a bit overwhelming. Main reason is that I have mainly only dealt with tables and are not exactly sure how div’s work. I am used to the traditional method of inserting images, etc., directly into the webpage files themselves, but with WordPress should I be inserting any changes into the CSS file?

To break down the question, if I had images that I want in the side panel as static and part of the theme and images in the header as well, do I pop these into the CSS? And also, for the Content pane, when posts are displayed, if I wanted a background image in back of the Article Title, does this go in the CSS as well?

I am aware that the files are pointing to a CSS class to display the information, but forgive me if I am not knowledged with CSS development, and forgive me if this question was utterly stupid. I just don’t see much graphical sites using WordPress, and wanted to very much know how to approach designing a theme.

And one last question (I’ve stated this above), should I use tables?

Viewing 9 replies - 1 through 9 (of 9 total)

Samuel B
(@samboll)

17 years, 5 months ago

“To break down the question, if I had images that I want in the side panel as static and part of the theme and images in the header as well, do I pop these into the CSS? And also, for the Content pane, when posts are displayed, if I wanted a background image in back of the Article Title, does this go in the CSS as well?“

In this case you would edit the sidebar.php file to call the image via a hard code insert or with a php call (preferable) and either use the existing image styling in the css or define your own unique image styling in the css.
As for the other question – basically the same answer except you would use a file other than sidebar.php of course.

A read of this page is a must to develop a theme:
http://codex.wordpress.org/Theme_Development

added in edit:
Tables – yuk!
Divs – yea!

Thread Starter mrdimsum
(@mrdimsum)

17 years, 5 months ago

So I would hard code the images inside the sidebar.php and any other files I would use? It’s just I noticed some tutorials replacing the Kubrick background with a background image link inside CSS so I was wondering how it all worked.

And to make things worse, I am completely overwhelmved with DIV’s. I’ve gone through some of the Codex pages concerning themes already and it has helped, but it’s just with no previous experience with div’s, it is just so engrossing, but complex at the same time.

I don’t understand how everything is positioned? With DIV’s, things can look like tables, but they don’t. For example, with the Blix theme, or any other theme that uses relaying images to display in the background of titles, are those manipulated through CSS or through hard-coding?

At this time, when I look at the php files, all I am seeing are DIV’s and no defining width’s, images, or anything. The code looks extremely clean which is one reason I have no idea what is being done and where it is done to manipulate the look of the site.

Thanks for your help in advance. Hopefully I get around to figuring it out..

Samuel B
(@samboll)

17 years, 5 months ago

Hard coding was just an example – I wouldn’t. Instead I would use php calls for links.

As for divs, once you get used to them I’m sure you will like them.
Open your sidebar.php file and look how the divs are used and how they look rendered in your browser. Then open your style.css and look at the stylings. Just dive in backing up everything before you jack with it.
NOTE – do not use the default Kubrick theme as an example to developing a theme. It’s way complicated compared to anything else out there. Start with a solid basic theme to study. I recommend Vesuvius which moshu did a great job in porting. The php files are commented well and the css is easy to understand. Also it’s very flexible to adaptation.
But download several and have a look.
http://themes.wordpress.net

Thread Starter mrdimsum
(@mrdimsum)

17 years, 5 months ago

Thanks for the suggestion. I will surely take a look at it!

becs
(@becs)

17 years, 5 months ago

If the theme is widget friendly, you could just put in a text widget and enter the html code to direct to the image.

With regards to the header image, look at the filename of the image you use at the moment. Say for example it is background.jpg and note the dimensions for example 1000×80
Open the style.css file with notepad and find the entry for background.jpg around the header section this is were your header image is. The easiest way to change the header image is to replace the one you have with the same dimensions as the one you currently have. That way you don’t have to change any code. So make your background header 1000×80 and upload it to the themes image folder. This should overwrite your header image. If its not the same dimensions as the one you currently have it will look odd. Of course you can have other dimensions but you will have to change other bits of code.

Thread Starter mrdimsum
(@mrdimsum)

17 years, 5 months ago

Thanks for the help. Can anyone also suggest a good Theme that has good documentation so I can try and edit/modify it so I can learn more about theme development for WordPress? I tried to check out the suggestion above with Vesuvius, but it seems it is only for WP 1.5.

Cheers!

vkaryl
(@vkaryl)

17 years, 5 months ago

It’s a rare 1.5 theme that won’t work with 2.0+.

moshu
(@moshu)

17 years, 5 months ago

I can assure you Vesuvius works perfectly with 2.x versions.

DianeV
(@dianev)

17 years, 5 months ago

I’ve found that a good place to get a basic understanding of HTML and CSS is http://htmldog.com — very boiled-down and helpful.

(No, it’s not my site.)