Eskymo

Not written custom code for years so this is going to be interesting - thanks for the reference link - I'll take a lookk then take the plunge.....

Can you deal with Archive links in the same way? I want an Archive drop down with years but for the dates to only pull back posts from the parent category. Thanks for the links - I'll take a look later.

Thanks Fisicx - but that plugin hasn't been updated in 2 years so I'd be wary of using it. Yep I get your point about sidebars on mobiles and tablets, but they're still important regardless of where they are - side or bottom of site - people still need to be able to navigate the blog, so a sidebar is required. I know the target audience of the site and pretty much all use the desktop first and foremost to view it, then tablet with mobile being the last used option. As for Flatsome - I love it. Paid for it, used it to the build the site and it's been brilliant with excellent support and a facebook group for added support. So whether it's old or not, I'm not in a position to buy a different theme.

Wondering if I need to take this route and create custom widgets? http://www.wpbeginner.com/wp-tutorials/how-to-create-a-custom-wordpress-widget/

Hi All Here's a request for advice on creating custom sidebars. I'm building a new site for my boss and the site is pretty much done and I've left the trickiest part - the blog - till last and I'm not sure of the best approach. The site is built in Wordpress using the Flatsome theme (which is brilliant by the way and can highly recommend). For the record I'm using Flatsome, but set up a Child Theme to work with. My issue related to sidebars within the blog area. I've got one blog that I need to split into two using parent categories, these being 'Money' and 'Care' - so essentially I want a Money Blog and a Care Blog generated from the standard wordpress blog by splitting it in two - that's easy enough to do and I've done it by creating two parent categories that contain sub categories specific to each one. At this stage can I mention that we considered Multisite as an option at the start of the web build and decided it wasn't for us, so please no suggestions of using multisite. We don't want to do a multisite site. I've set up a main blog page, which is a standard WP page and there are two image button links on this page leading to the two category blog pages - these are also set up, but with little or no content right now. If I use the standard sidebar that comes with the theme and add widgets for: Recent Posts Blog Categories Blog Archives These display ALL recent posts, ALL categories and ALL archives for the entire blog. What I want to do is display these, but have them specific to the parent category you're in. I need to have two separate sidebars - so if I'm in the Money Blog I can display Latest Money Blog Posts, Money Blog Categories, Money Blog Archives and vice versa for the Care Blog. I've tried WooSidebars that comes with the theme and it just doesn't seem to do anything. I can have different sidebars, but in the widget area if I drag in 'Categories' to the Money sidebar, there's no way to just show Money or Care categories, I get all the blog categories. I can't see a way to split the content. So I tried the plugin Easy Custom Sidebars and had the same issue and now I'm onto trying Content Aware Sidebars and not having much luck with that either. Can anyone suggest the best approach for this??? Is there a plugin (free or paid for) that would do what I need? I'm sure this could be acheived through custom coding but as I'm a bit rusty on that front, I'd need some help - the only editable files that come with the theme via the WP Admin Area are a functions.php file and the CSS. Not sure if it's a matter of just editing the functions.php or whether I'd have to duplicate the index.php and single.php and siderbar.php as well to edit those as well - not sure how that would affect the rest of the site which is already built. Any advice welcome as I've got to get this done by the end of the year as we're hopefully launching the site in January. Thanks E

Hi All Long time since I've been on this forum. Just getting back into the web after a few years off and I'm poosting here because I've created an online forum site at my current place of work which I'd love you to review, but also looking for new members. It's called Carebox - carebox.community We created Carebox because in specialist care needs circumstances, there can often be feelings of “we’re in this on our own” and a sense of not knowing where to look for information or support and we're hoping that this site could fill that gap - but in order to do so we need people to sign up and start talking. So if you know anyone who would be interested in joining a forum that's all about specialist care needs and sharing real life stories and experiences, please pass this link on. I remember being one of the first 10 people on this forum and it's amazing how the place grew and grew to what it is now with thousands of members helping each other out - not sure how to get that growth on Carebox. So if you have any tips on how to grow an online community that would also be fabulous - please share! The site is built in Wordpress with Buddypress. Thanks E

Hey All I've got to get a new laptop as my current XP one is not only out of date, but also on it's last legs. However having just had a year off from self employment on maternity leave I'm pretty skint and I'm worried that my software won't be compatible with either Windows 7 or 8. I'm not sure which OS to go with. I can't afford to get a new laptop and upgrade to the latest version of creative suite, so thought I'd ask on here whether anyone has had any experience with running CS3 on windows 7 or 8. According the the Microsoft compatibility centre CS3 is compatible with both 7 and 8, but after googling, I've just read nightmare after nightmare. I've also read this guide and wonder if I need to choose a laptop with an intel or AMD processor and avoid Window RT (ARM processors). Any advice appreciated. Thanks E

wow - thanks - will give it a go.

thanks - might be a bit beyond my skill levels at the moment, but I'll see if I can conjure something up - thanks for the link.

Sounds like a great idea - how do I parse the URL?

I have the following select menu set up within my responsive design that appears when someone views the site I'm building on a mobile device: <form action=""> <select id="menu" onchange="go()"> <option>--Select a page--</option> <option value="/">Home</option> <option value="/about/">About</option> <option value="/locations/">Locations</option> <option value="/products/">Products</option> <option value="/development/">Development</option> <option value="/partnering/">Partnering</option> <option value="/community-involvement/">Community Involvement</option> <option value="/careers/">Careers</option> <option value="/media-centre/">Media Centre</option> <option value="/contact/">Contact</option> </select> </form> How can I adapt it so that when someone clicks on 'Products' for instance and get taken to the Products page that the menu stays on the word 'Products' instead of reverting back to the default --Select a page-- text? Is this possible?

I managed to find this snippet of code on http://www.w3schools.com here: http://www.w3schools.com/js/tryit.asp?filename=tryjs_selectmenu Implemented it and it works just fine - just had to add action="" to the form tag to get the page to validate.

I'm having problems viewing the responsive site I'm building at the moment on the opera mini browser on my iPad and my iPod touch. the iPad version of the browser doesn't pick up my media queries and doesn't pick up the 768px style sheet when in portrait mode, but this might be something to do with my media queries. when on the iPod it doesn't pick up my CSS styling for my navigation and all links seem to get combined into one - does opera not support webkit stuff? is there a way to specifically target opera with media queries so I can just serve the default CSS for it? are there any online resources that outline specific things to consider when building sites to work in opera mini?

you're so right - thanks for the reminder... I would've spotted that on validation though. Will go change that over. Cheers!

Don't know if this is overkill, but I've added left and right ids to my list elements like so: <div id="navigation-area"> <ul id="nav"> <li id="lt"><a href="http://www.google.com">About</a></li> <li id="rt"><a href="http://www.google.com">Locations</a></li> <li id="lt"><a href="http://www.google.com">Products</a></li> <li id="rt"><a href="http://www.google.com">Development</a></li> <li id="nav-wide"><a href="http://www.google.com">Community Involvement</a></li> <li id="lt"><a href="http://www.google.com">Partnering</a></li> <li id="rt"><a href="http://www.google.com">Careers</a></li> <li id="lt"><a href="http://www.google.com">Media Centre</a></li> <li id="rt" class="last"><a href="http://www.google.com">Contact</a></li> </ul> <div class="clearboth"></div> </div> <!-- END navigation-area --> and this is my new css for teh small screen displays: #navigation-area { width: 91%; margin: 0 auto; padding: 20px 0px 0px 0px; text-align:center; } #nav li { list-style-type: none; padding: 5px 0px; margin: 0px 0px 3px 0px; font-weight:bold; font-size: 0.75em; /* 12px/16px */ color: #ffffff; background:#141D5A; width: 49.5%; } #nav li#nav-wide {width: 100%; padding: 5px 0px; float: left;} #nav li#lt {float: left;} #nav li#rt {float: right;} #nav li.last {padding: 5px 0px;} #nav li a:link, #nav li a:visited { color: #ffffff; text-decoration: none; } And that work a treat. but it all looks a bit wide in landscape mode, so might have to do another media query for that and make it three columns... maybe that's overkill too.

Oh I see what you're getting at - done it, but now struggling with the widths and margins in between the lists and getting them all the line up on both left and right edges.

what do you mean by that? don't understand?

Ok next question... I've changed my css to be: #nav li { list-style-type: none; padding: 0px; margin: 0px 0px 5px 0px; font-weight:bold; font-size: 0.75em; /* 12px/16px */ color: #ffffff; background:#141D5A; width: 50%; float: left; } Thanks as I've been really struggling with this today! And now I get a two column nav now, but one of my links is 'Community Involvement' - quite long - so if I add any left/right padding, this breaks the list and makes it back into one column. Is there a way to have that one link span the full width and the rest of the links to span 50% of the width? Or is that asking too much?

