Jump to content

Archived

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

richardc

Reduce Height of Page Header

Recommended Posts

Aires+    258
Aires

Hi,

The height of the header is the same size of the image you used for the background so maybe going with a image that wasn't as big will make the header smaller. 

  • Like 2

ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
richardc    0
richardc

Sorry, that does not work.

 

Could someone please help.

 

Thanks

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

When you say that does not work, could you give us some more information regarding this and a link to your site please?


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
GetMeWebDesign+    115
GetMeWebDesign
When you adjust the height of the header, the position of your title will remain the same, so code to adjust that included
 
/*Adjust height of header*/
#pageheaderuc9rewp {
  height: 100px;
}
/*vetical position of text content*/
#pageheaderuc9rewp .pl-area-pad.fix .pl-ph-container .pl-content {
  padding: 26px 0;
}
 
Current height default min is 172px. You might like this as a Chrome extension https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn

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

Hi,

The height of the header is the same size of the image you used for the background so maybe going with a image that wasn't as big will make the header smaller. 

If you just use a background colour (ie not image height) it defaults to 172px

 

Question... Should I always use the Americanism 'color', as that is used in code, or stick to using correct English 'colour' LOL 


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

Hi Richard,

 

The PageHeader section uses a specific height, changing it or overriding it, will cause some styling issues. If you want to have a section be a specific height, what I would do is, use the Canvas section upload your image there and set the height to 100pixels, remember the option only requires the numeric value so input 100 and not 100px.

 

Then add a MediaBox and add the following HTML <h2>Terms & Conditions</h2>

 

As you can see, I have both sections in my screenshot below, the top section is the Pageheader section which has a height of 172px and the one below it, is the Canvas/MediaBox sections which has a height of 100 pixels.

 

https://cloudup.com/ceNL8fDnZ-U

  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
richardc    0
richardc

Ok, thanks Danny.

 

You solution would mean that I would have to change the title of every page manually correct?

 

R

Share this post


Link to post
Share on other sites
GetMeWebDesign+    115
GetMeWebDesign

Hi GetMeWebDesign thanks for the info but this too has not worked :(

 

e.g. http://www.birchwoodfx.com/terms-conditions/

 

Is there anyone who can resolve this on the pagelines team?

 

Thanks

Richard

Sorry was targeting that specific PageHeader and assumed you had used it in the header regime so it would be site wide. Danny is more correct than I am, but you still wanted to target the way I suggested, then add further id's separated but commas ie: 

 

/*Adjust height of header*/
#pageheaderuc9rewp, #pageheader********  {
  height: 100px;
}
/*vetical position of text content*/
#pageheaderuc9rewp, #pageheader******** {
 .pl-area-pad.fix .pl-ph-container .pl-content {
    padding: 26px 0;
  }
}
  • Like 1

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

Using Danny's method, you could save it as a custom section. Add to the pages you want it, and unlock it (the padlock in the section editor navbar, top left) so that you could replace the text between the <h2></h2>, much in the way that you change the text now for each page, but within the PageHeader Title 


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

OK, if you want to dynamically generate your Page title, then you should replace the MediaBox with PLNextBox and add the following code:

 

the_title( '<h2>', '</h2>' );

 

Then check the following options - https://cloudup.com/ccJDjytDiqv

 

Along with the following inline styling - https://cloudup.com/c-Kx7SfKqGj


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
richardc    0
richardc

That works! Thanks Danny :D

Share this post


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

No problem.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
dgsarnow+    0
dgsarnow

Danny PLNextBox is restricted to club members. Is there anyway to do this without it?


WordPress 4.1.1

DMS2 2.1.9.3 running Skeleton Basic Child Theme

Share this post


Link to post
Share on other sites

  • Similar Content

    • wyo22ski
      By wyo22ski+
      Hello,
       
      I'm basically a designer and understand a little on how to change CSS, etc., so please excuse my ignorance...  I recently upgraded to the newest platform from the DMS and my old DMS theme no longer functions.  I'm trying to replace the image slider that my Horizon Photography Theme (Nick Haskins) had created.  The Impulse image slider seemed the closest to what I need, but there are problems.
      It seems the the Impulse section for sliding images defaults to the image width, no the height.  I can change the Impulse stage height and width, but this does nothing to the internal content.  For instance, if I change the height to 200 pixels, the image remains the full width and only shows a cropped section.  I would like the ability to change the Impulse height, and have the image height fit space. 
      I've put this custom CSS in, but again, this only controls the stage height of Impulse:
      .pl-sn-impulse .pl-impulse-cell .cell-wrap, .pl-impulse-container, .owl-stage-outer {
        width: 100%;
      }
       
      Any suggestions welcome.  Thanks 
    • Samuel Costa - UDF
      By Samuel Costa - UDF+
      Hi. I made this site: www.arvoredacidadania.org.br. In the part Quem Somos and Serviços I used different configurations (1 container and 2 texts side by side; 2 containers: each one with text; or just two texts side by side).
      The problem is the height. I tried CSS, etc, but when i change the width, change the height also.
      Any ideas?
      This picture is the example how i need to do.
      I need both textboxs with the same height.
      Regards.

    • Lisa Haran
      By Lisa Haran+
      Hi 
      I have a map here http://www.iloveoffset.com/maps/
      I want to add several pointer locations to the map, but when I do they do not appear.
      On this map there are 2 pointer locations and as you can there is only one visible.
      Earlier today I added 7 and could only see 4 so there is something odd going on.
      My theme is up to date
    • clj182
      By clj182+
      Hello,
      I've been having trouble unlocking the template section for past couple of weeks. When I try clicking nothing happens. 
      I've deleted my custom css and removed plugins. Im down to having only the following plugins:
      Akismet
      Contact Form 7
      DMS Professional Tools
      Pagelines Updater
      WooCommerce
      It was working fine before i have no idea what's going on with it.
    • flourishdesignstudio
      By flourishdesignstudio
      My DMS 2 site http://www.heart-stone.com/ will not save any new custom css... I can still edit templates and publish those but any custom css that I enter never saves.
      All WP files, themes, and plugins are up to date. 
      Any thought about what might be causing this?
×