Jump to content


Photo
- - - - -

Resizing logo and Centering Columns


Best Answer GetMeWebDesign , 16 May 2014 - 09:55 PM

.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 
Go to the full post


  • Please log in to reply
21 replies to this topic

#1 ucscdsp

ucscdsp

    Newbie

  • Members

  • 4 posts
  • Country: Country Flag

Posted 16 September 2013 - 04:38 PM

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



#2 Jake

Jake

    Advocate

  • Premium
  • 565 posts
  • LocationNC, USA
  • Country: Country Flag

Posted 16 September 2013 - 05:21 PM

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;}


  • Brandstedt likes this

#3 davidcosgrove

davidcosgrove

    Advanced Member

  • Members

  • 39 posts
  • LocationCT
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 16 May 2014 - 05:27 PM

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



#4 GetMeWebDesign

GetMeWebDesign

    Advocate

  • Members

  • 524 posts
  • LocationSurrey, UK
  • Framework Version:developer
  • Country: Country Flag

Posted 16 May 2014 - 06:28 PM

@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



#5 davidcosgrove

davidcosgrove

    Advanced Member

  • Members

  • 39 posts
  • LocationCT
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 16 May 2014 - 08:39 PM

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

Attached Files



#6 GetMeWebDesign

GetMeWebDesign

    Advocate

  • Members

  • 524 posts
  • LocationSurrey, UK
  • Framework Version:developer
  • Country: Country Flag

Posted 16 May 2014 - 08:54 PM

.navbar .plbrand img {

  max-height: 200px;

}

 

Which is the correct way to write it.

 

In WP Admin > Pagelines > DMS Fallback > Custom LESS

http://screencast.com/t/fakUHrOk9

 

In DMS Live Editor > </>Custom

http://screencast.com/t/iDcXnmTQm



#7 davidcosgrove

davidcosgrove

    Advanced Member

  • Members

  • 39 posts
  • LocationCT
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 16 May 2014 - 09:15 PM

@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://davidcosgrove.../pagelines1.mp4

 

Thanks again.



#8 batman

batman

    Bat Learning

  • Members

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

Posted 16 May 2014 - 09:26 PM

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



#9 davidcosgrove

davidcosgrove

    Advanced Member

  • Members

  • 39 posts
  • LocationCT
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 16 May 2014 - 09:41 PM

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?



#10 GetMeWebDesign

GetMeWebDesign

    Advocate

  • Members

  • 524 posts
  • LocationSurrey, UK
  • Framework Version:developer
  • Country: Country Flag

Posted 16 May 2014 - 09:46 PM

@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 



#11 GetMeWebDesign

GetMeWebDesign

    Advocate

  • Members

  • 524 posts
  • LocationSurrey, UK
  • Framework Version:developer
  • Country: Country Flag

Posted 16 May 2014 - 09:55 PM   Best Answer

.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 

  • Danny and batman like this

#12 batman

batman

    Bat Learning

  • Members

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

Posted 16 May 2014 - 09:55 PM

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

  • Danny and GetMeWebDesign like this

#13 GetMeWebDesign

GetMeWebDesign

    Advocate

  • Members

  • 524 posts
  • LocationSurrey, UK
  • Framework Version:developer
  • Country: Country Flag

Posted 16 May 2014 - 09:58 PM

@batman... are you racing me?



#14 batman

batman

    Bat Learning

  • Members

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

Posted 16 May 2014 - 10:04 PM

@GetMeWebDesign

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

:)


  • GetMeWebDesign likes this

#15 GetMeWebDesign

GetMeWebDesign

    Advocate

  • Members

  • 524 posts
  • LocationSurrey, UK
  • Framework Version:developer
  • Country: Country Flag

Posted 16 May 2014 - 10:26 PM

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



#16 davidcosgrove

davidcosgrove

    Advanced Member

  • Members

  • 39 posts
  • LocationCT
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 16 May 2014 - 11:11 PM

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



#17 Danny

Danny

    Is Awesome!

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

Posted 18 May 2014 - 11:24 AM

Thanks for informing us the issue has been resolved.



#18 gregoryj77

gregoryj77

    Advanced Member

  • Members

  • 30 posts
  • Framework Version:DMS2
  • Country: Country Flag

Posted 23 August 2014 - 11:06 PM

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. 


#19 gregoryj77

gregoryj77

    Advanced Member

  • Members

  • 30 posts
  • Framework Version:DMS2
  • Country: Country Flag

Posted 23 August 2014 - 11:06 PM

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. 


#20 Danny

Danny

    Is Awesome!

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

Posted 24 August 2014 - 10:58 AM

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