WordPress.org

Ready to get started?Download WordPress

Forums

Header and Comment Questions (5 posts)

  1. JustKat
    Member
    Posted 10 years ago #

    Brand new to WordPress and CSS. I'm going okay but I have two questions.
    First I'd like to either change the header to specialty graphic text or to at least change the font. I'd rather have the graphic and at this point I'm not having any luck finding out how to do this.
    Secondly in my comments it shows what html is allowed, etc., but I'd rather not have this shown at all. Additionally the fonts in this information don't match.
    The website is http://mostlyfluff.com
    Any help would be greatly appreciated. Please be gentle - brand new to CSS.

  2. Mark (podz)
    Support Maven
    Posted 10 years ago #

    CSS:
    http://www.mfr.f2s.com/graphicalcss/
    The html thing - edit wp-comment.php if you have full comments, or wp-comments-popup.php and just delete that line from the code :)

  3. JustKat
    Member
    Posted 10 years ago #

    I did check out the tutorial which seems pretty straightforward, however it says to open your wp-layout.css file to edit the comment stuff. My file looks like this:
    /* Whole page
    -------------------------------------------- */
    /* Image from sxc.hu (http://www.sxc.hu/browse.phtml?f=view&id=73842)
    Thanks marcoaor! */
    body {
    background-image: url("graphics/kat.jpg");
    background-attachment: fixed;
    background-position: bottom left;
    background-repeat: no-repeat;
    }
    #rap {
    margin-left: 35%;
    margin-right: 60px;
    padding: 0.5em;
    }
    #rap * {
    -moz-opacity: .999;
    }
    #header {
    position: absolute;
    top: 10px;
    left: 5%;
    }
    #rap {margin-top: 70px;}
    /* Content & menu
    -------------------------------------------- */
    #menu {
    position: absolute;
    top: 80px;
    left: 5%;
    width: 10em;
    border: 1px solid #F0E4E2;
    background-color: #C8BEBC;
    font-size: 0.85em;
    padding: 0.5em;
    -moz-opacity: 0.8;
    filter: Alpha(opacity=70);
    }
    #menu ul {
    width:100%;
    }
    #menu ul {
    margin-top: 0;
    padding-left: 0;
    margin-left: 0;
    margin-bottom: 1em;
    color: #7C5852;
    list-style: none;
    font-weight: bold;
    }
    #menu ul ul {
    margin-left: 0;
    font-weight: normal;
    }
    #menu table {
    display: none;
    }
    #menu a:link, #menu a:visited {
    padding: 1px;
    color: black;
    border-width: 1px;
    border-style: none;
    display: block;
    width: 100%;
    }
    #menu a:hover {
    background-color: #C8BEBC;
    font-weight: bold;
    }
    #menu form{
    margin: 0 0 1em 0;
    }
    #menu form br {
    display:none;
    }
    input {
    width: 6em;
    font-family: Verdana, Tahoma, Arial, sans-serif;
    }
    /* Post
    -------------------------------------------- */
    /* date */
    #content h2 {
    float: right;
    margin: 0;
    font-size: 0.85em;
    font-weight: normal;
    background-color: #FAEEEC;
    padding: 0.3em;
    margin-left: 0.4em;
    border: 1px solid #F0E4E2;
    }
    .storytitle { margin: 0;}
    .post-categories {
    display: inline;
    margin: 0;
    padding: 0;
    }
    .post-categories li {
    display: inline;
    margin-left: 0 3px 0 0;
    padding: 0;
    }
    .post .meta {
    font-family: Verdana, Tahoma, san-serif;
    margin-top: 0;
    font-size: 0.75em;
    color: #666;
    }
    .post .meta * {
    margin-top: 0;
    }
    .post .feedback {
    margin-bottom: 3em;
    padding-bottom: 1px;
    }
    /* Credit
    -------------------------------------------- */
    p.credit {
    margin-left: 35%;
    margin-right: 60px;
    padding: 0.5em;
    font-size: 90%;
    }
    /* Basic typography
    -------------------------------------------- */
    body {
    font-family: "Georgia", serif;
    font-size: 100%;
    }
    p, td, th, li {
    font-size: 1em;
    line-height: 1.65em;
    }
    a:link, a:visited {
    text-decoration: none;
    color: #7C5852;
    border: 1px none white;
    }
    a:hover {
    background-color: #FAEEEC;
    }
    I deleted the blank lines to make scrolling easier here. There is no line that deals with comments at all. I made it to where the comments have a pop-up box but the image that is anchored on my page is also anchored in the box. I don't want the image in the pop-up box because it has a black background. Which file am I supposed to edit to change this?
    Which file do I edit to add a border around the comments?
    In the comments pop-up box it says 'Comments' and it also says 'Mostly Fluff' from the header. I'd rather not have my header in the comments box.
    I am trying to find things on my own but in this case I'm just not having any luck. Being a beginner I'm really needing a bit more guidance.
    Thanks for your help.

  4. Mark (podz)
    Support Maven
    Posted 10 years ago #

    In most cases, if you "View Source" when a page is displayed, you can see the tags that surround any part of a post / comment / display.
    If you then check that tag in the css, you can see it's properties.
    If though, there are no tags, just create them and style to suit.
    For instance, a View Source tag is
    div id="cake"
    so to write the css, you would start
    #cake {
    font-size: 10px
    }
    If the View Source tag was
    div class="cookie"
    you would start
    .cookie {
    font-size: 10px
    }
    If you try and follow some of the examples in the above tutorial you should get an idea of what you can do.
    Your css is also not the default - check the default style for tags in that (Comments are in that one) and also read NM's tag guide.
    For the popup, you will have to override what will otherwise be displayed by default ... I think. If I get time, I'll look into that one :)

  5. JustKat
    Member
    Posted 10 years ago #

    Okay... I typed the comments info. into the layout-css and was able to do a box with borders around the comments. Very nice. I still cannot figure out how to remove the dratted cat picture from the comments pop-up box, though. I even tried shrinking the picture down and typing in the code for a new picture for comments on the layout-css and that didn't work.
    Also, the comments field in the pop-up box is longer than the box itself. While this isn't a huge issue it's weird-looking.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.