WordPress.org

Ready to get started?Download WordPress

Forums

html, css, php... HELP (13 posts)

  1. sloh
    Member
    Posted 10 years ago #

    I don't understand the relationship between the wp-layout.css and the index.php files. So my first question is... if I edit the wp-layout.css file will the index.php file be changed automatically or must I edit that as well?
    I'm used to using WYSIWYG editors so editing code directly is a big, big, big change for me and I'm a bit lost. Is there a way to convert the .php to .html, edit it and save it as .php so it will work with the layout.css file?
    I have the StyleStudio css editor and I have enough understanding of css to be able to create a basic layout and manipulate colors, borders, link styles... where I'm completely stuck is where to place the specific WordPress tags so that I can post and have comments and have an archive, calender, etc. Do those tags go into the .css file or the .php file or both?
    I have a site made in html and it uses css elements but it’s not associated with a pure .css file… is there any way to make it work with WordPress or must I rebuild it from scratch through the wp-layout.css and index.php files?
    Thanks in advance.

  2. Mark (podz)
    Support Maven
    Posted 10 years ago #

    index.php and all the other .php files are concerned with the content only.
    CSS governs the design.
    Changing the extension won't work. It won't because WP uses PHP, and unless your have the correct setup on your machine, your computer cannot understand it - it just won't work.
    Archives are handled automatically by the program, and a calendar is already there in the default.
    Yes, you can just use the main part of WP - it's called The Loop.
    http://www.wiki.wordpress.org/TheLoop
    If you want to install a setup on your machine so that you can run a testblog and play more easily with the code as the results will not be public, I'd recommend Xampp:
    http://www.apachefriends.org/en/xampp.html
    There probably isn't a huge amount you will need to alter in the 'index.php' - all the action for what your blog will look like takes place in the CSS:
    http://wiki.wordpress.org/AnnotatedCss
    http://www.mfr.f2s.com/graphicalcss
    Have a look here - http://www.wiki.wordpress.org/StyleCompetition - and follow the link to Alex King's site. There you will see many different styles all done with no modification to index.php

  3. sloh
    Member
    Posted 10 years ago #

    Thanks podz for your quick response.
    I'm not a code writer so this is a tremendous struggle.
    So editing the wp-layout.css file will change the index.php file or at least control it?
    The wp-layout.css file must contain all the WordPress tags in order to function properly? Can the wp-layout be an .html file that uses css instead of being a .css file?
    I'm sorry if these are dumb questions, its just that I don't know how to write code from scratch.
    Thanks again

  4. Mark (podz)
    Support Maven
    Posted 10 years ago #

    With no link, it's hard to say how you could incorporate just The Loop.
    The CSS contains no tags. All the tags are in index.php.
    The tags are contained inside CSS 'tags' though, which is how their output is styled.
    Take the date for example:
    <?php the_date('','<h2>','</h2>'); ?>
    To change how the date actually presents ( 1 Jan 2004 or Thursday 1st January 2004 or 1/1/2004) that change is effected by altered one part of the php code - easily done in the admin section.
    To change what it *looks* like, you alter the 'h2' (in the CSS). You could have it 10pixels in size and orange, or 20pixels, italic and green.
    You don't really need to write anything from scratch - just adapt and tweak the css from either the default template or another style until you get it looking how you want it to.
    And if you run into problems, post here :)

  5. sloh
    Member
    Posted 10 years ago #

    Okay, last questions for now...
    I went to inknoise.com and generated small bit of code that gave me a container, header, content, sidebar on the right and a footer.
    I took that code into Mozilla composer and changed all the colors, borders, sizes... added images etc.
    It uses css elements but it's an html file.... is there any way I can use that to serve as the foundation for a WordPress site?
    My current wp-layout.css has things like: .meta and #wp-calendar and #menu... MUST those things be in the wp-layout.css file in order for everything to work?
    Thanks again

  6. sloh
    Member
    Posted 10 years ago #

    Thanks serendipity....
    Okay, so for all of the WordPress functions to work, the "selectors" MUST be in the wp-layout.css file?
    And if, say, I don't want a calendar, I can just keep that code out of the css file?
    I feel so freakin close to grasping all this, I really appreciate the help!

  7. NuclearMoose
    Member
    Posted 10 years ago #

    sloh,
    Podz has you off to a great start. Neither Podz nor I are coders, and we started this stuff much like you have now. I'd like to suggest that you visit http://www.w3schools.com and check out their free tutorials on CSS and HTML.
    Also, just to give you a bit of perspective on the roles of INDEX.PHP and WP-LAYOUT.CSS, I'd draw this analogy:
    INDEX.PHP is your house. It's the foundation, walls, and roof of your project. It includes features like doors, windows, plumbing, and anything else you care to add into your house, like home theatres and a hot tub and an air conditioning unit. Maybe you live in a cold climate, so you don't need the air conditioner, so you just remove that.
    In essense, the INDEX.PHP is everything that is ABSOLUTELY necessary to have, like the foundation (the LOOP as Podz mentioned) as well as the floors, walls and roof. You can have a site, and have only the INDEX.PHP if you want.
    But wait; along comes your spouse. S/he likes the house as it is, but notes that it lacks some personality. How about some paint on the walls? What if s/he wants hardwood floors? It must have some landscaping as well! These are all the things that make your house/site unique and reflect your personality. How is this accomplished? Through the use of WP-LAYOUT.CSS. This file is used to make your house/site look the way you want it to.
    So, how is this accomplished? Well, that's easy, really. In the INDEX.PHP file, you'll notice things like id="menu" and class="credit" and other such things throughout the file. In the top of this file, in the <STYLE> section, you'll notice that there is a statement which imports a CSS file. The CSS file, in the case of the default WP install, is called WP-LAYOUT.CSS. A CSS file is simply a text file. It can be created and edited with a simple text editor. What happens is this:
    In your INDEX.PHP file, a section might require a certain look. Let's say it's a paragraph. You might see something like
    <p class="boldblack"> Text here What this is doing, is basically telling your browser that "when you render this paragraph for the visitor to see, go to the CSS file, look up the class called "boldblack" and apply the styling to this paragraph. So, your browser refers to your CSS file, looks up the class, and renders it accordingly. Your CSS file would have this in it:
    p .boldblack { color: #000; font-weight: bold;}
    I hope that this helps a bit, and doesn't add to any confusion you may have. The CSS is there to make your site look pretty. As you learn more and more, you will see that CSS can do some amazing things for you. Visit some sites, and have a lot at the CSS they are using. Grab the WP-LAYOUT.CSS file and change some values around, as Podz suggested, and see what happens. Experimentation is a great way to learn.

  8. NuclearMoose
    Member
    Posted 10 years ago #

    If you don't want the calendar, you must either delete the code or, what I think is better, comment out the code in your INDEX.PHP file. The PHP file is the structure, the bits and pieces, the physical things. If you only deleted the calendar selectors from the CSS file, you are only stripping the paint off of the walls, but the calendar will still be there.

  9. Mark (podz)
    Support Maven
    Posted 10 years ago #

    Yes and no.
    If you do not have #wp-calendar in your css, but you do want the calendar, it will still be displayed, but it'll be a mess (esp the calendar)
    The information that shows under a post title is styled by the 'meta' If you don't have that styled, but still use the tag, you will not be able to control the styling at all.
    You could replace those tags with ones of your own, but that almost defeats the point as you would still be styling it.
    What you could do is take from the new code what you want, and place it into the wp css, and see how that works ?
    The best thing to do is be prepared to make mistakes and just try things. Like serendipity says, keep a backup so that as things go well, you get closer to your goal, and if they go wobbly, you have only to take one step back to where you were.

  10. sloh
    Member
    Posted 10 years ago #

    Thank you, thank you, thank you everyone. I followed all the advice and suggestions and I'm on my way to getting the hang of this... I'm far less frustrated than before.
    Except for one thing...
    Internet Explorer!!!! Everything looks fine in Mozilla 1.7 and Firefox .92 but IE messes everything up.
    I have a layout similar to the WordPress site with the content column in the center and the menu on the right side. In the good browsers, the content and menu are separated... in IE the menu overlaps on the content and the #rap is wider on the right side! In the good browsers, the #rap is perfectly even.
    Besides praying for the downfall of IE, any suggestions?

  11. NuclearMoose
    Member
    Posted 10 years ago #

    Sloh,
    Could you post a link to your site? We can all have a look at it and hopefully come up with some answers for you. IE gives everyone headaches!

  12. astoriacat
    Member
    Posted 10 years ago #

    Wow that in itself was a great lesson for this beginner right here. This is one of the main reasons I started using word press ..the great support here...thanks for the tips guys..

  13. Root
    Member
    Posted 10 years ago #

    Well you might want to take a look at the code in The Gemini Interface. That will give you a good performance in most browsers. Hopefully that will get you started.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.