I'm wondering if it's possible to convert this menu into two columns. My css code is: #navigation-area { width: 94%; margin: 0 auto; padding: 20px 0px 0px 0px; } #nav li { list-style-type: none; padding-right: 10px; font-weight:bold; font-size: 0.75em; /* 12px/16px */ color: 141D5A; } #nav li.last {padding: 0px;} #nav li a:link, #nav li a:visited { color: #141D5A; text-decoration: none; } #nav li a:hover, #nav li a:active { color: #F29400; text-decoration: underline; } and my html: <div id="navigation-area"> <ul id="nav"> <li><a href="#">List item</a></li> <li><a href="#">List item</a></li> <li><a href="#">List item</a></li> <li><a href="#">List item</a></li> <li><a href="#">List item</a></li> <li><a href="#">List item</a></li> <li><a href="#">List item</a></li> <li><a href="#">List item</a></li> <li class="last"><a href="#">List item</a></li> </ul> </div> <!-- END navigation-area --> I'd bascially want to overide these styles with a media query for small screens so that I get a neat 2 column menu on mobile devices that I can style with background coloured boxes rather than an inline list. Very much like the menu you get on this site when viewing on a small screen: http://thebritishvoiceoverguy.com/ I've looked at the source code and can't figure it out. I've never done any multi column css - any ideas?

I've just tried to implement this tutorial I found the CSS-Tricks website in the site I'm working on at the moment to change my normal list menu into a dropdown when the site is viewed on small screens - I'm testing on my iPod touch as I don't have an iPhone and I have two main problems: 1. when I click on the drop down menu - the page zooms in - I don't want this to happen and I don't know why it is. 2. the links in the drop down do nothing - they don't link anywhere even though a link is specified - why don't they work? This is my code: <div id="navigation-area"> <ul id="nav"> <li><a href="http://www.google.com">About</a></li> <li><a href="http://www.google.com">Locations</a></li> <li><a href="http://www.google.com">Products</a></li> <li><a href="http://www.google.com">Development</a></li> <li><a href="http://www.google.com">Partnering</a></li> <li><a href="http://www.google.com">Community Involvement</a></li> <li><a href="http://www.google.com">Careers</a></li> <li><a href="http://www.google.com">Media Centre</a></li> <li class="last"><a href="http://www.google.com">Contact</a></li> </ul> <select> <option value="">Select</option> <option value="http://www.google.com">About</option> <option value="http://www.google.com">Locations</option> <option value="http://www.google.com">Products</option> <option value="http://www.google.com">Development</option> <option value="http://www.google.com">Partnering</option> <option value="http://www.google.com">Community Involvement</option> <option value="http://www.google.com">Careers</option> <option value="http://www.google.com">Media Centre</option> <option value="http://www.google.com">Contact</option> </select> </div> <!-- END navigation-area --> I did originally have '#' in place for all the links, but substituted these for links to Google for now so there was actually somewhere for the links to take you so I could test it works - it doesn't - and I'm not sure what I'm doing wrong. I've got this in my main CSS file: #navigation-area { width: 94%; margin: 0 auto; padding: 20px 0px 0px 0px; } #nav li { display: inline; list-style-type: none; padding-right: 10px; font-weight:bold; font-size: 0.75em; /* 12px/16px */ color: 141D5A; } #nav li.last {padding: 0px;} #nav li a:link, #nav li a:visited { color: #141D5A; text-decoration: none; } #nav li a:hover, #nav li a:active { color: #F29400; text-decoration: underline; } #navigation-area select { display: none; } and this is my CSS file for small screens: #navigation-area { width: 90%; margin: 0 auto; padding: 20px 0px 0px 0px; } #navigation-area li { display: none; } #navigation-area select { display: inline-block; } and when I view the site on the small screen the drop down menu does appear just fine. When I click on it - for some reason the whole page zooms in - not sure why this happens - and when I select a link and click 'done' I get taken nowhere and I also have to 'pinch' the screen to get it back to the normal size. Any ideas? Have I missed something fundamental?

all of these sites (which I found on http://www.mediaqueri.es) have the same problem - they load in landscape mode just find but then if you switch to portrait mode and then back to landscape mode the site it scaled up - maybe I don't need to worry about it as it's seems quite a common issue... http://www.tracyworld.co.uk http://www.smaxshingmagazine.com http://foundation.zurb.com http://themeloom.com and the sites I've viewed from mediaqueri.es that don't have the issue have removed the ability to pinch-zoom. I think there lies my answer. Shame that it happens though.

Does anyone else have the iPad landscape quirk happen on their sites? I think it must be a bug. The first time the site loads in landscape mode it loads correctly and then I switch to portrait and the 768 styleshhet loads and then switching back to landscape and the the default css file loads again but this time the page is scaled up and you have to pinch-zoom to get it all to display - from then on it only loads the scaled up view. Am I the only one who experiences this issue?

I really don't understand how I can fix this problem and until it's fixed I can't really progress with the project.

I thought this might work - but nope the landscape view zooms in on the site.... <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />

So I'm stuck bascially - if I use: <meta name="viewport" content="width=device-width, minimum-scale=1.0" /> iPad in landscape loads the 768 stylesheet and the page is zoomed so the logo and images look pixelated.