Archived

This topic is now archived and is closed to further replies.

  • 0

Modifying BNS Featured Category plugin

Question

Posted · Report post

I'm using the BNS Featured Category plugin to display recent posts from specific categories on the sidebar here. As you can see, it doesn't quite match the theme and I would like to be able to change it to look the same as the News, Links etc. Apparently it uses the style of the theme's 'posts' and the author has responded to a similar question by: 'You will need to add element(s) that reference the plugin content more specifically'. Which says pretty much nothing to me. :-) I will ask the author but I doubt he would go into much detail, so I was wondering if you'd be able to point me to the right direction or, alternatively, is there some other way to display the recent posts from spesicic categories with the author's name on the sidebar?

Share this post


Link to post
Share on other sites

33 answers to this question

Posted · Report post

Hi, revisiting the subject above. I would like to display a different sidebar on the category pages (the main pages 'News' and the individual blogs and their subpages), apparetly just changing the sidebar setting for one page in the category does the trick, so no problem there. I've chosen the secondary sidebar for the category pages, and the problem is the formatting of the BNS Featured Category plugin is lost there, so obviously I need to add something to the custom css to make it work. I suppose it's just some simple modification of the original code (above), I just can't figure it out. Any suggestions? Thanks again. :-)

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Bryan, yes I got that, to be precise the code that is working is

[#sidebar #bns-featured-category-3 .hentry { background: none;  border-top: 2px solid #222222; clear: both; overflow: hidden; padding: 1px; padding-left:10px; font-size:13px;}

but as soon as I add 'strong' the black boxes are there. Looks like I'm stuck with the bold... :-)

Share this post


Link to post
Share on other sites

Posted · Report post

Jaana, Sounds good. Do you need help with anything else?

Share this post


Link to post
Share on other sites

Posted · Report post

Does the plugin come with some sort of CSS file?

Share this post


Link to post
Share on other sites

Posted · Report post

Kate, at the moment I have the same sidebar on all the pages because I'm not able to change the appearance of the plugin if I place it in ay other sidebar than the default one. What I mean is, I would like to have a different sidebar (the secondary sidebar, say) on the news and blog pages but if I change the sidebar, the appearance of the plugin is changed to its default, which doesn't fit very well with the theme. On the default sidebar the plugin appearance has been changed using the code below, so now I would need to be able to the same with the other sidebars, or one of them, as well. The code that was used to change it on the default sidebar was ` #sidebar #bns-featured-category-3 .hentry{ background:none; border-top:2px solid #222222; clear:both; overflow:hidden; padding:1px; padding-left:10px} .bns-featured-category strong a{font-weight:normal} ` so it could be as simple as replacing the `#sidebar` with something else, I just don't know what that would be for the secondary sidebar, for example.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi again! Adding that as is removes the bold, but the black boxes behind each title return and the author/blog name loses the padding and is lined with the main title rather than the individual blog entry titles. Removing

bold

returns everything back to the way it waa with the original custom code. As far as I can see the plugin php doesn't have anything that would override this (but I could very well be wrong), and the plugin author specifically says the plugin uses the style of the theme's 'posts'. I shall ask him again...

Share this post


Link to post
Share on other sites

Posted · Report post

Sorry, I meant that in addition to the code that was working for you so far, not to replace all of it... just to replace this one line: `#sidebar #bns-featured-category-3 .hentry strong{font-size:15px}` Thanks, Bryan

Share this post


Link to post
Share on other sites

Posted · Report post

Bryan, here is the current content of the custom css box: ` body{ color: #FFFFFF; line-height: 20px; font-size: 14px } #nav ul, #nav .mnav{width:549px} #sidebar #bns-featured-category-3 .hentry { background: none; border-top: 2px solid #222222; clear: both; overflow: hidden; padding: 1px; padding-left:10px; font-size:13px; font-weight:normal; text-shadow:none} #site #contentborder{background:none} body{ background-image: url(" 1179032744-949-0.jpg")} ` Not quite sure if you meant adding backsticks like that... The background image is a new addition, added today, the rest of it has been in place for a while now.

Share this post


Link to post
Share on other sites

Posted · Report post

OK, backticks is the same as adding the CODE, but for some reason parts of the code have been cut off above, so here it is again, this time without backsticks: body{ color: #FFFFFF; line-height: 20px; font-size: 14px } #nav ul, #nav .mnav{width:549px} #sidebar #bns-featured-category-3 .hentry { background: none; border-top: 2px solid #222222; clear: both; overflow: hidden; padding: 1px; padding-left:10px; font-size:13px; font-weight:normal; text-shadow:none} #site #contentborder{background:none} body{ background-image: url(" 1179032744-949-0.jpg")}

Share this post


Link to post
Share on other sites

Posted · Report post

` #sidebar #bns-featured-category-3 .hentry { background: none; border-top: 1px solid #222222; clear: both; overflow: hidden; padding: 10px; } ` Drop that in your Custom CSS and let me know if that looks good. Thanks, Bryan

Share this post


Link to post
Share on other sites

Posted · Report post

Okay, I cleaned your code up, fingers crossed, let 'er rip: body{ background:#000 url(" 1179032744-949-0.jpg"); color:#fff; line-height:20px; font-size:14px} #nav ul, #nav .mnav{width:549px} #site #contentborder{background:none} #sidebar #bns-featured-category-3 .hentry{ background:none; border-top:2px solid #222222; clear:both; overflow:hidden; padding:1px; padding-left:10px} #sidebar #bns-featured-category-3 .hentry strong{ font-size:13px; font-weight:normal; text-shadow:none} Thanks, Bryan

Share this post


Link to post
Share on other sites

Posted · Report post

Bryan, I just received a code that worked from the plugin developer, I'm adding it here in case it helps someone else. I added this:

.bns-featured-category strong a {
	  font-weight: normal;
	}

to the custom css and that did the trick. Thanks for your patience with this and my other issues! :-)

Share this post


Link to post
Share on other sites

Posted · Report post

Ah, it's always the little things. Might as well use the optimized CSS though just changing the bottom: body{ background:#000 url(" 1179032744-949-0.jpg"); color:#fff; line-height:20px; font-size:14px} #nav ul, #nav .mnav{width:549px} #site #contentborder{background:none} #sidebar #bns-featured-category-3 .hentry{ background:none; border-top:2px solid #222222; clear:both; overflow:hidden; padding:1px; padding-left:10px} .bns-featured-category strong a{font-weight:normal} Thanks, Bryan

Share this post


Link to post
Share on other sites

Posted · Report post

I think you're right, I think there are different ID's for the different sidebars. I want you to check out: http://www.pagelines.com/docs/changing-colors-fonts It'll show you how to dig into the code easily to find what you need and will save you a lot of time in the future with customizations. Thanks, Bryan

Share this post


Link to post
Share on other sites

Posted · Report post

I did this before receiving your reply, bust I've just tested your code and it works as well. :-) The plugin font size can be removed in both cases, as its now the same size as the rest of it without specifying the size. Thanks again!

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Bryan, and thanks again! Adding

font-size:13px;

at the end of the original code changes the size to somewhat right (funny as I thought I'd tried adding font-size there before and it didn't work...) :-), however it doesn't remove the formatting, the titles are still bold. But getting there. :-)

