Jump to content


Photo
- - - - -

Apply LESS for stacked tabs


Best Answer Danny , 15 April 2013 - 12:29 PM

Is the topic resolved ?

Go to the full post


  • Please log in to reply
11 replies to this topic

#1 Willem-Siebe Spoelstra

Willem-Siebe Spoelstra

    Super Member

  • Members
  • 228 posts
  • LocationAlmere
  • Country: Country Flag

Posted 21 March 2013 - 12:22 PM

Hi, I have used a custom menu widget in my left sidebar.

 

I would like to apply the 'stacked tabs' from Twitter Bootstrapp.

 

What I did in my CSS file was:

 

Please Login or Register to see this Hidden Content

 

But that does not give the desired result.

 

When I lookup the LESS documentation from Pagelines I see a lot more:

 

Please Login or Register to see this Hidden Content

 

How do I apply this to my custom menu widget?

 

Kind regards,

 

Willem



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 15890 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 21 March 2013 - 01:29 PM

HI,

 

The code you have used isn't valid CSS:



Please Login or Register to see this Hidden Content

 

As far as I know, you wont be able to apply this CSS to a custom menu widget. I recommend you attempt to do this via a text widget and use custom HTML and see if this works.



#3 Willem-Siebe Spoelstra

Willem-Siebe Spoelstra

    Super Member

  • Members
  • 228 posts
  • LocationAlmere
  • Country: Country Flag

Posted 21 March 2013 - 02:04 PM

Yeah, but that's the whole point, I want to make use of the WordPress menu ofcourse :-).

I thought it was possible because Pagelines integrated Bootstrap.

 

But If it's not possible, I just use normal CSS to have the same effect.



#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 21 March 2013 - 03:24 PM

I think you should use normal CSS for the effect.



#5 Willem-Siebe Spoelstra

Willem-Siebe Spoelstra

    Super Member

  • Members
  • 228 posts
  • LocationAlmere
  • Country: Country Flag

Posted 23 March 2013 - 04:17 PM

Just look at the results :-) > 

Please Login or Register to see this Hidden Content

 

The left part is finished... question about the topmenu though. When I put a border around the a element is is twice as thick what you see in the sidebar.

How is that possible?

 

Kind regards,

 

Willem



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 15890 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 24 March 2013 - 09:07 AM

Hi,

 

Not sure what you mean, as there is already a border around that menu widget.

 

Unfortunately, we are unable to provide support for user created CSS. I recommend you contact one of our Pros is you require further assistance.

 

Please Login or Register to see this Hidden Content



#7 Willem-Siebe Spoelstra

Willem-Siebe Spoelstra

    Super Member

  • Members
  • 228 posts
  • LocationAlmere
  • Country: Country Flag

Posted 24 March 2013 - 09:51 AM

Sorry, I don't understand why you send me to a Pro, but for sure you misunderstood me because the left menu is ready, I try to apply the same border at my top menu.

 

So my previous post explained:

 

1) Showing the endresult of my left menu, I'm proud at it,  because you guys told me to use normal CSS because how I tried to apply LESS was not correct.

2) Just a simple CSS question. When I do a border around the 'a element' in the top navigation the border (1px) is twice as thick as you can see in the sidebar right now (you can test it yourself by adding a border within Google).

 

 

Kind regards,

 

Willem



#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 15890 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 24 March 2013 - 11:04 AM

Willem, I pointed you to our pros, as we are unable to provide support to user created custom code, which is basically what this is.

 

1. The code  you used above is not LESS CSS, you add classes inside a CSS class, that is not LESS CSS. For information on LESS, I recommend you visit the official site.

 

Please Login or Register to see this Hidden Content

 

2. Not sure what you're referring to when you say add a border to a an element in the top navigation.



#9 Willem-Siebe Spoelstra

Willem-Siebe Spoelstra

    Super Member

  • Members
  • 228 posts
  • LocationAlmere
  • Country: Country Flag

Posted 25 March 2013 - 05:08 PM

Hi, if you say I have to go to a PRO, I rest my case.

But not in this situation, because we don't understand each other, perhaps a language barier because of my English.

 

I first wanted to apply LESS to my left menu in my sidebar, your collegue told me: not possible > I used normal CSS > proud on the result > that's the only thing I said for that.

 

Second, there is a problem with the top navigation. Nothing to do with less. I just apply a border (border: 1px solid black) to the a element.

 

Please Login or Register to see this Hidden Content

 

Nothing difficult, nothing special BUT the border is not 1px > it thicker. I use borders everywhere (also for the sidebarwidgets and menu), all 1px, top nav: thicker.

 

Why is that?

 

Kind regards,

 

Willem



#10 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 25 March 2013 - 08:48 PM

Willem,

 

It's possible that the way you're applying a border to the navbar is doubling it because each menu item causes duplication.

 

Here's what happens...  If you apply border: 1px solid black; the menu item shows a single pixel on top and bottom, and the left menu item has a single pixel width on the left side.  Between each menu item, there's a border on the left and right.  These each meet the next menu item, causing the doubling. Each really has only on one single pixel border, but it appears visually as two pixels.

 

How to fix it?  Simple. Change the border CSS to this:

 

border-top:  1px solid black;

border-bottom: 1px solid black;

border-left: 1px solid black.

 

But, on the last menu item, you'll need to go to Dashboard > Appearance > Menus.  Click "Screen Options" at the top and check the box for CSS Classes.   Edit the last menu item and add a unique class. Let's call it menu-right.

 

Add this to the custom code:

Please Login or Register to see this Hidden Content

This makes sure the last menu item is bordered on all four sides.



#11 Willem-Siebe Spoelstra

Willem-Siebe Spoelstra

    Super Member

  • Members
  • 228 posts
  • LocationAlmere
  • Country: Country Flag

Posted 15 April 2013 - 12:24 PM

Hi Rob,

 

Thanks for the explenation, I already understand what you are telling. I had this problem before and I managed to solve it with margin-bottom: -1px (in sidebar menu).

In my case i use a padding so the borders are not next to each other.

However, when i apply a border to the a element today, it does show me a normal 1px border. Miracles happen ;-).

Thanks for the effort.



#12 Danny

Danny

    Is Awesome!

  • Moderators
  • 15890 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 15 April 2013 - 12:29 PM   Best Answer

Is the topic resolved ?