Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Questions about categories, comments, mobile

  1. wildflwr
    Member

    Hello - These are just a few quick questions - I just wanted to find out if it is possible to with CSS do the following?

    1. Twenty Ten: Can I show the entire post length in the Category list, not just an excerpt?
    2. Vigilance: Ditto, not just the title?
    I read somewhere that this is not possible but thought I'd doublecheck...

    3. Coraline: Can I move the comments to below the posts instead of above?

    4. Vigilance and Coraline: Can I turn off the "Comments off" if I close the comments for a post?

    5. Also - but perhaps this does not belong here - do all themes work ok with smartphones or only those with adjustable widths?

    Thanks for any enlightenment!

    The blog I need help with is wildflwr.wordpress.com.

  2. designsimply
    Staff

    1. Twenty Ten: Can I show the entire post length in the Category list, not just an excerpt?

    No, that's something that's built into the theme design and cannot be changed with CSS alone.

  3. designsimply
    Staff

    2. Vigilance: Ditto, not just the title?

    Same story. It's built into the theme design and can't be changed.

  4. designsimply
    Staff

    3. Coraline: Can I move the comments to below the posts instead of above?

    The comments in Coraline are already below the post. Do you mean the byline or maybe the comments link from the byline?

  5. designsimply
    Staff

    4. Vigilance and Coraline: Can I turn off the "Comments off" if I close the comments for a post?

    Yes, to hide the 'Comments are closed' text in Vigilance:

    #comments .note {
  display: none;
}

    To hide the 'Comments are closed' text in Coraline:

    #comments .nocomments {
  display: none;
}

  6. designsimply
    Staff

    5. Also - but perhaps this does not belong here - do all themes work ok with smartphones or only those with adjustable widths?

    There is an option to turn on a mobile from the Appearance → Mobile in your blog's dashboard.

    See these help pages for more info and examples:
    http://en.support.wordpress.com/themes/mobile-themes/
    http://en.support.wordpress.com/onswipe-theme-for-ipad/

  7. wildflwr
    Member

    Thanks !

    And to clarify my Question 3: In Coraline, there are two places where "Leave a comment" occur, one below the post header and one below the post. Can I remove the one on top, below the post header, and keep the one below the post?

    Thanks again!

  8. wildflwr
    Member

    Also, while I'm thinking about it, in Coraline, 3 more questions in addition to the one just above:

    1. Is it possible to move the Pages bar to below the header instead of above it?

    2. Can I change the link color from blue/link, red/hover to other colors, say two grays?

    3. Can I create a light gray background for the blockquote?

    Thanks and have a great day!

  9. designsimply
    Staff

    And to clarify my Question 3: In Coraline, there are two places where "Leave a comment" occur, one below the post header and one below the post. Can I remove the one on top, below the post header, and keep the one below the post?

    Yep, you can hide that one! Try this:

    .entry-meta .comments-link {
display: none;
}

  10. wildflwr
    Member

    Adding to question 2. above about links - in addition to changing color, can I remove the underline?

  11. designsimply
    Staff

    1. Is it possible to move the Pages bar to below the header instead of above it?

    In Coraline, you can move the top menu below the header image like this:

    #access {
  border-top: none;
  position: absolute;
  top: 199px;
}

    Note that you may need to adjust the top value depending on what other CSS you add.

    If you did that, you might also want to add extra space above the content container area like this:

    .content-sidebar #content-container, .two-column #primary, .two-column #secondary {
  margin-top: 2%;
}

  12. designsimply
    Staff

    2. Can I change the link color from blue/link, red/hover to other colors, say two grays? in addition to changing color, can I remove the underline?

    Yes. To find what CSS to change for that, I would recommend looking at the original stylesheet, copying the relevant CSS (just the link colors part), editing it and pasting the modified CSS into your Appearance → Custom Design → CSS page.

    Here's a link to the Coraline original CSS: https://s-ssl.wordpress.com/wp-content/themes/pub/coraline/style.css?m=1327698544g&minify=false

    Look for the section labeled Links.Here are the current basic link color settings for Coraline. Copy these and adjust the colors:

    a {
	color: #0060ff;
}
a:visited {
	color: #333;
}
a:active,
a:hover {
	color: #df0000;
}

    There are a few more link color settings in the Content area:

    .entry-meta a {
	color: #888;
}
.entry-meta a:hover {
	color: #df0000;
}

    There may be other specific color settings. You can find them by looking in the stylesheet.

    Here are some links about colors if you're interested: http://www.w3.org/TR/css3-color/#svg-color and http://en.wikipedia.org/wiki/Web_colors

  13. designsimply
    Staff

    3. Can I create a light gray background for the blockquote?

    Sure! In Coraline, the blockquote tag is styled like this:

    blockquote {
font-style: italic;
margin: 0 30px 1.7em;
}

    To add a light gray background, you can add this to your Appearance → Custom Design → CSS page in your WordPress.com blog dashboard:

    blockquote {
padding: 4%;
background: #ddd;
}
blockquote p {
margin-bottom: 0;
}

  14. wildflwr
    Member

    Can I use the same CSS to change the fonts in Coraline, change the font size, and make the post width wider, as advised there for Twenty Ten, or would the CSS need to be different? I want to make sure I don't screw anything up...
    http://en.forums.wordpress.com/topic/twenty-ten-questions?replies=7

    I think I am finally starting to understand a bit more about how CSS works thanks to your help and links, Designsimply! Now all I need is a few days to dig into the links and code help you gave me and I should be good to go! Thanks so much for sharing your knowledge!

  15. wildflwr
    Member

    Oh, and could one remove the underline at the links?

  16. designsimply
    Staff

    There are some similarities between Twenty Ten and Coraline, but I would treat them as separate when designing. You can compare the CSS using the original stylesheet links from the Appearance → Custom Design → CSS page when the theme is enabled.

    https://s-ssl.wordpress.com/wp-content/themes/pub/coraline/style.css?m=1327698543g&minify=false

    https://s-ssl.wordpress.com/wp-content/themes/pub/twentyten/style.css?m=1327698031g&minify=false

  17. designsimply
    Staff

    I think I am finally starting to understand a bit more about how CSS works thanks to your help and links, Designsimply! Now all I need is a few days to dig into the links and code help you gave me and I should be good to go!

    Cool! Do check out some tutorials like these too:
    http://www.htmldog.com/guides/cssbeginner/
    http://en.support.wordpress.com/css-basics/

  18. designsimply
    Staff

    Oh, and could one remove the underline at the links?

    The text-decoration property can control that. For example, to turn off underlining for all links, you would add this:

    a {
  text-decoration: none;
}

  19. wildflwr
    Member

    Thanks a million!

  20. designsimply
    Staff

    Cheers :)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags