Jump to content

Archived

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

ucscdsp

Resizing logo and Centering Columns

Recommended Posts

ucscdsp    0
ucscdsp

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
Jake    74
Jake

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

  • Like 1

Have you searched the forums yet or checked out the DMS user docs?

PageLines geek, blogging at MyUntangledLife.com

Share this post


Link to post
Share on other sites
davidcosgrove    1
davidcosgrove

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
GetMeWebDesign+    115
GetMeWebDesign

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


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
davidcosgrove    1
davidcosgrove

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
GetMeWebDesign+    115
GetMeWebDesign

.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


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
davidcosgrove    1
davidcosgrove

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
batman    389
batman

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


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
davidcosgrove    1
davidcosgrove

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
GetMeWebDesign+    115
GetMeWebDesign

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 


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
GetMeWebDesign+    115
GetMeWebDesign
.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 
  • Like 2

Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
batman    389
batman

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
  • Like 2

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
GetMeWebDesign+    115
GetMeWebDesign

batman... are you racing me?


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
batman    389
batman

GetMeWebDesign

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

:)

  • Like 1

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
GetMeWebDesign+    115
GetMeWebDesign

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


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
davidcosgrove    1
davidcosgrove

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
Danny    1,327
Danny

Thanks for informing us the issue has been resolved.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
gregoryj77    0
gregoryj77

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

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
Danny    1,327
Danny

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
gregoryj77    0
gregoryj77

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

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Can you provide the code you have used please.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×