Need help? Check out our Support site, then


CSS problem

  1. delicioustorts
    Member

    I feel like a huge idiot, because I think I have had to ask this question two times before with other blogs.... but, I am helping a friend set up a simple website for her personal chef business (kitchendiva.wordpress.com). I did this before for her daughter when I had a lot of free time to learn about CSS, most of which I have now forgotten (and these days I'm a law student).

    We purchased the CSS upgrade for that blog, and I thought with the other site that to get going editing the basics of the original theme, I had to copy the contents of the style sheet (she wants to use the Fleur de Lys one) into the box and then check "start from scratch and use this." However, when I do that, the page loses all the shaded sections and generally looks crazy, before I even do any editing.

    Then I tried copying the entire CSS style sheet code content into that box and checking the first box - still messed up in the same way. Shouldn't I be able to copy the entire stylesheet into the box before making any changes and have the theme look like it's supposed to? Does this make sense and can anyone help me?

  2. Nope, if you are going to modify an existing theme, it's recommended that you don't add the whole code in the editor but just your changes, and leave the "add to existing css" radio button checked.

    Be aware that if you're using one theme, the CSS of another theme won't work and will mess things up.

    If you're previewing the changes, you won't see the blog the way it's supposed to because you're trying to apply the CSS of another theme. For the changes to be visible, switch to Fleur de Lys and you'll see the difference.

    HTH

  3. delicioustorts
    Member

    Hmmm.... when I did the other site - which is now privatepalate.com - I know have copied the whole code in there - and it worked fine after I got it right. I just used trial and error to make all the stuff I didn't want on the blog (category titles, comment stuff, etc) go away by turning it the same color as the background. (Probably the least efficient form of web design ever, I know). Is there something about the fleur de lys theme that is making this difficult?

    So, if I can't edit the entire code by pasting it in there, then I don't understand how I can add changes - like if I want to get rid of (or say, "whiten") the word "uncategorized," culinarytravelers and the timestamp from the pages, do I just have to find those specific parts of the code and only copy those into the box with the font color changed?

    Thanks for your quick reply.

  4. do I just have to find those specific parts of the code and only copy those into the box with the font color changed?

    Yep. That's exactly how you do it.

  5. Okay, maybe I wasn't clear enough.

    See, themes have different set of IDs and classes. Some, by chance, may have the same ID, for example:

    <div id="sidebar">
    
    ....
    </div>

    but some don't.

    CSS styles elements with what is called selectors; selectors is what "hooks" your CSS to your HTML; so, to style the "div id='sidebar'", your selector in your CSS would be this:

    #sidebar{
    [definition goes here]
    }

    If the CSS you're trying to use has a selector like:

    #mysidebar{
    [definition]
    }

    then the "div id='sidebar'" won't be styled because there's no selector in the CSS that will define its properties.

    That's why, the blog (kitchendiva) you're trying to style, will look messed up because the current theme you're using is Cutline. Cutline may have different elements that are not compatible with the CSS you're trying to implement; thus, my suggestion on changing the theme to Fleur de Lys.

  6. Hey delicioustorts. The general strategy is that in the CSS edit box you write CSS fragments that can either add to or override the theme's own CSS. If you don't like something in the existing CSS, just create a CSS block for the same tag/id/class, and put in those same attributes with the values you desire. And all attributes have some value that means "none" (or zero or blank or whatever.) YOu just have to look it up. I use "CSS Pocket Reference" a lot.

    Second, if you're trying to make elements disappear, there are attributes you can use to make the element not draw (but still occupy space) or not get removed from the flow (so occupy any space).

    #someid {visibility: hidden; }
    #otherid {display: none; }

    Finally, DO get the firebug add-on for firefox. It lets you see exactly what's going on with respect to how CSS is affecting each visible element.

    Hope that helps

  7. delicioustorts
    Member

    Wait - huh? I'm not using Cutline. I've had it set to Fleur de Lys this whole time.

    I did figure out a few of the little things I want to make disappear - but I still need to get rid of the date, and the little icons - which is probably impossible. If anyone knows what those would be called, I would be forever grateful. I will try those lines to hide - I appreciate that.

    I'm just a little frustrated because I took on this little project to help my friend's mom out, but honestly, I don't know what I am doing. I muddled my way through editing the Treba theme to make that other page two years ago, which turned out fine, but this theme is more complicated.

    Anyway, I'm adding Firebug, but honestly, I have no clue what that will do. Yes, it's totally the blind leading the blind over here....

  8. You're making changes to this blog, right?

    http://kitchendiva.wordpress.com/

    That blog is using Cutline. And that's the blog I'm assuming you're making the changes to.

  9. delicioustorts
    Member

    Good grief. I'm so sorry - thekitchendiva.wordpress.com.

  10. ah... that's different. Okay, let me read the thread again to see what you want to do and I'll post something as soon as I can

  11. delicioustorts
    Member

    :)

    Sorry..... And thank you!

  12. delicioustorts
    Member

    Everyone - thank you so much! With that firebug thing - I easily found the stuff I was looking to edit out and got almost all of it taken care of. Seriously - that app is awesome!

    Thanks for tolerating my idiocy - but you all totally helped me tonight!

  13. Hahaha -- too many divas in the kitchen!

  14. > Firebug, but honestly, I have no clue what that will do
    After adding the plug-in, navigate Firefox to some page of interest where you want to understand the CSS. Then Tools > Firebug > Open Firebug (possibly in new window if you have enough screen space).

    Now you can do a variety of things that are useful. To get started: right-click on some element on the web page, and select "Inspect Element". That will cause the Firebug window to locate that element in its HTML tree view, and beside it shows the CSS that impacts that element, showing exactly where that CSS comes from, and which bits of CSS are overriden by other CSS (using strike-out font).

    Going the other way, if you float the mouse over an element tag (like a div) in the HTML window, the corresponding area in the browser highlights (and click on the tag to see the corresponding CSS).

  15. Gwideman - Yes! Extremely useful! Thank you so much for referring me to firebug. That really made everything much, much easier!

Topic Closed

This topic has been closed to new replies.

About this Topic