Jump to content
Sign in to follow this  
andulka

Modifying BNS Featured Category plugin

Recommended Posts

andulka    0
andulka

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
bryan-hadaway    3
bryan-hadaway

` #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
andulka    0
andulka

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
ericmyers    0
ericmyers

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
andulka    0
andulka

Thanks Eric, but still not quite sure how to change that only for the title texts in the Recent blog entries, for example 'Religion and retail'. Obviously I need to add something to the custom code mentioned above, but nothing I've added there so far has produced any change to the appearance of that particular text (or any text, for that matter) :-)

Share this post


Link to post
Share on other sites
catrina    103
catrina

Here's a variation of Eric's solution:

h2 a:link {
	font-style: italic;
	font-weight: bold;
	font-size: 30px;
	font-family: arial, sans-serif;
	}

If that doesn't work and nothing is being changed when the custom code is edited, then perhaps there's a problem with the custom code itself...


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
andulka    0
andulka

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
bryan-hadaway    3
bryan-hadaway

Hi Jaana, I'm back. Let's try a little trick shall we. By the way, the post titles there are set to bold, good thing because we can use that to change them; `#sidebar #bns-featured-category-3 .hentry strong{font-size:15px}` Play with 15. Thanks, Bryan

Share this post


Link to post
Share on other sites
andulka    0
andulka

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
cmunns    16
cmunns

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
andulka    0
andulka

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
bryan-hadaway    3
bryan-hadaway

Let's try updating it to: ` #sidebar #bns-featured-category-3 .hentry strong{ font-size:13px; font-weight:normal; text-shadow:none} ` Other than that I'm not sure, that plugin definitely seems to be throwing it's own styles in the mix. Thanks, Bryan

Share this post


Link to post
Share on other sites
andulka    0
andulka

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
bryan-hadaway    3
bryan-hadaway

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
andulka    0
andulka

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
ericmyers    0
ericmyers

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

Share this post


Link to post
Share on other sites
andulka    0
andulka

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
bryan-hadaway    3
bryan-hadaway

Hmm, can you please paste your Custom CSS top to bottom exactly how it is now in a post, please put backticks ` around it. I need to examine your CSS for problems. Thanks, Bryan

Share this post


Link to post
Share on other sites
andulka    0
andulka

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
andulka    0
andulka

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
bryan-hadaway    3
bryan-hadaway

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
andulka    0
andulka

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
bryan-hadaway    3
bryan-hadaway

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
andulka    0
andulka

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
andulka    0
andulka

Changed the bottom line as well, looks perfect.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×