WordPress.org

Ready to get started?Download WordPress

Forums

Blank CSS for WordPress (13 posts)

  1. stuntmusic
    Member
    Posted 6 years ago #

    I am looking for a CSS file for WordPress that is basically blank.

    It has all the proper pieces to control how WordPress is styled (I'm not going to use the fancy terms like 'selectors' etc here)

    I've downloaded a few themes that are "blanks" but the CSS seems to be missing many elements.

    One of the things I am trying to do is to make the links that appear in a UL tag (such as category links) different than the links that appear in an H2 tag (such as the article titles)

    Anyone have any suggestions?

  2. moshu
    Member
    Posted 6 years ago #

    #sidebar ul li a {something}

    #sidebar h2 a {another thing}

    .post-title {whatever}
    + in html <h2 class="post-tile">

    You don't need a blank CSS for that - you need to put your own classes and IDs in the HTML markup and define them in the stylesheet.

  3. stuntmusic
    Member
    Posted 6 years ago #

    moshu

    Thanks, but the problem is that I don't know all the classes or ID's of the WordPress elements, so having the blank one would be a help so I can create the design I want, then edit the CSS so I see the results in the blog.

    Perhaps I am not being completely clear in what I want to try and do. But it is a great learning experience

    I've seen a post elsewhere for using a sandbox, saving a page from wordpress as an HTML file, creating a CSS file, then editing it so I can better see results in my browser, etc.. but having the "complete" CSS list of elements would be helpful.

    - Marc

  4. whooami
    Member
    Posted 6 years ago #

    I see what youre after, and its a little overkill.

    WordPress doesnt wrap very much in CSS on its own. Its the theme authors that do that, and there's no standard (there simply cant be).

    What WP does is provide structure.

  5. whooami
    Member
    Posted 6 years ago #

    a few things I recommend.

    1. Use FireFox as your browser.

    2. Install the web developer extension for FF.

    3. Install the slayeroffice DOM inspector @ http://slayeroffice.com/tools/modi/v2.0/modi_help.html

    Once you're equipped with those 3 things, you dont need a sandbox, you just need eyes :)

  6. stuntmusic
    Member
    Posted 6 years ago #

    whoami,

    Thanks for the advice. I was going in that direction as well, using Firefox etc.

    Granted, the theme authors stick a bunch of junk in the CSS to amke it all nice and cool... but that doesn't change the fact that I can't find, anywhere, a 'list' of the elements that WordPress uses.

    I guess if I had that, that would be a good start. Maybe it is overkill, but I am trying to do some funky things with the designs I am coming up with, multiple sidebars, etc and I guess I like the pain ;-)

  7. whooami
    Member
    Posted 6 years ago #

    you cant find one, because there isnt one, thats what I'm telling you -- aside from the tag cloud, which I believe might include its own styling mechanism, there is no class=blah or id=blah outputted WP.

    thats style, not structure.

    the exception to that rule is widgets. widgets, for whatever reason DO include that crap. even the default widgets.

    what you need to look at to familiarize yourself, and prove this out are the various template tags.

    http://codex.wordpress.org/Template_Tags

    a wonderful example would be this one:

    http://codex.wordpress.org/Template_Tags/get_permalink

    structure structure structure. :)

  8. moshu
    Member
    Posted 6 years ago #

    Actually, WordPress doesn't use any "element" - with the exception of some lists that are displayed in the sidebar, usually: wp_list_pages, the categories list, blogroll list.

    All the rest of the div classes and ID, or paragraph classes etc. are defined by the theme author. In this case - YOU.

    Let me give you an example: according to the Codex this might be the sinplest Loop for an index.php file -

    <?php
    get_header();
    if (have_posts()) :
       while (have_posts()) :
          the_post();
          the_content();
       endwhile;
    endif;
    get_sidebar();
    get_footer();
    ?>

    OK, now disregard the call for header, sidebar, footer... and you end up with this:

    <?php
    if (have_posts()) :
       while (have_posts()) :
          the_post();
          the_content();
       endwhile;
    endif;
    ?>

    Everything you are going to add, i.e. Template_Tags like
    the_title
    the_date
    the_permalink
    the_category

    can and should be wrapped inside divs and/or other html tags. The name and the properties of those divs will be defined exclusively by you. It makes sense to call the div where the_content goes as div class=entry or "post" or "blogpost"... but you can call it "stuntmusic" or "moshu" as well.

  9. whooami
    Member
    Posted 6 years ago #

    indeed I may very well be wrong about the widgets -- I just recalling seeing multiple declarations of div id="widget" or something similar that didnt seem theme specific, it might just be poor coding by either the widget authors or the theme authors.

    Not using widgets, I wouldnt know personally. :)

    --

    and the tag cloud:

    http://codex.wordpress.org/Template_Tags/wp_tag_cloud

    the default usage defines font sizes, which in my humble opine is in very poor taste - it ought to have been done the way my zeitgeist is, so that it could be more user defined without editing the tag.

    .cloud_0 {font-size:1.0em;}
    .cloud_1 {font-size:1.0em;}
    .cloud_2 {font-size:1.2em;}
    .cloud_3 {font-size:1.2em;}
    .cloud_4 {font-size:1.4em;}
    .cloud_5 {font-size:1.4em;}
    .cloud_6 {font-size:1.6em;}
    .cloud_7 {font-size:1.6em;}
    .cloud_8 {font-size:1.8em;}
    .cloud_9 {font-size:1.8em;}
    .cloud_10 {font-size:2.0em;}

    That would have taken more lines of code though.
    but thats off topic ;P

  10. stuntmusic
    Member
    Posted 6 years ago #

    Ok, for the sake of being argumentative (since it really is the only way I learn) :-)

    I have a blog I am working on... if I view the source for the page I have a couple of these

    div class="post"

    and

    div class="entry"

    So, are you saying that those two divs are something I put in? I'm pretty sure That's WordPress, not me.

    Granted, it's all structure, but at some point, WordPress creates some of that stuff, like 'comment', 'post', 'content' correct?

    I know enough to be dangerous and modify themes and have embarked on doing one of my own.... but am eager to learn more more more....

    And thanks for the help. I know it can be painful to watch guys like me struggle with this stuff. I know I get made when I am doing QA (my real job) and I have to go tell a developer to stop making the same damn mistakes :-D

  11. whooami
    Member
    Posted 6 years ago #

    yes, thats exactly what we are saying.

    div class="post" and div class="entry" are theme specific. thats not something WP spits out.

    YOU can prove this out yourself, by installing wordpress, taking your choice of themes, I would actually use the classic theme if it were me, and removing everything from the theme that is NOT a template tag.

    What youre going to end up with is a white page with completely unstyled output.

  12. stuntmusic
    Member
    Posted 6 years ago #

    Hmmmm.

    Much experimenting to do here.

    But I am learning and appreciative of what you have told me.

    Maybe I'll make a blank template with blanks CSS all mocked up and sell it :-)

  13. ektz
    Member
    Posted 6 years ago #

    What you ask for is already there. Take a look at this .. you'll find your blank theme. i couldn't find the link on author's site so i uploaded it at my blog for people to download.

    http://falconerdesigns.com/2008/01/13/blank-wordpress-theme/

Topic Closed

This topic has been closed to new replies.

About this Topic