Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

123

Getting Started with Custom CSS

  1. andy
    Staff

    You've just purchased the Custom CSS upgrade. Your theme looks exactly the same as before and you now have an empty box in the CSS Editor. What next?

    The CSS Editor does not let you edit any particular theme stylesheet; rather, it keeps the theme intact and lets you edit a brand new stylesheet. Because your custom CSS is loaded after the theme's CSS, your style rules can override or augment the existing rules.

    You can use CSS to improve on any existing theme; you can define your own classes for use in posts; you can select the Sandbox theme and build on one of the Minimalist layouts or opt for no stylesheet and do it all yourself.

    CSS is not hard to learn and there is a lot you can do with it at any level of skill.

  2. timethief
    Member

    @andy
    So you download sandbox to either your own server or a webhost like the ones here http://wordpress.org/hosting/. Then you purchase the Custom CSS upgrade. Then you aren't relying on this forum on wordpress.com for support, right? Instead you're over here http://wordpress.org/support/, right?

    Having read wank's sposting and your own here http://wordpress.com/forums/topic.php?id=3230&replies=17
    I take it that any wordpress.com blogger who wants to continue to use the theme they already have now at wordpress.com can choose to move over to wordpress.org and and customize the theme there. Is that right?

  3. sunburntkamel
    Member

    @timethief
    no, the sandbox isn't available for download. yet.
    with a CSS upgrade you can customize any theme
    _on wordpress.com_

  4. drmike
    Member

    Sandbox home page in case you're interested.

  5. podz
    Member

    There is no support from myself for CSS issues.

    Any feedbacks / support requests will be directed to the forum.

    This is not because I do not want to help but because the issue is huge and to do so would adversely affect the support I do give already.
    There are many many resources for CSS and very soon people will start to showcase their efforts and hopefully share their code here. Answers are also better given in a public arena where more people can benefit.

    Additional support is not part of the upgrade.

  6. drmike
    Member

    /drmike looks around.

    Oh oh.

    And you folks know I feel about newbies whacking away at CSS. :)

  7. timethief
    Member

    @drmike
    Are they kidding?
    Podz is not providing support ... "the issue is HUGE."

    Do they think that you are going to provide voluntary unpaid support for fumbling newbies like moi to muck about with CSS right HERE on this forum.

    The issue is HUGE and yet they expect it to be dealt with among the already substantial number of support requests coming in that have nothing to do with CSS.

    GOB bless us all, if that's the case, because I'm gonna become everyone's worst CSS whacking nightmare. Where do I sign up?

  8. sunburntkamel
    Member

    there are more than a few people who know their way around CSS in here.

    more importantly, you should take a look at what happens around communities that allow CSS modification (blogger, livejournal, myspace). very, very quickly, there will be websites peddling 'custom wordpress.com styles' popping up. fortunately, the community has the jump on them:
    http://www.alexking.org/index.php?content=software/wordpress/styles.php

    every one of those styles can be implemented in a heartbeat.

  9. wank
    Member

    every one of those styles can be implemented in a heartbeat.

    Well, there have been a couple of changes to the sidebar structure since 1.2 so they may require a little tweaking to look good, and then of course you'd have to upload the images separately and update all the urls in the stylesheet to reflect that (note that I am not advocating people hotlink them from alexking.org ;) )

    So yes, the Classic stylesheets are a great resource, but I wouldn't recommend them to complete newbies.

  10. timethief
    Member

    I read the tutorial/instructions and knew immediately this wasn't for me. This is aimed at a different user group than the one I'm in.
    Edit: And I suspect it's a user group that up to now we haven't frequently seen on the forum either asking for support or offering to provide it to others.

  11. sdrane
    Member

    I think that, rather than beginning from scratch with the Sandbox themes, I will take a gentler approach: I use the Default Kubrick, which seems to have the right dimensions and layout for me. I just want to change minute things like the font size in the sidebar, background color of the sidebar, type of font and font colors, stuff like that. I'm going to use the CSS customization upgrade for this purpose. This is easy and takes no time at all, since it just involves taking CSS from the installed theme and modifying it slightly.

    It is clear to me that, if I begin with one of the Sandbox skins, I'll probably spend hours customizing them since they are bare-bones layouts (as they should be). Since I am more concerned with my content and have too much work at present, I can't afford to touch the Sandbox. But man, I wish I had the time for that! It looks like endless fun.

  12. sunburntkamel
    Member

    sdrane - good on you!

    in a short while when scott releases the full version of the sandbox, you'll be able to grab CSS that recreates the default kubrick theme on top of Sandbox.

  13. andy
    Staff

    Actually, I have posted the Sandbox/Kubrick CSS here: http://wordpress.com/forums/topic.php?id=3248

  14. drmike
    Member

    You can also pull up CSS files for specific themes from looking at the page source within your browser. Just look for a line near the top that looks like this:

    <link rel="stylesheet" href="http://wordpress.com/forum-theme/forum.css" type="text/css" media="screen" />

    Copy and paste the URL into your browser and it will either ask you want you want to do with it (IE) or display the file in your browser window. (Netscape. Not sure what the others will do with it.)

  15. lizwaldner
    Member

    Is a newbie ready to whack away at her CSS. hehehe
    Yep..just bought my credits and hit purchase...impulse shopper you bet.
    Now i have this pretty blank little box that I scratch my head at say 'hmm'

    But alas..anything worthwhile is work whackin away and learning. :)
    cheers,
    Liz Waldner
    Web Site Super Surfer...cough* cough* armed with blank CSS box :)

  16. lorelle
    Member

    Good luck, Liz. This isn't for the timid.

    There will be some sample stylesheets coming soon. I think there is one or two already posted in this section of the forum. And I'll be writing more about this. Expect everyone to be writing more about this. Wait patiently while staring at your blank CSS box. ;-)

  17. featsp
    Member

    Hello,

    Well, I have been lurking around for some time. I have created a custom template-with help-over at "blogger" and for various reasons I am thinking about coming over here. I just purchased my upgrade so I could start working on the CSS, paid through paypal with check but still do not have a blank sheet. Am I missing something or is it a time delay issue.

    Thanks, great info here.

    Sheri

  18. wank
    Member

    Best place for technical problems like this is the feedback link in your admin pages; they can fix it up quicker from there. This forum is more for CSS issues, since wordpress.com official support doesn't handle those.

  19. featsp
    Member

    Thank you, I was just checking if it was an editor-meaning me- boo boo. I will be back once I get my sheet up.

    See you soon,

    Sheri

  20. diewege
    Member

    ich suche mein stylesheet zum theme: contempt.
    brauche nur eine farbe zu ändern.
    habe das gead-bild bereits angepasst.

    I search my stylesheet for contempt theme.
    It´s easy for me, to change it.

    diewege

    on my local-server are other themes, all with complete folders,
    but into my webspace wordpress is nothing for my contempt-folder.
    can I change CSS for contempt into my-admin?

    sorry, my english is minimal

  21. drmike
    Member

    diewege, I think you're on the wrong website. If you not hosted on wordpress.com, you need to be at http://wordpress.org

  22. featsp
    Member

    "I just want to change minute things like the font size in the sidebar, background color of the sidebar, type of font and font colors, stuff like that. I'm going to use the CSS customization upgrade for this purpose. This is easy and takes no time at all, since it just involves taking CSS from the installed theme and modifying it slightly."

    This was posted and it is exactly what I want to do. I have paid, get the screen, but only see their info. I even tried putting in my current html that I have on blogger, but no go. What I am trying to see is the current html for SIMPLA template to modify slightly. Darker font and larger. In other programs, you get to see the html that you want to modify. What am I missing here folks.

    Sheri g.

  23. sdrane
    Member

    Sheri: When you purchase the upgrade, you will see a blank space to put your *own* CSS code. This is what you are seeing. You won't be able to see the CSS code for the theme that you have chosen. Here is how it works:

    Let us say you want to modify the font colors of the Simpla Theme. Then, you select the Simpla theme from the "Presentation" Tab. Then, click on your CSS tab, and in the empty space, put CSS code which will *overide* the font colors of the Simpla Theme. When someone visits your blog, they will see the Simpla Theme with your new font colors.

    Thus, the empty space that you see under your CSS tab is to be used to place your overrides. You won't see the CSS of the chosen theme. This is indeed unlike Blogger, in which you would be able to access and edit the entire CSS of the chosen theme.

    Alternatively, you can select the Sandbox theme, and then write your own CSS in order to convert the minimalist look of Sandbox, to the desired look of the Simpla theme. This might be a lot of work, if you are unfamiliar with CSS. I'm not sure when, but Scott Wallick, who wrote the Sandbox theme, is going to put up a wiki where he will post CSS skins. These are collections of CSS code, which you can cut and paste into the empty space on the CSS page, to obtain a desired look. There are skins for Kubrick, K2, China Red etc. Perhaps, someone somewhere is already making a skin for Simpla.

  24. featsp
    Member

    Hi,

    Thanks for writing. I understood this to some degree, but I also attempted to put in code that I created with some help over the Sandbox and...no luck. I saw the sandbox and my own header, but nothing else worked.

    I am yes...a just starting with CSS, but learning everday. I will try as you suggest and add the new font, etc with code and see what happens. It would be soooo much easier for us non-developers to be able to see the code to modify it. I am not sure why wordpress makes it so difficult in that respect.

    I am sure that the theme skins are licensed, so I get that part, but how about some non-copyrighted versions that allow us who are just getting started to simply cut and paste the code...ie: insert here.

    At least I have that much down! Now I am not too sure, why I paid to edit my CSS.

    Thank you so much for your quick response,

    Sheri

  25. sdrane
    Member

    Sheri, There is a way in which you can still access your theme's CSS. This way, at the very least, you can get a handle on what needs to be tinkered with.

    To do this, go to your blog page, and right click on it, select the option to "view the page source". In the html/CSS/php code that appears, near the top, there should be a line, something like this (I took this from your current blog):

    <br /> <style type="text/css" media="screen"><br /> @import url( http://realizeyourdreamsnow.wordpress.com/wp-content/themes/quentin/style.css );<br /> </style><br />

    Just click on the above http address, and you have your theme's CSS. Now, you can cut and paste stuff from there into your CSS editor, and play with the variables and colors.

    In my experience, if you can give a little time to making the mods, the $15 upgrade is well worth it, in spite of the initial frustration.

  26. pgcmls
    Member

    I think folks who wish to change colors and font sizes have lots of resources. Start at colourmod.com or, if you've admired another website or blog's color scheme, try colorcombo.com and find out exactly which colors were used.

    These are very small CSS changes that can make an enormous difference. I set up a staff blog for our 18 branch library system and found the customized header very easy to do and place. (Please ignore the perky tone set there--it's a system blog and I run PR, OK?) The guidelines page there lists sources for stock photos.

    For our family business (www.vertigo-books.com) I used Blogsome, also running modified WP, and made small color changes to the Minima Plus theme. Although I prefer WP, I needed customization.

    There are lots of other sites out there with CSS tutorials, but Sheri's and others' needs can be addressed w/o a huge investment of time. Just remember page source, page source is your friend. Don't forget Firefox's ability to highlight what you are interested in, then right click. A stubborn streak and a logical mind are helpful, though :>)

  27. demigod
    Member

    All,

    I bought this upgrade option, and also did some changes with the CSS. Now i have two questions.

    1. Along with the CSS changes, if i have to make code changes in any other php (for eg: archives.php), how can i do that? 15$ is just to finger around CSS. If it's true you are going to see many of us including me regretting for the upgrade and we'll pull back for next year.

    2. Tell me where should i add any java script snippets like if i need to link allconsuming.com from my blog.

    Thanks.

  28. ronshepston
    Member

    Needless to say, I am a WordPress and CSS rook.

    I have a WordPress.com blog /*http://<name>;.wordpress.com.*/

    I bought the CSS upgrade and then I downloaded a plugin whose first lines look like this and put it in the CSS Stylesheet Editor and it does nothing. What am I doing wrong?

    ----------------------------------------------
    <?php
    /*
    Plugin Name: front page login
    Description: Adds a sidebar widget to allow logins on the front page
    Author: Hermescb
    Version: 1.0
    Author URI:

    */
    /* added for this comment

    function widget_fplogin_init() {

    if ( !function_exists('register_sidebar_widget') )
    return;

    function widget_fplogin($args) {

    <snip>

    ?>
    */ added for this comment

    ---------------------------------------------

  29. practicallyedible
    Member

    The page for custom css advises us to test our css in several different browsers, but where is the ability to write different css rules for different browsers? How can I make my style work in all these different browsers?

    I haven't purchased the custom css upgrade yet, so perhaps this ability is there, but I can't see it because I don't have the upgrade?

  30. drmike
    Member

    I've always done that within the CSS file itself.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags