Getting Started with Custom CSS

  • Author
    Posts
  • #24438

    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

    #24442

    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.

    #24443

    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.

    #24444

    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

    #24445

    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):


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

    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.

    #24451

    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 :>)

    #24457

    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.

    #24496

    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

    ———————————————

    #24497

    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?

    #24498

    drmike
    Member

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

    #24499

    How?

    I have always done it in the html file, with this type of thing:

    <!–[if IE]>
    <![endif]–>

    either putting the IE-specific style modifications right in there, or referencing a separate css file just for IE.

    #24500

    kukas
    Member

    One quick question:
    if i just want to add a buttom or a counter to the sidebar, the CSS Custom upgrade is my only chance?

    #24501

    timethief
    Member

    You can create and add a countdown ticker to a birthday or any other important event from the ticker factory in html without css customization http://www.tickerfactory.com/ezticker/ticker_designer.php

    #24502

    kukas
    Member

    What about one of those all-in-one feed buttoms like this one: http://www.feedbutton.com/ ?

    and, in case it’s possible, where do i put the code? (the CSS Stylesheet Editor don’t lets me save any changes…)

    #24508

    konahomaru2
    Member

    i love my website

    #24509

    daij
    Member

    i like my website too since I also pruchased the domain, yay!!!

    #24510

    nieys
    Member

    Could I add other HTML code from another web like shoutbox if I upgrade?

    #24511

    timethief
    Member

    @nieys

    Could I add other HTML code from another web like shoutbox if I upgrade?

    No. You would have to hire a web host or go to self hosting to do this.
    However, you have a meebo widget that you haven’t installed on your blog yet. That is the only form of a shoutbox that can be used on our blogs here at wordpress.com. http://wordpress.com/forums/topic.php?id=5631&replies=2#post-36334
    (1) First you must register with meebo. I got the url off the net for you http://www23.meebo.com/index-en.html
    (2) Then you must go to -> Dashboard -> Presentation -> Sidebar Widgets and simply drag the meebo widget out of the “available widgets” box and drop it into the “sidebar” box and click “save changes”.

    #24517

    tinsol
    Member

    I think its lame that you haveto pay extra or any to modify CSS. its very basic and easy and can make a real difference.

    #24518

    croatia2008
    Member

    wordpress would be so much more popular if it was more custimizable. They should at least have a free version so I know what im dealing with before I buy…

    Yes you can put up banners on the side bar with HTML just go to sidebar options, drag Tex1 and paste html code in it and save..I tried to put google adsnse ads on but it didnt work…

The topic ‘Getting Started with Custom CSS’ is closed to new replies.