Share this post


Link to post
Share on other sites

Posted · Report post

Changed the bottom line as well, looks perfect.

Share this post


Link to post
Share on other sites

Posted · Report post

Good to hear. Thanks, Bryan

Share this post


Link to post
Share on other sites

Posted · Report post

Hey Jaana - I just took a look here. However, I can't seem to see the issue. Could you explain a little more, please?

Share this post


Link to post
Share on other sites

Posted · Report post

Jaana, I just took a look and it seems to look very consistent to me. Did you end figuring this out on your own?

Share this post


Link to post
Share on other sites

Posted · Report post

No, if you look closely :-) the titles are still in bold and slightly different from the titles in 'News'. The blog/author name looks the same as the titles in the News box. Probably only bothers me though, but would be nice to have it all the same...

Share this post


Link to post
Share on other sites

Posted · Report post

Thank you Bryan, you're a star! I changed the padding to 2px and added

padding-left:10px;

to make the text start so that's in line with the others, rather than starting from where the title text is starting (can't really explain this too well but maybe you get the point) :-) One more thing - how would I remove the bold font in the titles? Don't know how it would look, but would like to try and maybe change the author/blog name font into italics, if that's not getting too complicated...

Share this post


Link to post
Share on other sites

Posted · Report post

Well, this is the main issue at the moment as it's kinda in my face every time I go there (I have a couple of other threads open as well though). :-) It's not that far off I think as adding the code actually changes the text, it's just that it removes the formatting as apparently adding 'bold' after

[#sidebar #bns-featured-category-3 .hentry

somehow messes things up. Here is a screenshot of what happens as soon as 'bold' is added, and this is what it looks like with the rest of the code in place but without the 'bold. As you can see, with 'bold' also only the first line is aligned properly.

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks, Catrina - the custom code I'm using to change the appearance of that particular box is what Bryan suggested above, a little modified:

#sidebar #bns-featured-category-3 .hentry { background: none; border-top: 2px solid #222222; clear: both; overflow: hidden; padding: 1px; padding-left:10px; ] 

It does the job of changing the appearance of the box, so I wouldn't know if there's a problem with it. However adding the code you mentioned doesn't change anything, so I'm probably doing something wrong. I'm not sure if I'm making myself clear, but what I want is to change the text here in the box that says Recent Blog Entries to look the same as it is in the other posts, ideally so that the titles would look the same as they do in 'News' and the author name (or rather, name of the blog) would be either in italics or perhaps in a smaller font. I do not wish to change the box that says 'News', for example, which is also showing recent posts with the blog categories excluded...

Share this post


Link to post
Share on other sites

Posted · Report post

Jaana, The font that is there isn't bold. Here is the code to change the font type; and make it italics... This is for the Headings of the Posts, just change the font family to what you want, etc...

h2 {
	font-style: italic;
	font-weight: bold;
	font-size: 30px;
	font-family: arial, sans-serif;
	}
And for the author of the post, again; you can customize to your needs:
.metabar {
	font-style: italic;
	font-weight: bold;
	font-size: 30px;
	font-family: arial, sans-serif;
	}

Share this post


Link to post
Share on other sites