Need help? Check out our Support site, then

Ocean Mist CSS Customization

  1. Ok, I've run into a little thing I want to take care of, but don't know if it's possible through just CSS. On the Ocean Mist theme, the Categories are displayed not only at the bottom of each post (which I like) but the bottom of the blog itself. Now I would rather display that as a widget on the sidebar, but I can't for the life of me figure out how to get it to "vanish" from the bottom of the blog itself.

    Any ideas? Any and all help is definitely greatly appreciated.

  2. No one can help you until you post the url for your blog please.

  3. Oh my apologies, I just had figured that someone might be familiar with the Ocean Mist theme. The blog is hosted here, and is at:

    I've had some wonderful help so far, and everything seems to be going well with the theme other than this, and of course this isn't something terribly "wrong", I'm just hoping to customize it limitedly to remove the categorical links from each blog post. Of course, I don't have access to the source files seeing as it's a hosted blog on wordpress, but since I have access now to edit the CSS file, I really hope it's possible to remove those categories.

    Actually Timethief, I clicked on your name and noticed you're using the Ocean Mist theme. I must admit, it's a very catching theme, I really like how its layout design is organized.

  4. i think you should be able to do it with

    .catlist {
  5. nope, that won't work. I'll have to leave this to the CSS gurus, sorry :-(

  6. .post{display:none}

  7. @atthe404:

    won't that get rid of the post meta data? I think the OP wants to get rid of the extra category list at the bottom of the page.

  8. Should n't do - if I read it right

  9. Yeah, .post{display:none} get's rid of the entire post meta data. I don't actually want to remove the post data, just the categories at the bottom of each post. Check out my link above and see what I mean. With the theme I'm using, it's displaying category information for each post within the post itself, that's the stuff I'm trying to omit (if that's even possible of course).

  10. .postinfo {display: none}

  11. Hmm... didn't seem to do anything. In the original CSS though, this is where .catlist is at:

    .catlist {float: left; list-style: none; margin: 0 0 18px 0;}
    *:first-child+html .catlist {border-bottom: 18px solid #fff;}
    .catlist li {float: left; margin: 0 18px 0 0; border-bottom: 1px solid #CAD6E1;}
    * html .onecol li {margin: 0;}
    .catlist ul {display: none;}
    .catlist li:first-child, .catlist li:first-child+li, .catlist li:first-child+li+li {border-top: 1px solid #CAD6E1;}
    .onecol li:first-child+li, .onecol li:first-child+li+li {border-top: none;}
    *:first-child+html .onecol {border-bottom: 0;}
    .catlist a, .catlist a:visited {display: block; width: 145px; padding: 1px 6px 2px 6px; margin: 1px 0;}
    .catlist a:hover {background: #F2F2F2;}
  12. Well one minute you are trying to omit at the bottom of the blog then its in the post.
    But I think now its ul, p {dispay:none}

  13. Hmm... it didn't seem to do anything again. Very odd.

  14. Did you copy and paste? There is a typo: Should be: ul, p {display:none} [ *l* in *display* added]

    If that does not work the CSS edits are not taking effect correctly. Sorry.

  15. Oh I'm thankful for the help though. It honestly may not be possible. I did try it though: ul, p {

    and it still just removes the entire post data. I'll keep at it though, but I'm definitely grateful for all the help.

  16. So I tried this from early in this post:

    .catlist {

    It does remove the categories, but the word "categories" and the categories section at the bottom of the blog still remain. I have the categories on the sidebar, so they're not really needed anywhere else.

  17. I know. It is really annoying that the header remains. That is what I have been struggling with.

  18. Found it:
    div.title h2 {display:none}

    Fingers crossed :)

  19. That actually gets rid of the main header title for the post, but doesn't have any affect on the categories at the bottom. Hmm, I'm still toying with it too, to see what I can come up with.

  20. We did the cats already

  21. not really. What i'm trying to get rid of is the Category header. Like I posted before:

    So I tried this from early in this post:
    .catlist {
    It does remove the categories, but the word "categories" and the categories section at the bottom of the blog still remain. I have the categories on the sidebar, so they're not really needed anywhere else.

    I still want the main post info, I'm still just working on the categories. And the .catlist { display:none; } code is the only thing that rids the post of the actual categories themselves. However, the heading of the "categories" section at the base of every post still remains. Just check it out over on my blog, you might be able to see what I mean.

    As for the actual posts themselves, I'm entirely content with the situation of the header for each post, poster info, date, and post data itself. I just want to get rid of that pesky category information at the base of each post. And I've managed to rid the posts of the actual categories themselves, just not (or seemingly not) the "section" that it resides in or at the bottom of the blog as a whole. In other words, the only place, at all, categories should be listed (if it works) is on the sidebar via a widget. Not on the bottom of each post, or at the bottom of the blog.

  22. try:

    .postinfo p{
    display: none;
  23. Marvelous! That worked for taking the categories section out of the blog posts them self. Thank you so much for the help, that's exactly what I needed. Now just to figure out how to do the exact same thing for the end of the blog itself, and I'm set!

  24. You're welcome. I think that last part is going to give you some trouble (unless something that has already been suggested above will do it). When i look at the source for that section, i see:

    <div class="title">

    Which is the same as the title for the comments box:

    <div class="title">
    		  <h2>Leave a response</h2>

    I don't know how to make sure the two are differentiated.

    On a side note, i cannot click any of the post titles on your main page. I have to go to the category list in the sidebar then click one there. Check you haven't done something with the a property on the main page.

  25. Well I found out that this here is what's messing with the clickable titles. It's very odd...

    .title small {

    I can actually find the clickable region above the title itself (as if it were only one or so pixels wide).

  26. Oh, and the:

    .postinfo p {

    CSS code also get's rid of the "leave a comment" line at the bottom of each post. Which is also strange.

  27. Aside:
    (1)When I click this title "Students Publish Research Journal"
    I get this link
    You need to edit the post slug.
    When you do correct it then the link will read like this

    (2) When I click this title "Gilbert Presents Paper at Communications Conference" I get this link
    Once again you need to edit the post slug and when you do it should read

  28. Aaah, good catch. I'll go edit the post slugs right away.

  29. I'm glad I could help. :)

  30. I'm still having some problems with this new issue of my posts not being clickable. For some reason I can't seem to get the post title to be clickable so that someone can leave comments. Check the blog out to see what it's doing, it seems to be condensing the "click area" to only a few pixels wide. The area can still be hover activated directly above the link, but it's not expanded across the entire title of the blog posts.

    Very odd indeed...

Topic Closed

This topic has been closed to new replies.

About this Topic