Need help? Check out our Support site, then


How to customize (with CSS) some features of The Columnist?

  1. I have the CSS upgrade (and just purchased the Pro Bundle) and just switched themes to The Columnist; I've configured a lot of it, but a few things still elude me. I've inquired about them in the forums but have heard nothing back, and I don't have a great deal of time.

    1. On pages with either single posts or pages, approximately the left half of the text block is obscured by a black field; I simply can't figure out which element it is, in order then to change its coding.

    2. Is there a simple CSS code to change the number of words in the thumbnail excerpts on e.g. the main page? I should like to have say five lines of text before the "continue reading" notice (which, incidentally, I should also like to edit, and also to place a "[...]" right after the excerpt).

    3. How do I reduce the height of the boxes containing the thumbnail images and the text, so that the three horizontal rows have less space between them?

    4. Is there a way using the CSS editor to set a number of posts per page for the monthly archive pages that's different than the one set via the dashboard?

    5. On the single post pages, I should like to remove the line of text "posted by ... " and I'm not sure how to do so.

    6. It's under the date on those pages that I'd like to post the information about the post's categories and tags.

    7. How do I suppress the navigational elements in the footer on pages with the thumbnail images and text while preserving them on single post pages?

    As you can see, I have a lot of questions ...

    One thing I've noticed that's quirky: when loading the page or refreshing it, for some part of a second the bits of text are displayed first in purple, then in blue, before appearing in the black in which I've coded them. Is this a feature of the CSS coding for the theme, or just my computer (a Macbook Pro with retina display)?

    Best regards!

  2. 1. Your mistake is here:

    .single .entry-content {
        color: #FFFFFF;
        float: left;
        font-family: "droid-sans",sans-serif;
        font-size: 14pt;
        margin-left: -200px;
        margin-top: 400px;
        width: 800px;
    }

    You should remove the negative left margin. You'll also need to either set .page #content, .single #content, .error404 #content to float left instead of right, or increase its width as well as the width of .single .entry-content.

    But before you do the latter, you should reconsider a couple of things.
    First, do you realize that the total width you've set won't fit in most users' screens? There's a reason why the default is four columns of posts only.
    Second, check what's happening in the left column on category or other archive pages, for example:
    http://musicuratum.com/category/youtube/
    http://musicuratum.com/2013/

    2-3. Auto excerpts display a fixed number of words (so the number of lines will vary, depending on the length of the words), and you can't change this (it's PHP, not CSS). If you want to limit the number of lines, the only thing you can do is edit each and every post and create your own custom excerpt in the Excerpt module of the post editor. (If you decide to do this, then and only then you can decrease the height of the boxes.)

    4. What numbers exactly? (But before you answer, think again about the number of posts per row.)

    5. To remove the author byline, add this:

    .single .byline, .group-blog .byline {
        display: none;
    }

    6. I don't think it can be done satisfactorily: you'd need absolute positioning, but this cannot take into account the varying height of the post titles.

    7. If you mean the older/newer nav links, why suppress them? How will a visitor see the rest of the posts on such a page?

  3. Thank you very much for the technical tips -- I'm very grateful for them.

    And the reminder about the horizontal length of the page was salutary (I tended to assume, wrongly, that a horizontal scroll bar would appear on other set-ups than my own, but when I checked the site on a different system I realized my mistake), and I've rearranged the layout in a way that should make it accessible to all standard PCs. (Mobile devices with their small screens are another matter entirely, but you can't please everyone.)

    Some problems remain and I'll have another go at them shortly; but I do have a few questions for you.

    Covering the left side of the body text on the single post (and page) pages there's still a thin vertical strip of black -- I probably am overlooking something in the CSS coding, but possibly it's the result of something else. What could it be?

    Concerning the "excerpt" function for posts, I may chose to utilize it for all the posts in the manner you describe; but if I do so, once I've "excerpted" them all, so that say five lines of text appear under the thumbnail images on e.g. the front page, the frame-boxes will automatically become less tall by a corresponding amount -- is that correct? And if I excerpt some to five lines and others to seven (for instance), would the boxes be shortened universally to fit the latter?

    I did excerpt one already, as a test, and the "continue reading" text no longer appears when hovering over the text. How do I reinstate it -- and how do I substitute a different phrase for it, e.g., "read more," along with a "[...]" at the end of the excerpt?

    Also, on the single-page view of the post which I excerpted, under the header-title the excerpt appears. How do I suppress it?

    I'm still not sure about the length of the text field I'll choose for single posts and the like, but I will keep information such as a post's categories and tags on the right-hand side -- but I can't find the handle or handles of those elements, in order to position them there. How are these elements identified in the CSS code?

    On the front page I've set the maximum number of posts to 21 (7x3), but for the monthly archive pages I'd like to set the number at 42. Is there a simple way of doing this?

    I was thinking of suppressing the older and newer navigation links on the front page (but keeping them on the single post pages), because I've set up links to the various pages (e.g., http://musicuratum.com/page/2/) in the navigation menu at the top. But perhaps I should keep both systems.

    About those two navigation links at the bottom; I've tried to position them flush with the respective edges of the text field above them, but to no avail. How can I do this?

    With regard to the navigation menu, the drop-down menus no longer stay active long enough so that I could click on the links I've included in them (the change took place last night). Is there some special code to remedy this?

    I'm still seeing the rather strange sequence of blue and purple text when I load or refresh the page. Have you any idea what might be causing it, and how it might be avoided?

    Lastly (I must be trying your patience) a few fine points.

    Is there a simple CSS code for inserting a bit of vertical space after embedded objects such as Youtube videos, Soundcloud and Bandcamp audio players, etc.?

    And for the text in post and page headlines, is there a CSS code for controlling line breaks so that widows could be avoided? And also (this is really the fine print, so to speak) in one or two cases I've included non-latin characters in headlines, and they display much larger than the latin characters around them: is there some CSS code to reduce their size by a certain amount?

    Once again, thank you!

  4. Two addenda to the above.

    I think I'd like to place a search function just under the main navigation menus on the right hand side (on pages where these elements appear): what is the CSS handle for it?

    Concerning Youtube and Vimeo players, is there a simple CSS code to establish their size? (In the shortcode I use for the former, I don't specify the size, and they are displayed in the standard size for the theme. As for the latter, if possible I'd like to avoid having to specify a size in the short code.)

  5. Whoa - too many questions! I'll answer some of them only.

    Covering the left side of the body text on the single post (and page) pages there's still a thin vertical strip of black

    From the replies thesacredpath and I gave you, you should have learned that this is the result of a negative left margin. You've got that under .entry-content. You need to add this rule to .single .entry-content:
    margin-left: 0;

    Concerning the "excerpt" function for posts, I may chose to utilize it for all the posts in the manner you describe; but if I do so, once I've "excerpted" them all, so that say five lines of text appear under the thumbnail images on e.g. the front page, the frame-boxes will automatically become less tall by a corresponding amount -- is that correct?

    No. The frames have a fixed height no matter what the number of lines. If you go custom excerpt, you can adjust the height yourself, this way:

    .home article, .archive article, .search article {
        height: 333px !important;
    }

    (333 is just an example, of course.)

    I did excerpt one already, as a test, and the "continue reading" text no longer appears when hovering over the text. How do I reinstate it -- and how do I substitute a different phrase for it, e.g., "read more," along with a "[...]" at the end of the excerpt?

    This way:

    .entry-summary:after {
         content: "Read more →"
         color: #333333;
        font-weight: bold;
    }
    .entry-summary p:after {
         content: " […]"
    }
    
    <blockquote>On the front page I've set the maximum number of posts to 21 (7x3), but for the monthly archive pages I'd like to set the number at 42. Is there a simple way of doing this?</blockquote>
    I'd say this is an outrageous number (it might mean slow loading for visitors that don't have a fast connection, and I think too much scrolling down isn't very user friendly), but anyway to do this you set 42 in Settings > Reading then limit the number of posts on the front page this way:
    .home article:nth-child(n+22) {
    display: none;
    }`

  6. Oops...

    I did excerpt one already, as a test, and the "continue reading" text no longer appears when hovering over the text. How do I reinstate it -- and how do I substitute a different phrase for it, e.g., "read more," along with a "[...]" at the end of the excerpt?

    This way:

    .entry-summary:after {
         content: "Read more →"
         color: #333333;
        font-weight: bold;
    }
    .entry-summary p:after {
         content: " […]"
    }

    On the front page I've set the maximum number of posts to 21 (7x3), but for the monthly archive pages I'd like to set the number at 42. Is there a simple way of doing this?

    I'd say this is an outrageous number (it might mean slow loading for visitors that don't have a fast connection, and I think too much scrolling down isn't very user friendly), but anyway to do this you set 42 in Settings > Reading then limit the number of posts on the front page this way:

    .home article:nth-child(n+22) {
        display: none;
    }
  7. As for the rest of your questions, a couple of suggestions:
    a) Before you post any other questions, install and learn to use the Firebug add-on in Firefox: helps you examine your pages to identify elements, selectors and such as well as try out changes.
    b) Post separate threads for separate questions, so that the few of us who help with CSS editing can tackle the questions one at a time, and so that other users who look for the same answers can find these answers more easily.

  8. About the negative value for the left margin, I thought I had got them all, but one escaped me (until just now). I've got that problem resolved, fortunately.

    Thank you for the help with the excerpting function, I've implemented those changes.

    And for the assistance with the number of posts for monthly archive views -- the number of rows is not much more, and there's some scrolling involved in any case (especially until I reduce the height of the boxes, if I do so), so that way the reader would be spared some navigating. (For archives pertaining to some of the category tags, there's still navigating involved, which is fine. I'm not enthused with the infinite scrolling feature, to put it mildly; we probably agree on that.)

    About Firebug: believe me, I've tried -- even installed Firefox just for it. But (thus far at least) I simply cannot understand how it works, nor how it might be of help to me.

    Shall I re-submit the previous post broken up into separate points?

  9. I just figured out how to add some horizontal space after the embedded objects -- scratch that one off the list.

  10. You're welcome.

    I'm not enthused with the infinite scrolling feature, to put it mildly; we probably agree on that.

    Oh yes, like hell we do!

  11. I'm sorry, does that mean you agree, or disagree with me on this point?

    Speaking just for myself, I found it to be very cumbersome and it was one of the main reasons for switching themes.

    So, shall I submit my questions again, each in a separate post? (I've resolved some of them in the meantime, but not all.)

  12. Yes, I meant we agree. A lot.

    Yes, post separately please.

    And a second thought re my last coding suggestion: this was a bad idea, because hiding some posts the way I showed means they won't show on the front page but they won't show when you move to page 2 either. So you should forget this suggestion, except if you hide the older posts nav link as well as discard the page by page navigation dropdown you have created.

    By the way, if you're going to keep posting, your two navigation sub-submenus (pages and months) will become too long. In my opinion you should turn them into two lists on a static page, or turn the months into a dropdown to a years dropdown, or maybe make the font-size a lot smaller.

    And I'm answering another one of your questions, as I had to correct your elusive submenus to check them without uttering four-letter words... Add this rule to .main-navigation li:
    padding-bottom: 15px;
    and this rule to .main-navigation ul ul li:
    padding-bottom: 0;

  13. It's one of the strangest features, isn't it?

    Thanks for the help with the menus, that worked perfectly. As for the length that they would reach after some time, I've thought of that and have a way around it -- but perhaps I'll scrap the system in favor of some other additional way to navigate around the site.

    I'll post my queries separately.

  14. I also noticed the problem with the page sequence when that code was applied -- and simply reinstated the 21 posts per page, for the moment at least.

    You don't like to scroll, but I was wondering whether there's some CSS code for producing a horizontal scroll bar at the bottom of the screen -- just by way of experimenting with the length of the rows of thumbnails. Do you know of some way to do this in the CSS?

  15. 1) To me, the best navigation system is page numbers plus previous/next and first/last links. You can read part of my opinion on I.S. here:
    http://wpbtips.wordpress.com/2012/06/05/disabling-infinite-scrolling/#comment-51851
    The other part of my opinion is that I.S. artificially inflates page views (each time you reach the bottom and a new batch of posts shows up, this counts as a new page view, even if you don't read a single line of those posts): this is probably the main reason why WP added the feature, the reason why they refused to make it optional, and the reason why they avoid answering when users ask how you can disable it;* and their attitude is the main reason why I hate the thing.

    *In case you're not aware of this, you can use CSS editing to disable I.S. and restore the older/newer nav system on any theme.

    2) Yes, I can create a horizontal scrollbar via CSS, and so can thesacredpath, who is a lot more experienced than I am, and I think he will agree with me when I say forget it: displaying a grid of posts and obliging (at least some of) your visitors to scroll vertically as well as horizontally to view all the posts is bad as bad can be.

  16. I do have to think more about using the menus as an additional navigational system.

    Is there an easy was via the CSS to implement a link (like the "older posts" plus the arrow) to the earliest page of posts?

    I'd still like to know why the CSS I have is somehow preventing a horizontal scroll bar -- the lack thereof is not a feature of the theme, is it?

    More importantly, if you know how the excerpt which appears under the header on the single post pages when some text is manually excerpted by using the module in the post editor may be prevented from appearing, I'd be grateful to hear how it's done.

  17. Is there an easy was via the CSS to implement a link (like the "older posts" plus the arrow) to the earliest page of posts?

    As far as I know it can't be done. But maybe thesacredpath, or designsimply (the WP staff member responsible for answering CSS questions) know better.

    I'd still like to know why the CSS I have is somehow preventing a horizontal scroll bar -- the lack thereof is not a feature of the theme, is it?

    It is - check the theme demo:
    http://thecolumnistdemo.wordpress.com/
    Drag the browser window to make it narrower than the theme and see that no scrollbar shows up.

    More importantly, if you know how the excerpt which appears under the header on the single post pages when some text is manually excerpted by using the module in the post editor may be prevented from appearing, I'd be grateful to hear how it's done.

    Where are you seeing this?

  18. Yes, I watched the demo and read about the theme before adopting (and adapting) it, but yesterday Sacred Path said, " There is something messed up in your CSS that keeps a horizontal scroll bar from appearing," which of course suggests that the problem was specific to my individual CSS sheet, not to the theme. And you said that you knew how to create one via the CSS, so, for the benefit of the 14.6% with 1024 pixel-wide monitors, for whom my customization may be just a bit too wide (I don't have access to such a monitor, so I can't assess this), I should like to if possible to do so. If it is possible and you can help, I'd appreciate it.

    About the excerpted text appearing on the single page: after seeing this, I removed the excerpted text in the post editor -- but I've reinstated it, for illustration: it's on this page: http://musicuratum.com/2013/04/14/a-second-status-report/.

  19. To remove custom excerpts on the single post view, add this:

    .single-title p {
    display: none;
    }

    To make a horizontal scrollbar show up when needed, find this:

    #page {
        overflow: hidden;
        position: relative;
        width: 100%;
    }

    and change the width value to 1200px

    Commentary:
    a) TSP apparently didn't check the demo, so naturally he found it more likely that this was a side effect of some change you made rather than a feature of the theme.
    b) "I don't have access to such a monitor, so I can't assess this". Of course you can: you go to System Preferences > Displays and change the resolution.
    c) You misunderstood the stats TSP gave you. Notice that his percentages add up to less than 50: he didn't show you total stats, he only showed you the top three resolutions, to give you an idea. So, I pointed this out from the start, TSP pointed it out too on the other thread, and I'm pointing it out once more: your customization is wrong, because it's not "a bit too wide" for the "14.6% with 1024 pixel-wide monitors", it's too wide for the forty percent with 1024 or narrower.

  20. Thanks for those two codes, I've implemented them.

    (I've given Firebug another try in the meantime and I had a glimmer of comprehension, but I'm far from understanding it. In particular, I don't see any way to select a particular item on the screen to find what its code or selector (or whatever it's termed) is.)

    Concerning the width of my format, I've scaled it back for the single-post (and page) pages, so that it should fit the 1024 pixel width. As for all "feed-wrap" pages with the seven columns, by my reckoning it exceeds that width by something like thirty pixels -- when the 100 pixel margin I've set up on the left-hand side is disregarded. So I've another question: is there a way to keep that 100 pixel margin as the standard, but to have it taken out in favor of say a 20 pixel one for those readers whose monitors are 1024 pixels wide, so that they'd only have to scroll to the right a little (when they want to consult the right-hand most column)? (Those whose monitors are narrower than that would have to scroll more, of course.)

    How do I get the category and tag information to appear along with the date under either the ".single-title .entry-meta" or the ".single .entry-meta" (I'm trying out both)?

    And do you happen to know the selector for the title (or header) for pages?

  21. You're welcome.
    As for the rest: First, I'm not going to help you with something I consider wrong. Second, instead of answering any other questions of the type what's-the-selector-for-this, I'll try to help you with Firebug. Check the screenshot:
    http://wpbtips.files.wordpress.com/2013/04/firebug.png
    Usually you set the left column to HTML and the right to Style, so you see structure left, CSS right. If you click the "Inspect element" tool then hover over an element on the actual blog page, a blue rectangle will enclose the element (as around the header on the screenshot). If that's the element you want, you click on it. Same things when you hover over a tag in the HTML column. You can also click the grey triangles to reveal subsections. In the Style column you can change values and/or add or remove properties and values.

  22. Well, I was thinking of sparing those with monitors of that width or smaller a little bit of horizontal scrolling, and that's why I asked how to reduce the margin on the left; but I'll just leave it be and let them scroll, then.

    Thanks for the tip about Firebug, I'll give it another try.

  23. Well, I just tried it again, and I see that it's possible to "inspect" some items, though what I should look for then in all that code is a bit of a mystery. But the main problem is that it doesn't seem possible to select the small items, such as a headline, as the blue rectangle around the large elements blocks them out. Is there some way around this?

  24. I already gave you a tip re this: you click the horizontally oriented triangles to reveal the nested elements.

  25. Which of course are identified with the terms I'm looking for -- but if I knew what they were, specifically in this or that case, I wouldn't have to be looking them up, would I?

    And even so, some items, the ones I'm interested in identifying, simply remain hidden behind the blue rectangles relating to others. Really, it's far from an easy system to use.

  26. You didn't notice this:
    "Same things when you hover over a tag in the HTML column."
    After you reveal the nested HTML tags, you can hover over them and see which one produces the rectangle around the item you're looking for.
    And again this isn't necessary when the tag encloses some obvious content; for instance, you don't need the rectangle to realize that this item is the post date:
    <time class="entry-date" ETC ETC">April 14, 2013</time>

Topic Closed

This topic has been closed to new replies.

About this Topic