Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Fjords04 customization

  1. musicuratum
    Member

    After some experimenting with the CSS preview function (thanks to a few helpful tips here) I saw that I could change the width of the columns in the Fjords04 theme, and so I purchased the CSS upgrade. (I've been putting my blog in order since then.)

    I have a few questions -- if people here have some other tips, I'd be grateful to hear them.

    My blog is at: http://www.musicuratum.com (I registered the domain as well), and the browser I'm using for WP is Google Chrome.

    1. Posts at their own addresses (permalinked) do not display in the format I've defined for posts in general, and nor do pages. Is there some command (either a "#" or a ".") that relates solely to these items?

    (For instance: http://www.musicuratum.com/2012/07/20/nick-pitera/, http://musicuratum.com/about-musicuratum/.)

    2. Generally I have the comment function turned off on my blog, and so the text (with its symbol) "comments off" underneath each post is something I'd like to remove. How might I use the "display:none" command to accomplish that globally, in all the cases where I've turned it off (or is there some other way)?

    3. Customizing the category and tag clouds -- using the "#tag_cloud" I thought I could do so, and it did work -- for the category cloud! When I attempted the inverse and used a "#category_cloud," there was no change. What is the simplest way to deal with these two widgets?

    4. Text in the sidebars, both in text widgets and in special menus I've created and then placed there with the custom menu widget: how does one change the font, color, etc.?

    5. Concerning the site title and the tagline (located top left in the site's header), I thought "#site-title" and "#site-description" were the commands to use, but they don't work. How do I customize these items?

    6. How does one customize the entry boxes for the search function, e-mail address entry for subscriptions, and the like, and their related buttons?

    Well, this is enough for the moment.

    Cheers!

    Musicuratum

    The blog I need help with is musicuratum.com.

  2. musicuratum
    Member

    Since posting that I've found the answers to several of those questions, by trial and error and with some of the tips I've gleaned in these fora. But there are a number of points that still are proving elusive, and any help on them would be appreciated.

    My blog is at: http://www.musicuratum.com (I registered the domain as well), and the browser I'm using for WP is Google Chrome.

    1. The entry field for the "search this blog" function (for posts) and the button beneath it are configured as I want them to be -- however, when I click the cursor in the entry field to type some search term there, a one-pixel border in some sort of gold color appears. How do I avoid this?

    2. Precisely the same configuration of the entry field and the button beneath -- the same width for both and the distance between them -- is what I would like for the "follow this blog" widget as it appears to those who aren't logged in to WP. What is the best way to accomplish this?

    3. How do I turn off the display of the text "comments off" beneath the posts, and change the type, color, etc. of the phrase "bloggers like this"? Also, is there some way to have the "share" and "like" icons there be displayed without the rounded corners?

    4. What is the simplest way to modify the style of the site title and the tagline?

    5. How do I modify the style and placement of the phrase "Archive for ..." that appears at the top of the content field above the posts in the archive mode?

    6. Is there some way to display the Facebook social plugin without a one-pixel border around it?

  3. thesacredpath
    Member

    I'm about the only one around that does CSS at the moment, and I'm heading out to do some work in the yard, so it might be several hours before I can look into these for you.

  4. designsimply
    Staff

    1. Posts at their own addresses (permalinked) do not display in the format I've defined for posts in general, and nor do pages. Is there some command (either a "#" or a ".") that relates solely to these items?

    (For instance: http://www.musicuratum.com/2012/07/20/nick-pitera/, http://musicuratum.com/about-musicuratum/.)

    Each WordPress.com page has a set of classes on the body tag that can be used to style different pages based on their type. For example, in the Fjords theme, post have a class of "single" and pages have a class of "page."

  5. designsimply
    Staff

    2. Generally I have the comment function turned off on my blog, and so the text (with its symbol) "comments off" underneath each post is something I'd like to remove. How might I use the "display:none" command to accomplish that globally, in all the cases where I've turned it off (or is there some other way)?

    It appears you already figured this one out because I don't see "comments off" on your posts.

  6. designsimply
    Staff

    3. Customizing the category and tag clouds -- using the "#tag_cloud" I thought I could do so, and it did work -- for the category cloud! When I attempted the inverse and used a "#category_cloud," there was no change. What is the simplest way to deal with these two widgets?

    Use ".sidebar .widget_tag_cloud" as a starting point for this because that's what Fjord's original CSS does. It often works best if you match the selectors used in the original stylesheet to make updates.

  7. designsimply
    Staff

    4. Text in the sidebars, both in text widgets and in special menus I've created and then placed there with the custom menu widget: how does one change the font, color, etc.?

    It appears you've manually added some styles into the HTML for the text widgets. That is one way. If you've started out that way, the best thing to do is to either keep editing it from there for each individual text widget or remove the styling from the text widget HTML all together and use the Appearance → Custom Design → CSS page to add styling instead. This is because, generally, CSS that is inline (what you've done for your text widgets) should override other CSS, and if you start adding on CSS to try to modify that with the CSS editor, it can get really messy really fast.

    Now, what CSS to use will depend on exactly what to change. Just for illustration purposes, this will change the font color for all text widgets to yellow, for example: 

    .textwidget {
	color: yellow;
}

    For font type and size, I would recommending trying the options on the Appearance → Custom Design → Fonts first. It will work best if you don't have any other styles applied inline or in the CSS Editor first. Past that, we should look at a separate example in a separate help request.

  8. designsimply
    Staff

    5. Concerning the site title and the tagline (located top left in the site's header), I thought "#site-title" and "#site-description" were the commands to use, but they don't work. How do I customize these items?

    In the Fjords theme, the naming is a little… different. :) It was designed a long time ago actually! Here are the styles needed to edit the site title and tagline:

    #hode h4 a {
	/* put your site title styles here */
}

#hode span {
	/* put your tagline styles here */
}

  9. designsimply
    Staff

    6. How does one customize the entry boxes for the search function, e-mail address entry for subscriptions, and the like, and their related buttons?

    To style the search input field:

    .widget_search input[type="text"] {
	/* put your input styles here */
}

    To style the search submit button:

    .widget_search input[type="submit"] {
	/* put your submit button styles here */
}

  10. designsimply
    Staff

    1. The entry field for the "search this blog" function (for posts) and the button beneath it are configured as I want them to be -- however, when I click the cursor in the entry field to type some search term there, a one-pixel border in some sort of gold color appears. How do I avoid this?

    I'm sorry, I don't see that. Can you please start a new thread for this if you still need help? Please include a link to where we can see the problem happening and a description for where to find the form you're referring to. It could be you've simply already found a solution, in which case no further action is necessary.

  11. designsimply
    Staff

    2. Precisely the same configuration of the entry field and the button beneath -- the same width for both and the distance between them -- is what I would like for the "follow this blog" widget as it appears to those who aren't logged in to WP. What is the best way to accomplish this?

    Looks like you've already figured this one out. Here are the selectors for the Follow Blog widget in case you still need them:

    #subscribe-blog input[type="text"] {
	/* put follow blog input styles here */
}

#subscribe-blog input[type="submit"] {
	/* put follow blog submit button styles here */
}

  12. designsimply
    Staff

    3. How do I turn off the display of the text "comments off" beneath the posts, and change the type, color, etc. of the phrase "bloggers like this"?

    I actually don't see "comments off" anywhere. Please start a new post with a link to where they're showing if you still need help with the "comments off" text.

    Also, is there some way to have the "share" and "like" icons there be displayed without the rounded corners?

    The little sharing button graphics themselves have rounded corners built into the images. Example: http://s0.wp.com/wp-content/mu-plugins/post-flair/sharing/images/pinterest.png

    You could swap out the images using CSS if you'd like.

    To remove the rounded corners from the boxes *surrounding* each sharing button, use the following. It affects the like button as well.

    div.sharedaddy a.sd-button {
	border-radius: 0;
}

  13. designsimply
    Staff

    4. What is the simplest way to modify the style of the site title and the tagline?

    Got that one covered here:
    http://en.forums.wordpress.com/topic/fjords04-customization?replies=12#post-992810

    You shouldn't need to ask twice. :)

  14. designsimply
    Staff

    5. How do I modify the style and placement of the phrase "Archive for ..." that appears at the top of the content field above the posts in the archive mode? 

    .archive #content-inner > h2 {
	/* replace this comment with your styles */
}

    So if you wanted to hide it, for example, do this:

    .archive #content-inner > h2 {
	display: none;
}

  15. designsimply
    Staff

    6. Is there some way to display the Facebook social plugin without a one-pixel border around it?

    Because of the way it's embedded as an iframe from a separate domain, there is not a way to style the Facebook like box using a Custom Design upgrade.

  16. designsimply
    Staff

    Whew!

    In the future, if you create a separate help request for each issue or group very similar questions together, it will make it much easier to provide support. :)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags