Archived

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

  • 0

Tabber Tabber - a few speed bumps

Question

Posted · Report post

I'm building out the pages and tabs.  Here is where it is so far:  http://convergentsg.com/?page_id=74

 

1) Is there a way to get the tabs left justified on the page rather than sitting mid-way under the main navbar?  I selected "left" which has resulted in a vertical menu, but it just doesn't sit to the left of the page.

 

2) On my second tab, I have a numbered list in the text.  On the page holding that content, those numbers are indented, but when Tabber displays them, they are actually pushed left which looks bad.  Is there something I can do to fix that?

 

3) The color and bold font don't work well with the design I'm building.  Is there a way to make it appear more subtle?

 

Here's an example of what I'm trying to do.   http://www.aspectmarketintelligence.com/services/

 

Thanks!

Share this post


Link to post
Share on other sites

22 answers to this question

Posted · Report post

Hey there,

Nicely done! Really impressed with what you did with that. Tabber should retain all formatting when brought in from a page content. Are you filling in a numbered list using the option or a page id?

Share this post


Link to post
Share on other sites

Posted · Report post

The numbered list is just in the "edit" box (the content that is in the Post Loop section).  It was just a paragraph with some numbered bullets underneath like this:

  1. Example 1
  2. Example 2.

Instead of bringing those back indented like above, Tabber actually had them "outdented" further to the left than the main block of text.

 

Also, can you please let me know about 1) and 3) in my original question?  I really want the tabs on the left of the page rather than in the middle.  And for color/font - I was curious if it would be easy for you to just provide a box where we can put the 6 digit value for color for the tab background like you do for # of boxes, layout, etc.  Similar thing for entering code for font type and color.

 

Anyway, I do need to get the tabs to the left, get a numbered list to come over formatted as it is on the page it draws from, and get colors and fonts that work with my page.  Thanks!!

Share this post


Link to post
Share on other sites

Posted · Report post

It just occurred to me that you might have looked at the link in my original question (at the bottom) that was the example of what I wanted to achieve, rather than the link (near the top) that shows you where I am now.  

 

One of the three items asks to get the column of tabs left justified on the page, like the screenshot examples you provide to prospective customers.

 

I really need support for the three items in my original question.  Thanks!

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

"1) Is there a way to get the tabs left justified on the page rather than sitting mid-way under the main navbar?  I selected "left" which has resulted in a vertical menu, but it just doesn't sit to the left of the page."

 

There's an option to adjust the width of Tabber. You have 840px, which is why there's a space on the left.

http://screencast.com/t/e6RJ6VPw

 

"2) On my second tab, I have a numbered list in the text.  On the page holding that content, those numbers are indented, but when Tabber displays them, they are actually pushed left which looks bad.  Is there something I can do to fix that?

Like I asked above, are you using a page id to stream in the content, or the text box? When streaming in from a page it should retain all the formatting.

 

 

"3) The color and bold font don't work well with the design I'm building.  Is there a way to make it appear more subtle?"

Sure you can use some CSS to achieve whatever look you're going for.

Share this post


Link to post
Share on other sites

Posted · Report post

On 1) do you have a suggested width to enter to make the tabs align on the left of the page?  I just want it to look like your screen shot.

 

On 2), I'm using a page ID to bring in the text, as with all the tabs.  That's how it seems the section works and I'm not aware of how else to do it.  Is there some other way that will make it retain the formatting of the page from which it's drawing?

 

On 3) What's the easiest way you'd suggest to get into custom CSS?  I've seen you mention providing color choices on your other products.  Are you going to integrate that advancement into this product?

 

Thanks!

Share this post


Link to post
Share on other sites

Posted · Report post

1. Sure, simply remove the 840 that you have in the option field and it will go to 100%.

http://screencast.com/t/pX0u703F7g

 

2. I visited your link but don't see the numbered list bug that you're mentioning. The content has filters applied so all formatting should be retained. If you have a link with this bug I'd be happy to investigate.

 

3. Yup I recommend going through these courses at CodeAcademy. At some point it's possible I'll include a color picker. http://www.codecademy.com/tracks/web 

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks.

 

1.  I never put 840 in that field.  I must have just defaulted to that for some reason.  I had not entered a value in the box when you looked at it and found 840 in the code.  At this point, I have it all the way to 1200, and it is now close to the left, but still will not get all the way there.  After about 1140 it stopped moving left.

 

2.  I took the numbered list out because it looked bad.  I will put it back now so you can see.  It's under the "analyze strategic issues" tab.

 

3.  Thanks - I'll have to learn how to code CSS to tweak other things anyway...

Share this post


Link to post
Share on other sites

Posted · Report post

Really would like support on 1 and 2 above.  

 

Again, on 1 you seem to think I put a value of 840 in the option field, and I did not.  It was blank.  I cannot right now see any way to get the tabs to align on the left of the page like in the screenshot you use to sell the program.

 

On 2, I put the list back in.  Go to the tab "Analyze strategic issues".  I use the page ID like with every other tab.  On the page where the text resides, the numbers are indented.  Tabber takes in the content but actually "outdents" or pushes the list left.  Doesn't look good.

 

Thanks!

Share this post


Link to post
Share on other sites

Posted · Report post

If you do not enter a value, it will stretch to 100% the width of it's parent container.

 

"I cannot right now see any way to get the tabs to align on the left of the page like in the screenshot you use to sell the program."

There is no special code or treatments at all on the demo. The value is left blank, and it's stretching to fil the parent container. Yours is too.

 

http://screencast.com/t/Odz8h4Ba

 

What you're seeing is pagelines main column padding. This is outside the scope of the sections style.

 

Regarding the "outdenting" again if you have a link I would love to investigate and possibly provide a fix. However I'm unable to provide the proper help without seeing what's going on.

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks

 

I'll provide a link again:  http://convergentsg.com/?page_id=74

 

You can see both issues there.  And again the tab is the second tab - "analyze strategic issues" which shows the issue.  The page that the text is from has the numbers indented, but that's not how it shows up under Tabber - they are actually pushed left of the main text they're under.

 

And I'm sorry, but the left justifying of the column of tabs does not work how you say.  I did not enter a value - that field was blank, and the column of tabs was near the middle of the page.  All I want is for the column of tabs to be left justified on the page.  Is there a way to do this?

 

I currently have a value of 1200 in there which pushed the column to the left, but not all the way.  Again, when the field was blank, the column sat more in the middle of the page.  Those are just the facts of my experience.  

Share this post


Link to post
Share on other sites

Posted · Report post

Also, the content area of the Template for that page has just Tabber - there is no sidebar or anything else taking up space.

Share this post


Link to post
Share on other sites

Posted · Report post

I put the field back to blank so you can see how the column of tabs sits more in the middle of the page with no value in that box.

Share this post


Link to post
Share on other sites

Posted · Report post

Try putting this in your Custom CSS

.tabbable {max-width:100% !important;}

Share this post


Link to post
Share on other sites

Posted · Report post

Thank you!  OK, that moved it almost all the way to the left.  On other pages, the content starts about there.  I have some boxes on my home page that justify all the way to the left, but this may be as far to the left as the content section goes.

 

I don't know if I can put Tabber outside the Content Area and just directly into the Page Template.  I tried that before but it didn't work.  If that's as far left as it can go, it's pretty close and should work.

 

FYI - this is essentially the same effect as when I put values like 1180 and 1200 in that field.  However now it's there with the field blank.

 

 

By the way, on the issue of the numbered list - the page for which I gave you the link is drawing from page ID 104 (that's the page that the tab "analyze strategic issues" draws from.  

 

Thanks for digging in!!

Share this post


Link to post
Share on other sites

Posted · Report post

Hmm not entirely sure why those numbers padding are off. Try putting this style in your OL markup.

 

<ol style=" padding-left: 20px;">

Share this post


Link to post
Share on other sites

Posted · Report post

Thank you.

 

OK, that's better - thanks.  It still does not indent the list, but the numbers are at least lined up under the paragraph above and do not stick out to the left.  I wonder if I can get it to indent by trying more than 20px?

Share this post


Link to post
Share on other sites

Posted · Report post

So it worked - the value of 20 lined the numbers up directly under the text above.  35 indented the numbered list.  Very nice - perfect.  I'd say that's resolved.  Thank you!

 

Also I found the CSS that was set at 80% for the right margin and put it at 65% which created a bit of a right border so the text associated with the tab didn't stretch across the entire page to the right.  Looks better.

Share this post


Link to post
Share on other sites

Posted · Report post

Great to hear. Go ahead and click that Mark Solved button if your satisfied with the responses. If there's anything else I can do please let me know.

Share this post


Link to post
Share on other sites

Posted · Report post

No - I've just not been able to find yet where to change the colors and fonts using Firebug.  If you can point me to it more quickly it would be nice.  Otherwise, I'd say it's all resolved.  

 

Thanks!

Share this post


Link to post
Share on other sites

Posted · Report post

Just a note - since there hasn't been a reply yet, I took the numbered list referenced in 2) above out and just have blocks of text.  I would like to put the numbered list back in when it can mirror the indented format of the page from which it draws the content.

 

Looking forward to some insights!  Thanks!

Share this post


Link to post
Share on other sites

Posted · Report post

Unfortunately customizations are kinda outside the realm of support here, or else I'd be here for hours helping everyone. ;)

Share this post


Link to post
Share on other sites