• 0
Sign in to follow this  
Followers 0

Resizing logo and Centering Columns

Question

Posted · Report post

Hey, I'm not sure if this is the right place to put this but I'm using the DMS free version and I was wondering where I can access the code to make the logo larger in this pictureLogo.png

and make the titles of thse columns centered? 

Footer-Center.png

Any help would be great! Thanks

Share this post


Link to post
Share on other sites

21 answers to this question

  • 0

Posted · Report post

.section-navi .navi-container {
  height: your desired height px;
  padding: 7px;
}
 
And image should just resize to fill.
 
You will probably then want to muck around with position of the  navi items... font size, margins and padding 
2 people like this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi ucscdsp - To make your logo in the navbar bigger you'll want to put in custom code like:

 

.navbar .plbrand img {max-height: xxpx;} (the default is 29px so anything bigger than that will increase the size of the logo)

 

To center the widget titles use:

 

.widget .widget-title, .widget .widgettitle {text-align: center;}

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I'm using DMS2 - where would this code be entered to increase the logo size, into the DMS LESS Fallback section?  Thanks.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

davidcosgrove You can add it there or in the DMS live editor "</> Custom". If you add to the latter, then press Cntrl + Return to preview it live

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

GetMeWebDesign thank you!  I tried adding .navbar .plbrand img {max-height: 200px;} to the Custom field but no luck (please see screenshot).

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

GetMeWebDesign thank you again for your help!  I did as instructed but the logo size did not change - here is a short video of what I did and refreshing the page didn't change the size - http://davidcosgrovesandbox.com/pagelines1.mp4

 

Thanks again.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi davidcosgrove

Please, first you can try with

 

.pl-content img {
    max-height: 200px;}

 

Also, you can try use a Child theme to write the CSS rules, for me this is the better way

This is a Danny´s Child 

https://github.com/Dannyholt/skeleton

You need to install this and then you can write the rules in the "style.css"

http://screencast.com/t/q2s1yTZfO2iX

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi batman thank you that made the logo larger :)

 

The whole top nav section though should ideally match the height of the image so the logo - how can I increase the height of the top nav section to match the logo height?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

davidcosgrove Off the top of my head... I am sure if you change the height of the navi, the image resizes to fit accordingly... will have a quick look at one of my sites which had the same requirement 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi davidcosgrove

I´m not sure, your site is in maintenance mode ... but try with

 
.section-navi .navi-container {
    height: 4em;
    padding: 9px;
}
 
Change 4em and 9px as you like
2 people like this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

batman... are you racing me?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

GetMeWebDesign

I never compete my friend .... I always lose

:)

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

If you dont compete, how can you know? It's not the winning that is enjoyable, it is the taking part...

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

GetMeWebDesign"] that worked perfectly.  @[member="batman thank you for your help too!  Just getting used to DMS2, more tweaking ahead!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for informing us the issue has been resolved.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hello,

This isn't working for me. I put: 

.section-navi .navi-container {
  height: your desired height px;
  padding: 7px;
}
into "custom styling classes" box under Navi edit screen? 
 
Thanks. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hello,

This isn't working for me. I put: 

.section-navi .navi-container {
  height: your desired height px;
  padding: 7px;
}
into "custom styling classes" box under Navi edit screen? 
 
Thanks. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Have you actually changed height: your desired height px; and added your height value or is this what you're using ?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Yeah, I had changed the height to various heights and nothing changed. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Can you provide the code you have used please.

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  
Followers 0