Jump to content


Photo
- - - - -

Changing height of main Navbar only

navbar height

  • Please log in to reply
10 replies to this topic

#1 mrmiyamoto

mrmiyamoto

    Member

  • Members

  • 25 posts
  • Framework Version:2.0
  • Country: Country Flag

Posted 30 March 2014 - 10:31 PM

Site: http://beta.animemovieguide.com

 

My inquiries regarding various customizations with DMS 2.0 have been largely met with people espousing the benefits of how easy DMS makes changing things with CSS.

 

Well, I decided to try and increase the height of my main navbar to test that out (and naturally because I want it a little taller).

 

So far I've managed to get some results with the below inserted into the Custom LESS/CSS section:

 
#navbarumjhken .pl-content {
  height: 40px;
}

I've run into several problems trying to modify the height or line-height for the rest of the elements involved though including:

 

  1. Putting "height: 40px;" into the Inline CSS Styling section of the navbar did all of nothing
  2. There doesn't seem to be a save button when editing the Custom LESS/CSS section in the DMS, the Publish button seems to have no effect as when I refresh the page after publishing the code I've added there is gone.
  3. Finding the specific elements to change their properties is becoming very tedious because I have to switch back and forth to Firefox so I can use Firebug to find them.  Only supporting Chrome becomes a significant issue when you want to do something more in depth like this.
  4. Only having the specific ID of a section in the <section> tag makes it difficult to change the CSS for things deeper within it.  If the class ID  (ie. "umjhken" in this case) could be added as an extra class or at the end of ID names (or something) to everything within the section it would help with the pinpointing and prevent me from having to do something like: "#navbarumjhken #menu-top-menu-1 .navline > li > a"  or something like that, which is where I feel this is heading.

Basically, is it possible for me to get a list of elements whose height/line-height/margin/padding I'm going to have to change to increase the height of this specific navbar a tad?  Finding them manually hidden within the deep tag nesting of the DMS code seems to be more trouble than its worth at the moment.


Edited by mrmiyamoto, 30 March 2014 - 10:32 PM.


#2 batman

batman

    Bat Learning

  • Members

  • 2088 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 30 March 2014 - 10:46 PM

HI @mrmiyamoto

I test the Inline CSS Styling section with

height: 40px (without quotes)

This works fine to me

http://screencast.com/t/l9HpnIhmtrTR



#3 mrmiyamoto

mrmiyamoto

    Member

  • Members

  • 25 posts
  • Framework Version:2.0
  • Country: Country Flag

Posted 30 March 2014 - 10:50 PM

HI @mrmiyamoto

I test the Inline CSS Styling section with

height: 40px (without quotes)

This works fine to me

http://screencast.com/t/l9HpnIhmtrTR

 

I've tried with/without quotation marks as well as with/without a semicolon and nothing seems to affect its height.


Edited by mrmiyamoto, 30 March 2014 - 10:50 PM.


#4 mrmiyamoto

mrmiyamoto

    Member

  • Members

  • 25 posts
  • Framework Version:2.0
  • Country: Country Flag

Posted 30 March 2014 - 10:53 PM

I checked again with a higher number and it seems like the inline CSS property there changes the height of the container for the navbar but not the bar itself.  That makes it look taller on yours because of the black background but only adds space beneath mine because I'm using the blue theme for it.



#5 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 01 April 2014 - 01:54 AM

is this issue now resolveD? 



#6 mrmiyamoto

mrmiyamoto

    Member

  • Members

  • 25 posts
  • Framework Version:2.0
  • Country: Country Flag

Posted 01 April 2014 - 03:48 AM

is this issue now resolveD? 

 

Nope, my question has yet to be answered.  Thanks for checking, though.



#7 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 01 April 2014 - 01:27 PM

Details relating to CSS controlling height are found here http://www.w3schools..._dim_height.asp

 

There is an issue at the moment with saving CSS in some instances, this is being worked on by the Core Dev's so we will update you when this is resolved. 

 

For now make sure your pages have templates assigned and if the issue persists try disabling all non pagelines plugins. 

 

Also can you enable debug for us in site settings > advanced 



#8 mrmiyamoto

mrmiyamoto

    Member

  • Members

  • 25 posts
  • Framework Version:2.0
  • Country: Country Flag

Posted 01 April 2014 - 01:35 PM

Sorry if it wasn't clear in my original post.  I really do understand how CSS works, what I'm requesting is a list of elements (ex:  .section-navbar .navbar .navline > li > a, .searchform .btn-search, etc.) that I need to change in my case to get everything vertically centered in a navbar that is taller than the default height.

 

I'm asking for this because A) DMS is making it harder than it would normally be to find these elements by using heavily nested code and restricting the use of Firebug/DMS concurrently by not supporting Firefox development and B ) Because this is the forum where we're apparently offered expert help with our individual customization projects, of which this is one.

 

Thanks.


Edited by mrmiyamoto, 01 April 2014 - 01:35 PM.


#9 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 01 April 2014 - 03:54 PM

You can still use firebug in firefox - nothing is stopping you there. Firebug lite is somewhat ok for this but i tend to open Firebug in firefox and pull the CSS selectors and code from there.

 

We do not provide help customizing your site. We provide help with PageLines Products and features. We help to use the Sections and features and help to get bugs fixed etc. 

 

CSS is used to style to site beyond the standard features and we do not provide in depth support for this. 

 

There are lots of communities online dedicated to helping with code and in particular CSS> 



#10 mrmiyamoto

mrmiyamoto

    Member

  • Members

  • 25 posts
  • Framework Version:2.0
  • Country: Country Flag

Posted 01 April 2014 - 04:06 PM

You can still use firebug in firefox - nothing is stopping you there.

 

Okay, I guess I misconstrued the purpose of the Customization forum then, thanks for the info.  Not being able to run the DMS editor at all in Firefox is most certainly hampering the process, though -- I'll try spoofing my useragent and see where that gets me.  Thanks again for the clarifications.


Edited by mrmiyamoto, 01 April 2014 - 04:06 PM.


#11 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 01 April 2014 - 04:08 PM

No Problem - i assure you we are working on the issue.

 

You can ask for help with code you have tried in the customizations forum but we do not style your site for you. you need to do the leg work as it were. 

 

Understanding the CSS issue is hampering efforts. 

 

There are a few work around on all the forum posts. 







Also tagged with one or more of these keywords: navbar, height