Jump to content

Archived

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

warrenbuys

Masthead CSS

Recommended Posts

warrenbuys

Hi Guys,

 

Does anyone know how to edit the padding within the masthead section and the appropriate CSS for it? I have managed to identify and edit most of the padding areas within the Masthead section however there is one particular area, the padding between the bottom of the button and the bottom of the overall Masthead area that I cannot seem to adjust.

 

Basically I want to remove most of the padding to around 5-10px however so far been unsuccessful.

 

Any help is always appreciated

 

Cheers

Share this post


Link to post
Share on other sites
Rob

Can you point me to the page where this exists?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
warrenbuys

Hi Rob,

 

Sure, here is a link and also an image to show exactly where I am looking to edit. There are 3 Masthead sections on the page and wishing to have it universally apply to all 3.

 

http://goo.gl/O6kOeQ

 

 

Share this post


Link to post
Share on other sites
Danny

Hi,

 

Add the following to your custom CSS.
 

#site .section-masthead .pl-section-pad {
margin-bottom: 0;
padding-bottom: 0;
}
 
#site .mastlinks {
margin: 0;
}
 
In future, I recommend you use Chromes web dev tools to inspect the element to find the correct CSS rules for you to customize.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
warrenbuys

Hi Rob,

 

Thanks for the assitance, that did the job.

 

I do use Chromes web dev tools as you would of seen as I had already made some adjustments to the section I just needed help with the correct code.

 

Cheers

Share this post


Link to post
Share on other sites
Rob

Excellent!


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
eileenmc

I'd  like to customize the font in the masthead section. How can I do this?

Share this post


Link to post
Share on other sites
Danny

You will want to target the masthead title and tag classes, then use your own CSS rules and use the font-family property.

 

For example:

 

.masthead-title, .masthead-tag {
  font-family: "Times New Roman", Times, serif;
}
 
However, you may depending on whether you're using a Child theme or not, need to prefix your code with the #site or #page override ID.
 
For example:
 
#site .masthead-title,
#site .masthead-tag {
  font-family: "Times New Roman", Times, serif;
}

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
TheSEOGuru

Hi Danny,

 

After reading your response, I copied and pasted

 

 .masthead-tag {

  font-family: "Times New Roman", Times, serif;
}
 
to DMS Toolbar → </> Custom Code → Custom LESS/CSS Editor. Typed in "masthead-tag" in custom css classes input box(for the masthead), refreshed the page, no new changes.

 

Then I copied and pasted from http://docs.pagelines.com/tutorials/section-area-styling

 

/* green background, white text */

                .my-green-area {

                 background-color: #51A351;

                 color: white;

  }

 

Typed in "my-green-area" into custom css classes input box and still no green masthead background color. What am I doing wrong?

Sorry for the different colors and font sizes, editor will not let me make changes.

 

My pagelines experience: 1 step forward, 2 steps backwards

Share this post


Link to post
Share on other sites
Danny

TheSEOGuru - Can you please create your own topic please regarding this issue, as the original post wasn't related to CSS issues.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

×