Need help? Check out our Support site, then


Beginner trying to customize a page

  1. As a beginner I'm at a lost trying to customize the CSS... first I only see the default message stating: Welcome to Custom CSS! ...
    I've watched many tutorials and would love to apply some of it but am unable to see where I'd be able to even do it since there's nothing there. Baby steps anyone? The page I'm working on is http://www.lafemmelatina.wordpress.com

    The blog I need help with is lafemmelatina.com.

  2. Hi -
    I'm in the same boat. I have read all of the wordpress.com support links but still am unsure about how to do it. I would love some very basic css code to put into the free preview area just to see how it works. I tried changing the background color by entering, between the /* (that is what I am supposed to do, right?) the following:

    body
    {
    background-color:blue;
    }

    I save this, and it tells me it's saved, but then my background doesn't change to blue.

    If you are able to share any baby steps I would appreciate them too!

  3. Did the default CSS comment help in any way? Do you think we could update it to say something that would be better? I'd love to hear specific suggestions on that topic if you have any now or later. There are some ideas floating around about improvements, and I want to add what I hear from you too.

    Getting back to your request, it sounds like what you want is a basic CSS tutorial in general. I think this one is a good one for getting started:
    http://www.htmldog.com/guides/cssbeginner/

    Editing CSS is not always a simple thing to thing to break into if you're not already familiar with HTML, so a basic HTML would also be a good thing to cover:
    http://www.htmldog.com/guides/html/beginner/

    And if you're just looking for a simple example to try out in the Appearance → Themes → Customize → CSS panel, one that I usually test with is turning all the paragraphs red in a preview (just so you can see the change working), here is a CSS snippet for that:

    p {
         color: red;
    }
  4. @deborahwaltman, a couple spots can be tricky and body background color can be one. If custom colors or background color has been set somewhere else in the settings, then you need to include the "custom-background" class in your CSS selector. Give this a try as an example:

    body.custom-background {
        background-color:blue;
    }

    Note that it's tricky but not impossible to figure out once you get the hang of how to find which CSS selectors to use. One of the best ways to do that is to use your browser's web inspector tool. To activate it, right click on any element (i.e. the body element) and select "Inspect Element." It should pull up a panel with the HTML for what you clicked on as well as all the CSS that applies to it. You can usually find a selector in the CSS that is just the one you'll need to make the update you want. Here is an example: http://f.cl.ly/items/201h1T0T2I1b463t2P2F/Screen%20Shot%202013-04-26%20at%209.11.26%20PM.png

  5. Hi -
    Thanks so much for helping out. I think the default message is ok but it should tell the user to replace the text with theirs but leave the /* there on either end (if that is, in fact what you are supposed to do...as I said, I'm still not sure). I also would like for it to tell me if the code should go all on one line or be spread across multiple lines. In your example above it looks like it spans 3 lines - is this necessary, and why? Or could you put it all in one line and it would have the same effect?

    But...I tried the little snippet you provided - my front page didn't have any text in it, but I added some text in. It tells me it saved, and is published, but the words don't turn to red. So, although I think I'm doing it right, it's just not changing anything. I have access to a mac so I am going to try on that but I don't think it's my computer...I am using firefox 20 and yesterday in an attempt to get the preview going, support had me clear cookies, cache, run all the tests and so on and so on. I'm stumped as to why I'm not getting anything at all in the preview, with your code or the mine that I tried above.

  6. Alright, just figured it out....you do not need to leave the /* on either end of the css code. You definitely should take those out of the default css comment. Being a little familiar with html and knowing that things need < > around them, and then learning that css needs { } around it, I just thought the /* was necessary as well. No way a newbie would know that those are there for....pretty? Anyway, I now have the preview working for me so that's something.

    Lafemmelatina, I would suggest starting with seeing how the background color changes - in firefox, right click on your page and select 'inspect element'. The css code shows up on the right hand side. On my site, one of the first codes I get is

    body.custom-background {
    background-color: rgb(255, 255, 255);
    }

    with 255,255,255 being white. So if you change one of those numbers to say 0 or 20 or 100, you'll get a different color background.

    That's the kind of baby step I was looking for just to see if I was heading down the right street - I hope this helps you too!

  7. Hi there. I'm in the same situation as the two bloggers above and would appreciate some guidance. I am using the Delicacy theme and was trying to delete the ribbon and the bottom part of the standard header. I posted on the forum and someone helped me and gave me code to insert. The ribbon is now gone, along with the bottom part of the header, but the top navigation that was in the ribbon also is gone. Is there a way to get back the top navigation, given that I uploaded a custom header?
    Also, I've followed instructions to find my CSS and all I see is the code I was given to remove the ribbon, etc.
    The site I'm working on is fearlesshomecooking.wordpress.com (and it's not live yet b/c I'm trying to figure out some issues).
    Thanks for any assistance you can provide.

  8. I think the default message is ok but it should tell the user to replace the text with theirs but leave the /* there on either end (if that is, in fact what you are supposed to do...as I said, I'm still not sure)

    The /* indicates the start of a comment.

    /* This is an example of a CSS comment. */

  9. I also would like for it to tell me if the code should go all on one line or be spread across multiple lines.

    Good feedback. I wonder if this should be covered in tutorials and not in the welcome comment. I feel like there are a lot of basics that could be covered, and it's hard to pick out the right best ones when you want to keep an intro message very short!

    In your example above it looks like it spans 3 lines - is this necessary, and why?

    It's more readable that way. Proper spacing for any kind of code is a best practice that will help you if you continue to use it and if you collaborate with others (or ask for help in forums). In general, it's a good idea to have good code formatting. Check out this related page about CSS coding standards in WordPress:
    http://make.wordpress.org/core/handbook/coding-standards/css/

    Or could you put it all in one line and it would have the same effect?

    It would have the same effect. Actually, many sites, including WordPress.com, minify the CSS later so it's all on one line. It's more efficient for servers to read the CSS that way, but it's better to give any CSS that humans read better spacing than that. :)

  10. I am using the Delicacy theme and was trying to delete the ribbon and the bottom part of the standard header.

    First, I think you need to get your menus in order. It looks like you created two separate menus, but both are currently empty. If you look at Appearance → Menus → Manage Locations, you'll see "side main menu" selected for the main (top) navigation. You probably wanted to set that to "Top Menu" instead. Which ever menu you decide to choose there, go back to the "Edit Menus" tab and select the one you picked in the other tab. Ahhhh, now I see part o the problem. You've set every post to be private. You can't add private posts or pages to menus. They have to be published first. You can do that and still keep the blog itself private so no one can see it if you go to Settings → Reading and change the "Site Visibility" option to the option that says, "I would like my site to be private, visible only to users I choose."

    It seems like you've bumped into an unfortunate sequence of events that conspired against you! Keep at it though, once you get it untangled after this, it should be much easier!

  11. DesignSimply, thanks so very much for looking at my blog. I appreciate the time very much. I changed the setting in Settings/Reading as you suggested and that cleared up some things right away. I've decided not to use a top navigation because the ribbon in Delicacy reappears and conflicts with my header, so I'm opting for a sidebar navigation.

    My question is this: can I create the navigation using widgets instead of creating a custom menu with parent and child pages?

    Thanks in advance for your guidance.

  12. I appreciate getting feedback on my feedback. Now that I'm getting the hang of it it's a bit easier to understand - but honestly that /* threw me off...it would be as simple as stating that the /* indicates the start and end of the comment, as you told me above, and to remove the /*. I think folks who are already very familiar and comfortable with things like these forget that those who are brand, spanking new and it need very clear directions. Maybe I'm the only one...or maybe it's because I'm a middle school teacher and a parent and have to give very clear directions in just about everything I say or write!

  13. My question is this: can I create the navigation using widgets instead of creating a custom menu with parent and child pages?

    Yes, you can create a custom menu in Appearance → Menus and then add a "Custom Menu Widget" to the sidebar to show that menu.

    Here are the related help pages for those two things in case they help:
    http://en.support.wordpress.com/menus/
    http://en.support.wordpress.com/widgets/custom-menu-widget/

    @corollamom3, I bet we can fix up the ribbon issue if you want to try. If you do, please create a new help request and make sure to include a link to your blog.

  14. @deborahwaltman, we used to have more documentation inside the default comment, but we found that (1) most people didn't read it and (2) if you make it really long people really won't read it. :) Your feedback is awesome though, it's very good to hear what you think, and I will work together with my team to try to make adjustments in the future that takes this kind of feedback into account.

Topic Closed

This topic has been closed to new replies.

About this Topic