Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Twenty Eleven: More Tag, Hyperlinks Color, Blockquotes, Blog Stats

  1. sensuousinkspiller
    Member

    I have the CSS and Font upgrades. I am CSS illiterate, though I'm learning. And I'm a great searcher, so found most of my changes that way. Now, I'm stumped.

    This is what I have for my code, which changes all the font colors, sizes, etc. I love it, except for it sometimes overriding everything else!

    #access {
	background:#0f224d!important;
}
#access li:hover > a,#access a:focus {
	color:#0f224d;
}
.page .entry-title {
	color:#16316e;
}
body,input,textarea .entry-title,.entry-title a,.singular .entry-title {
	color:#16316e;
}
a,.entry-title a:hover,.entry-title a:focus,.entry-title a:active {
	color:#16316e;
}
#site-description {
	color:#1d408f;
	font-size:18px;
	margin:0 270px 3.65625em 0;
}
body,input,textarea {
	color:#10234e;
}
#reply-title {
	color:#16316e!important;
}

    Issues:

    1. Links in posts:
    Since all text is the same color, the links in posts aren't easily visible, and theme options is overridden. I've been manually entering this in HTML: <span style="color: #244fb0; text-decoration: underline;"> and it works but would like to have it be part of CSS. How do I do that?

    2. More Tag:
    I'm less than pithy, so the More Tag is wonderful! I've figured out how to change the text, but I want to change the color so it stands out more, and it doesn't let me in HTML/Visual. Is there a way to do it through CSS?

    3. Blockquotes:
    When I look at the Twenty Eleven theme description page it says, "Be sure to style the citation" but it doesn't show how to. I can do it manually, but ideally want to do it through CSS. I found this post and was able to change the font size and color for the blockquote, 

    .format-quote blockquote {<br />
	color:#1d408f!important;<br />
	font-size:20px;<br />
}

    but the coding for cite isn't working, not with my changes or as posted:

    .format-quote cite {<br />
	display: block;<br />
	text-align: right;<br />
	margin: 1em 0 0;<br />
	color: #999;<br />
	font-size: 12px;<br />
	letter-spacing: 0.3em;<br />
	word-spacing: 0.2em;<br />
	line-height: 2.6em;<br />
	text-transform: uppercase;<br />
	font-style: normal;<br />
}

    I've added !important and I don't know if I'm not accurately indicating the citation in a quote, or I've messed up something else. I don't have any quotes on the blog, yet, until I figure this out. What I care about for cite are: text-align:right
    and font-size (smaller than quote)
    and font-style (non-italicized).
    How do I do that through CSS?

    4. Side Widget stats
    Finally, the color coding shown at the top gets all the info in the side widgets the correct color, except for Blog Stats, that has stayed a soft grey. How would I change that color?

    Thank you in advance for help with this, and for all the help I've gotten through searching!

    The blog I need help with is sensuousinkspiller.com.

  2. jtanna01
    Member

    1. Links in posts:
    Since all text is the same color, the links in posts aren't easily visible, and theme options is overridden. I've been manually entering this in HTML: <span style="color: #244fb0; text-decoration: underline;"> and it works but would like to have it be part of CSS. How do I do that?</span>

    a {<br /> text-decoration: underline;<br /> color: #244fb0;<br /> }<br />

    2. More Tag:
    I'm less than pithy, so the More Tag is wonderful! I've figured out how to change the text, but I want to change the color so it stands out more, and it doesn't let me in HTML/Visual. Is there a way to do it through CSS?

    This is quite vague but if you want the body color to be different then this code will work:

    body {<br /> color: red; /* Change to any color you like using hex codes to get exact */<br /> }

    Hope this get you started. Your post is very big and I can't read everything on my screen without scrolling up/down all the time. You need to post your message in small chunks to get good answers here.

    Good luck.

  3. sensuousinkspiller
    Member

    Thanks, jtanna!

    I've already changed all the body text color, which is why it is overriding the links color. I included the code in case it is some easy change in there.

    I want to change the color from what I have throughout my blog, ONLY on the "More" tag and blog post hyperlinks and Blog Stats side widget.

    Again, thank you!

  4. sensuousinkspiller
    Member

    I'm learning this, and figured it out! I'm so excited!

  5. designsimply
    Staff

    2. More Tag:
    I'm less than pithy, so the More Tag is wonderful! I've figured out how to change the text, but I want to change the color so it stands out more, and it doesn't let me in HTML/Visual. Is there a way to do it through CSS?

    More tag text has it's own selector, so you can change the link color for just more tag links separate from all the other links if you'd like. For example, here's how to change more tag links to a bright blue color:

    .more-link {
	color: #156DD0;
}

  6. designsimply
    Staff

    I found this post and was able to change the font size and color for the blockquote,

    The CSS in that example is specific to the the "Quote" post format in the Twenty Eleven theme, see http://en.support.wordpress.com/posts/post-formats/ to learn about post formats.

    If you still need help with styling blockquotes, please post back with a link to where we can see one on your blog so we can take a closer look.

  7. designsimply
    Staff

    4. Side Widget stats
    Finally, the color coding shown at the top gets all the info in the side widgets the correct color, except for Blog Stats, that has stayed a soft grey. How would I change that color?

    The reason the list item in the blog stats widget is gray and doesn't match the other list item colors is that the other ones are all links and the stats aren't linked. To force the blog stats color and font weight to match links in the sidebar, add this to your Appearance → Custom Design → CSS page:

    #blog-stats ul li {
	color: #1D408F;
	font-weight: bold;
}

  8. sensuousinkspiller
    Member

    designsimply - thank you so very much, I really appreciate the more and stats code.

    I did realize I was changing the ephemera "Quote" rather than the "blockquote" - thank you for confirming that.

    I've got some of the blockquote figured out

    blockquote {<br /> margin:1em 3em;<br /> padding:.5em;<br /> background-color:#eaeffb!important;<br /> font-size:120%;<br /> border:1px solid #c9d6f5;<br /> }

    The top in this page: http://sensuousinkspiller.com/write-to-me/blockquote-testing/ (password is: testing) I can't figure out how to get the attribution as shown in the second part. Is that possible?

    Again, thank you so very much!!

  9. designsimply
    Staff

    Nice work on the "blockquote" code so far!

    In the http://sensuousinkspiller.com/write-to-me/blockquote-testing/ page, I see you used an inline style to adjust how the attribution line looks. If you wanted to use CSS to target a line like that instead, you would still need to add some bit of HTML inside the blockquote to differentiate the author name somehow.

    For example, if you added a blockquote like this:

    <blockquote>
<p>"This is a quote."</p>
<p><em>Author Unknown</em></p>
</blockquote>

    Then you could add a CSS rule like this to style the author name:

    blockquote em {
	display: block;
	text-align: right;
	font-style: normal;
	font-size: 80%;
}

    Or if you wanted to post the author name outside the blockquote, then you could do something like this:

    <blockquote>
<p>"This is a quote."</p>
</blockquote>
<p class="quote-attribution">Author Unknown</p>

    Note that you can set whatever class name you'd like in your HTML, such as "quote-attribution" or "my-quote-style" or "whatever", but you have to make sure the same class name is also used in your CSS when you add it, like this:

    .quote-attribution {
	display: block;
	text-align: right;
	font-size: 80%;
}

    The quote in the previous example you linked is a post format and has different HTML, which is not the same as a blockquote that you add directly inside a post or page and that's why the ".format-quote cite" selector you were trying to use wasn't working.

  10. sensuousinkspiller
    Member

    YAYAY! Thank you, designsimply! I not only copy and pasted, but played with it a bit... this stuff is starting to make sense to me, which is a little scary! :)

    Thank you!!

  11. sensuousinkspiller
    Member

    Sorry - meant to include a real post. http://sensuousinkspiller.com/2012/04/25/happy-birthday-ella/

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags