How Edit CSS In WordPress Themes?

6 replies
  • WEB DESIGN
  • |
I am just getting familiar with WordPress. It's all new to me.
I usually create sites with FrontPage, NVU and HTML templates.
I see there are many things I'd like to change or even have
access to, but I can't seem to do it. Whenever I try something,
the CSS part messes up or crashes the page.(using css templates)
Ha ha!

I don't understand CSS. How do you make changes with your WP
themes when there is css involved? I sometimes see a small win-
dow up open that has some CSS in it, but don't want to touch it
because I don't really understand it. When I'm in the admin panel,
can all the css changes be made from there or do I need to use
some other program too... or even have access through the cPanel
of the server where it is at?

I would really be happy if I can grasp my mind on this subject and
your feedback would most likely do that!

Thank you.

LastWarrior
#css #edit #themes #wordpress
  • Profile picture of the author ronc0011
    In your WP admin click on the "Appearance" link. In the drop down click "Editor" this will open to you main stylesheet "style.css". Here you can make changes to your CSS.

    Because you are working with Wordpress a lot of what is already defined should probably be left alone. However if you scroll to the bottom of the stylesheet you can add new styles for custom content.


    You will make your life a lot easier if you dump FrontPage and upgrade to Visual Studio Express Edition. It's Free and as it happens it is also the best there is.

    Microsoft Express Downloads - Visual Studio Express and SQL Server Express

    Use the Web Platform Installer
    {{ DiscussionBoard.errors[3692817].message }}
    • Profile picture of the author LastWarrior
      ronc0011,

      While leaving a reply earlier, my computer went offline and I had to fix it. One of
      the things I was going to say is that on another thread, a few people recommended
      the same and I downloaded it, of what I hope was the right one.

      I had it removed after 2 minutes.

      In that link you gave, I see several options to download:

      1.) Install Visual Basic 2010 Express
      2.) Install Visual C# 2010 Express
      3.) Install Visual C++ 2010 Express
      4.) Install Visual Web Developer 2010 Express using Web Platform Installer
      5.) Download All - Offline Install ISO image file
      6.) Install Windows Phone Developer Tools

      Which one do I install? I installed #1 and it looked totally like I downloaded some-
      thing written in Latin, backwards.

      LastWarrior
      Signature



      {{ DiscussionBoard.errors[3693237].message }}
      • Profile picture of the author ronc0011
        It's the bottom one on the left side of the page. It's called Web Platform Installer. That one installs the whole package. Visual Studio is made to be able to work with several languages and in fact is geared for working with ASP. But it also works perfectly well for straight HTML pages.


        There used to be a video tutorial at Home: The Official Microsoft ASP.NET Site that covered the basics of using the application, learning your way around the interface. Unfortunately they have moved things around again and I can't find it.

        In any event all web pages are rendered in HTML so really any of the tutorials will have value to you though maybe somewhat indirectly.

        Probably the best quick tip I can give you is when you start a "New Website" be sure to choose you folder location and don't let it use the default.

        Tip #2: When you open / create a "New Website" you have a choice of like aspx and other options. Be sure to choose an "Empty Website". When the new site opens you can right click on the top entry in the "Solution Explorer" and choose "Add new item" and then choose "HTML page". This will give you a blank HTML document to work with.

        Hopefully that will get you off to a start and you can start learning the tool from there.

        The asp.net website has zillions of hours of "How To" video on building very advanced websites. Everything from simple signin pages all the way to building the backend for companies like Exxon.
        {{ DiscussionBoard.errors[3693955].message }}
  • Profile picture of the author Abledragon
    If you're editing the CSS on a theme developed by someone else one of the most frustrating things is finding the correct selector to edit.

    The Firebug addon for FireFox fixes this beautifully. I reviewed it here:

    Firebug: CSS Editing Made Easy | WealthyDragon

    Cheers,

    Martin.
    Signature
    WealthyDragon - Earning My Living Online
    {{ DiscussionBoard.errors[3695021].message }}
    • Profile picture of the author LastWarrior
      Abledragon,

      Thank you for the tips. It's a reminder that I don't have to do it
      all myself and wouldn't hurt to outsource some of the heavy lifting
      when it comes to design, etc. My time is better spent on things
      I'm good at to maximize my efforts. Let the experts do their thing,
      I'll do mine.

      ===============
      ronc0011,

      lol! "It's called Web Platform Installer" You see, that option
      looked so far out there that it couldn't be what I wanted, that
      I completely overlooked the fact it's exactly what I was suppose
      to download. !!! I'll download it again and will give it a fair shot.
      Will have to look up online tips and videos to get me started.
      Will also keep the info you so graciously gave me to help me on
      my way as well. I'm grateful for the assistance!

      ===

      To Your Success!

      LastWarrior
      Signature



      {{ DiscussionBoard.errors[3696006].message }}
  • Profile picture of the author 365Daysof
    Martin has it right, having Firebug will help you find exactly where each selector is in your CSS, and will allow you to test changes right on the screen. It's a very handy tool.

    As far as other tools, a good (free, even) code editor that has line numbering and color coding is ideal, along with a good (free, even) FTP program.

    Get familiar with all of your directories and CSS files, then hop to. With Firebug, you should be able to test options and make them happen much more quickly than floundering in the code hoping.

    *smiles*
    {{ DiscussionBoard.errors[3697484].message }}

Trending Topics