Jump to content
Sign in to follow this  
thirdzboxmailcom

Platform Pro: Adding boxes around the Feature Boxes

Recommended Posts

thirdzboxmailcom

I would like to use feature boxes in Platform Pro but have them display like in iBlogPro4. In particular, the iBlogPro4 implementation has "boxes" around the feature boxes. There are no separators between the feature boxes in default under PPro. How can I add the boxes? Thanks!

Share this post


Link to post
Share on other sites
catrina

You can add CSS that will style the boxes the way you want. Do you want the exact style as shown on iBlogPro (including rounded corners)?


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
thirdzboxmailcom

Thanks. I presumed that custom code was the way to do it. :-). I would prefer the rounded corners, yes. However, for future reference, I'd also like to know how to do square corners. What would I need to add and where? Thanks in advance for the help!

Share this post


Link to post
Share on other sites
kastelic

You need to add the CSS code in Custom Code ->Custom CSS or by activating the base child theme and putting your code in base.css. Get firebug to find the style declarations that you need to override. Check out this tutorial for tips on how to style the boxes: http://www.w3schools.com/css/default.asp

Share this post


Link to post
Share on other sites
thirdzboxmailcom

Hi Jimmy. Thanks for your input. I have used firebug in the past but as a non-tech person that was pretty painful except for the simplest of things. Is there something I can cut and paste from the iBlogPro theme files or some other "easy" way to enable me to do this? I'm finding PPro so good and flexible that I now prefer to use it over any of the other themes (I have them all from before PPro was launched) but don't really have the technical ability to change too many things myself. Would really be grateful for any more help you or others can provide. :-). Thanks again.

Share this post


Link to post
Share on other sites
kastelic

You could certainly right-click and download the background image from the iblogpro boxes and then upload to your site and use as the background image, but the ids and classes are going to be different so there's its not as easy as cut-and-paste. Here's some styles to get you started:

.fbox{
	border: 1px solid #999;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	}

Share this post


Link to post
Share on other sites
thirdzboxmailcom

Thanks Jimmy. Your answer made me realize that I totally wasn't clear in my initial question. Sorry about that. I really am not looking for boxes around each of the feature boxes. Instead, I am looking for a rounded corner box around the entire feature box section and vertical lines dividing one box from another. I'm assuming that I just have 3 boxes, side by side. See http://www.pagelines.com/demos/iblogpro/. I'm trying to get the feature boxes on PPro to look like it does in the iBlogPro4 demo. Is there a reasonable solution that someone can help me with without having to spend much time on? I'm presuming that PPro is the future for PageLines and that it would be good for PageLines if everyone can move to that theme. Hoping this thread might help other users as well. :-) Thanks!

Share this post


Link to post
Share on other sites
catrina

You can add this CSS:

#boxes {border: 1px solid #999; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
	#fbox_13, #fbox_12 {border-right: 1px solid #999;}


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
thirdzboxmailcom

Hi Catrina, Thanks so much! I just played around with your code and by adjusting some of the values (for radius, thickness, color) was able to get it close to what I'm seeking. I'm still hoping to accomplish the following: - add a vertical line separating box 1 and 2 and another line separating box 2 and 3 (like in iBlogPro) - narrow the width of the large box you helped me create so that it lines up width-wise with the feature area above the feature box section. Currently, this large box extends beyond the margins of the web page. That is, it extends beyond the left margin and beyond the right margin. Any help much appreciated. Meanwhile, I promise you some karma when all is said and done. :-)

Share this post


Link to post
Share on other sites
thirdzboxmailcom

Hi Catrina, There's nothing much to see, but here it is: http://www.productlabz.com/platformprosandbox/ Notice how the box you helped me create that is around the 3 feature boxes is wider than the box around the feature section at the top of the page. Of course, I'd like to still keep the margin / padding that exists between the contents of the feature boxes and the large box around it you helped me create :-). Similarly, I'd like to keep some padding around the 2 vertical lines I'd like to see separating the 3 feature boxes. Also, they should ideally intersect and touch the large box. Thanks so much for any help you can provide!

Share this post


Link to post
Share on other sites
kastelic

Try this: To make the box not as wide:

#boxes{ margin:10px; }
To add the borders between the boxes:
#fbox_10, #fbox_9 {border-right:1px solid #999;}
To close the gap between the border-edges:
#boxes .content-pad {padding:0}

Share this post


Link to post
Share on other sites
thirdzboxmailcom

Hi Jimmy, Thanks! I made a minor adjustment and it works perfectly! Changed 2nd custom code to: #fbox_10, #fbox_11 {border-right:1px solid #eee;} You guys rock! Catrina, Jimmy, thanks for all the help. I was going to resort back to iBlogPro4 b/c it was starting to feel like I was trying to reinvent iBlogPro4. But I know that PPro is really the way to go and both of you made it possible. Thanks again. All the best karma to you both!

Share this post


Link to post
Share on other sites
thirdzboxmailcom

I also want to add a special shout-out to your last reply, Jimmy, where you describe what each item does. It really helps someone like me learn from doing so I can apply the concepts to other things I encounter. Thanks!

Share this post


Link to post
Share on other sites
annabella629

Hi. I am new to using Platformpro and am still trying to figure everything out. I am looking to do the exact same thing as Scott. My question is, where do I go to add the CSS that Catrina mentioned? I would like to create rounded corners for the features boxes as well as add the same rounded look to the 3 boxes I have below the features. Any help would be awesome. Thanks!

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  

×