Support » Plugin: Category Posts Widget » Thumb and Title not able to float left

  • Resolved nonamn

    (@nonamn)


    For three hrs now I’ve been trying to make this work. I’m trying to float the thumb, the post title and the date to the left (I disabled excerpts), so it appears as such: http://image.prntscr.com/image/06afd09db6074a3eacf4441093557727.jpg

    I’ve switched to default themes, disabled all other plugins etc. Nothing helps. I can’t understand why I’m having this issue. With other plugins such as the Popular Posts by Webline I didn’t even have to edit the CSS manually, as it automatically nicely tiled up my thumbnails against my text. This plugin first displays the thumb, then on a new row displays the title. It looks very broken.

Viewing 10 replies - 16 through 25 (of 25 total)
  • Step by step without my CSS modifications:

    I wanted this: in 4.6.2 I had [thumbs on left] and [title above date above author on right].

    Step 1- In 4.7.1 I had [thumbnails on left] above [title above date above author on left too]. Oviously “Show thumbnails above text” was enabled

    Step 2- I disabled “Show thumbnails above text” I got [title above date on left] above [thumbnail on left too] and [author on right].
    -So I tried: float: left !important; and nothing.

    Step 3- I went back to Step 1 and enabled “Show thumbnails above text” and tried: float: left !important; it worked perfectly, I included display: inline-block; for a reason I don’t remember now but it fixed another issue I had.

    May be the webmaster before me made changes in the theme, she leaved, I came and I am suffering the consecuences now.

    Thanks anyway I just tried to help nonamn

    • This reply was modified 2 years, 7 months ago by  lexposito1986.

    I already solved this and posted the resolution here https://wordpress.org/support/topic/thumb-and-title-not-able-to-float-left/#post-8628034 Weeks later I do not remember exactly what string(s) of code I added to make this work but it took me days lol. The reason for that is that there’s a culprit in the plugin code that you need to overwrite. This plugin, for reasons unknown to be, doesnt have an option to display the posts as we wish them to be displayed (the thumbnail on the left, the text on the right – which is one of the most popular ways to display “most recent/popular posts”) so you have to code it yourself. The plugin author wants you to purchase the pro plugin, but you can easily get the styling with some simple CSS (no need to purchase the pro version).

    In my opinion, there should be an option to display the thumb to the left accompanied with the text to the right (instead of having the photo on top and then the text on a new line below). But that’s just my opinion.

    Also, the issues had nothing to do with my theme as I tested this plugin with multiple default themes. The error is not in the themes, it was in the default plugin CSS which is injected into the header for some reason(!). What’s worse is that if you disable the plugin CSS, you also loose the ability to crop the thumbnails so that just makes things worse.

    I inactiavted the plugin. The plugin has potential but it needs to be fixed.

    • This reply was modified 2 years, 7 months ago by  nonamn.
    Plugin Author Daniel Floeter

    (@kometschuh)

    I descripted the layout option you mentioned in the FAQs: https://wordpress.org/plugins/category-posts/faq/

    The aim it to display the title, the excerpt, date, etc. next to the thumbnail. Nothing above the thumbnail.

    I tried our suggested solution with the Theme from @lexposito1986 (https://wordpress.org/support/topic/thumb-and-title-not-able-to-float-left/#post-8701952) and deliverd Themes from WordPress like Twenty Sixteen, etc.

    @nonamn Please write us the Theme you had problems

    To be honest I am having a rough time understanding you.

    I have checked the FAQ. I cannot test this out at the moment because I have disabled and deactivated this plugin (for now). I don’t remember precisely (since this was a month ago) but I remember that left floating alone did not fix this issue. The problem persisted – the second column broke to the second line.

    I addded a width to the inline-block element, which was the fix for the issue.

    I deactivated the plugin because you use an Internal Style Sheet for this plugin. Problem with this is that YOUR style get priority over the external styles which might mess up my theme. At the same time, I cannot turn off the plugin CSS as I no longer get cropped thumbnails. To get cropped thumbs I need to keep the internal CSS and risk screwing up my theme. That is why you had to use “!important”.

    Please consider a fix for this.

    Plugin Author Daniel Floeter

    (@kometschuh)

    a) Is I mentioned: You have to check on the option “Show thumbnails above text” + add the float: left !important as descripted in the FAQs

    b) Your request about still left enable the image crop, if the option “Disable widget CSS” is disabled: Please try and download the new code from GitHub. Are you familair with GitHub? Because you can download the code there (https://github.com/tiptoppress/category-posts-widget/tree/4.8) and copy it to your plugin folder ([your-wp-installation]/wp-content/plugins/category-posts-widget) to your wordpress installation.

    a) And as I mentioned, multiple times, ticking that option was already done and was not sufficient. I have already, thoroughly, described the fix for the issue. I will not venture into this once again because clearly we do not understand eachother.

    I am not familiar with GitHub. I have replied to your other thread (since this thread is about styling the widget).

    Plugin Author Mark-k

    (@mark-k)

    @nonamn,

    Since this discussion will live on the net forever I just want to clarify one thing about the inline CSS. There are Pros and Cons to that approach, and this is probably not the place to discuss them (unless you want to), but our implementation should be overrideable by themes, and by the 4.7 CSS customization feature, or any other plugin that use the normal priority to insert CSS, without the need to use !important, just because our CSS rules will be first in the HTML before the stylesheets are included, and there should not be any need for !important. If it doesn’t work like that for you and you actually need to use !important, please let us see the page where it happens.

    In any case, the way we see it, it is that if you are going to do any meaningful modification of the CSS rules for a widget you should turn the “built-in” CSS “off” in the widget setting. That CSS is intended to give something working out of the box for people that can not do CSS by themselves, and a blue-print for modifiers.

    Thanks for this reply, it was very helpful.

    I agree that
    – the end-user should not need to use !important in order to style any plugins.
    – the plugin css should be overrideable by themes without having to use !important

    With this said, the plugin author and this plugin’s FAQ is instructing users to use !important to fix certain styling issues.

    Since I fiddled with this a month ago, I do not exactly remember how I resolved the issue, but I have a vaguely recall I resolved the styling issues by floating the post-title & the cat-post-thumbnail to the left (had to use !important) and by applying a width to the div. I cannot swear by this since I do not remember exactly. I’d have to go back to the code and check, but I’m not inclinded to dedicating any more time to this plugin atm since I am not too keen on using the internal style sheet.

    Speaking of which, I also tried to turn off the built-in CSS (because it was overriding my own CSS) but still keeping certain parts of the plugin’s CSS and inserting this in my own stylesheet, however by doing this, my thumbnails no longer were cropped. Hence I felt forced to keep the built-in CSS “on”.

    If there was a fix for this, that’d be great because this plugin has potential, but it is very annoying when trivial and simple things cannot be easily corrected.

    – I checked the box “Show thumbnails above text” as instructed by plugin author
    – I followed the instructions given by plugin author and added the following code:
    .cat-post-thumbnail {float: left !important;}

    However, this did NOT make my text and thumbnail appear on the same row. Thus, the “solution” provided by the author is not correct.

    This is my result: http://image.prntscr.com/image/1e78bf3b6d1442c98c7a30d165f1fd04.jpg

    Obviously, I want to change this styling completely since it’s not very attractive. And the “(0)” at the bottom makes little sense (maybe it ought to say “Comments: X”). Also, when I click outside of the photo at the empty white space, I get directed to the post.

    If you wish to troubleshoot; I am running the theme Twenty Sixteen and tried with Twenty Fourteen.

    My settings were as follows:
    Checked: Show post thumbnail
    Checked: Show thumbnails above text
    Checked: Show post date
    Checked: Show number of comments
    Checked: CSS crop to requested size

    I fixed the issue by adding this piece of code;
    #category-posts-2-internal .post-title{display: inline;}
    Now things started to pan out.

    Again, I am running Twenty Sixteen & Twenty Fourteen and had no other custom CSS enabled at the time of troubleshooting.

    As someone else above me noted, by using the author’s instructions alone you do *not* solve this styling issue, you must define one of the divs as an inline block to be able to have the thumb and the title displayed on the same row. Floating the thumb to the left doesn’t alone solve the issue. I suggest you to update your plugin FAQ, since I am not the only one experiencing the same issue. People will follow the FAQ instructions, not see a result, and be frustrated because as users we expect the plugin instructions to be accurate and up-to-date.

    On a different note, yet slightly related, how to go about if I want the comments and the date to appear on the same row? This is my current code … ///EDIT, fixed, like so:

    #category-posts-2-internal .comment-num::before {content: “Comments: “;}
    #category-posts-2-internal .comment-num { display: inline; }
    #category-posts-2-internal .post-date { display: inline; }
    #category-posts-2-internal .post-date::before {content: ‘ ‘; display: block; }

    • This reply was modified 2 years, 7 months ago by  nonamn.

    I am using Category Posts Widget in my dept web http://tm.unimal.ac.id/
    I want the sidebar thumbnail and title is arranged as shown in picture A
    thanks

Viewing 10 replies - 16 through 25 (of 25 total)
  • The topic ‘Thumb and Title not able to float left’ is closed to new replies.