• 0
Sign in to follow this  
Followers 0

Header customization issues


Question

Posted · Report post

Hi, I am trying to build a travel blog for some time and when I discovered that DMS version is released decided to switch from the old PageLines to DMS. But there are a few things which are bothering me, I didn't find a solution so far so I decided to ask here. Should I also add that I am the absolute beginner in WP, here is the link to the website: www.putografija.com So let's start from the header.

 

First of all, I haven't found the way how to position the logo correctly (in the previous version of PageLines it worked automatically). I have tried a few times to align the logo to the left side but there is always free space on the left. Also, there is a huge space above and below it which is even a bigger problem. Logo is cropped correctly, I mean there is no transparent space on any of its sides. So the result is the huge gap between the logo and both navigation bars and as well on the left side. Any ideas how to solve this? Also, I don't see the option how could the logo be linked with the site URL. Probably I should also add that header is consisted from two columns (right one is empty so far), while logo is inserted through the Highlight section (also tried as a MediaBox and it looked even worse).

 

Further, I tried to add social icons on the right side as described here: http://docs.pagelines.com/tutorials/creating-a-branding-area but is simply doesn't work. Probably this is because I don't understand where the code should be pasted but so far I managed to add the social icons that work correctly but they look shitty and are vertically placed... Sorry but I really needed to ask as I simply don't know how to resolve this. 

 

Finally, a few things which I also noticed in the old PageLines but never asked here: is there a way to change the blue color of the "shade" of hovering buttons from the main navigation bar? Also, there is one more thing: obviously both WP this template are designed mainly for English speaking users and sometimes the options for changing certain things into other languages are a real headache. For instance, how the text "Search" from the Search box could be changed?

 

Finally I hope that my questions are within the forum regulations. I have asked a few questions here as I am stuck for months so I hope that someone will be willing to help me here. Thanks in advance. 

Share this post


Link to post
Share on other sites

23 answers to this question

  • 0

Posted · Report post

That's because the image in wrapped inside <p> tags, therefore, the <p> tag has margin-top and margin-bottom. To remove the margin-top from your image, use the following code.

 

#mediaboxvvpu8u p {
margin-top: 0;
}

In regards your social icons, from the looks of it, you have added any CSS/LESS which is provided on the docs, page. I recommend you read through the instructions again.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hello Kostan,

 

If you used the MediaBox, that has a default padding and margin, which you may want to adjust.

#header .pl-area .pl-section .pl-section > .pl-section-pad {
    margin-bottom: 0em;
    padding: 1px;
}

Adjust the code above as desired.

 

Did you create a custom class called the-media? If so, it has a margin of 21px.  That seems to be custom coded into the element, and isn't default code. It could be in the settings for the container.   The logo link is created with standard HTML as described in http://docs.pagelines.com/tutorials/creating-a-branding-area.  The basic code is provided.  Don't change the class.

 

For the social icons, that same link provides the CSS code which must be placed in Custom Code or in a child theme or PageLines Customize style.css.   The social media links (inside the div tags) goes into a TextBox.  Everything else is provided. You just have to create the links needed.

 

Are you trying to get the logo to appear flush left with the browser screen? 

 

Changing the color of the sub-menu background colors is achieved with code like that below, also added to Custom Code.

.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu li.current-menu-item > a {
    background-color: #F7A834;
    background-image: -moz-linear-gradient(center top , #E3D0B4, #F7A834);
    background-image: -webkit-linear-gradient(top,#E3D0B4, #F7A834);
    background-image: -o-linear-gradient(top,#E3D0B4, #F7A834);
    background-repeat: repeat-x;
    color: #FFFFFF;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
}

Just change the colors specified above to those you like.  Remember, the color on the left is the lighter shade, and the one on the right is the darker one.  Keep them consistent for all browsers.

 

As for the language of the search field, there are several forum posts hear discussing that.  If you search "forums" for "Search", you'll probably find one that will answer your question.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Rob, thanks a lot for the swift reply and really useful tips. I will need some time to implement everything you are suggesting but so far logo looks better and the link works. But there is still a problem with the spacing above and below it. So if I understand correctly it could be resolved by pasting the appropriate code somewhere within the MediaBox editor. 

 

Also thanks for providing me the code for the navigation bar, it works.

 

Regarding search field, I already found a few useful topics, sorry but I didn't noticed them before. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I think the spacing above and below may be related to some setting in either the MediaBox or the containing column in which it resides.

 

Glad things are getting better.  I'm sure you'll get the site looking perfect very soon.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi, thanks. I think Media Box adds space above and below automatically. When you go to MediaBox Min Height (px) and press the button with two arrows it shows the whole field with the logo on it and the space above and below it as its integral part. But I don't see the option for decreasing/eliminating it. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

The min-height setting box should have a 0  (zero) in it. That will override the min-height default settings.  Can you see that field?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Yes, I already tried with this but nothing changes, the same empty space remains up and down 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Somewhere you have some code in your image code:

 

<div class="the-media fitvids pl-centered center hentry" style="margin-top: 21.5px;">

 

We don't create anything called the-media, or fitvids, so I can't imagine where that's coming from.

 

Also, the MediaBox has a 30px min-height still set.

 

You might want to try using a TextBox in place of the MediaBox.  That's what I use.

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

Hmm, strange. I can try with uploading a new logo. With Text Box the same problem appears. 

Edited by kostan

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Try adding this code, to see if it helps:

 

#header .the-media {margin-top: 0 !important;}

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

Well, I see no changes with this code. I tried to add a new png. file for logo and it looked properly, without the space above and below. But when I added the following code into the Text and Embed HTML field (<a class="logo" href="http://www.putografija.com/"><img src="[pl_site_url]/wp-content/uploads/2013/11/Logovecaslovadole.png" alt="My Logo"></a>) the same problem occured again. 

Edited by kostan

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Try it with the straightforward link, without the bracketed code.

 

In otherwords <img src="http://www.putografija.com/wp-content/uploads/2013/11/Logovecaslovadole.png" alt="My Logo">

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Nope, it still looks the same :( 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Kostan, 

 

I am running out of ideas.   Tens of thousands of people have done this, successfully.   For some odd reason you're having rather unique issues.  I cannot log into your site since you're not a subscriber.  

 

I'm not sure what to do for you.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Yes, I am aware of this, It must be some stupid thing but I can not find out what it is. If you want I can send you username and password in a PM. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

That's just it, since you're not a paid subscriber, I cannot login as I would for a premium member.  There are limits to the support given for those with the free edition.  I'm sure you understand.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Ok, I understand. Thanks anyway. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi,

 

If I understand correctly, you want your logo image to be aligned with ENGLISH O Putografiji Kontakt Menu ?

If thats so, then your issue isn't margin or padding, its related to how you have added both your logo image and the ENGLISH O Putografiji Kontakt menu. By this, I mean you have added them both to a new row, instead of them being on the same.

So what you need to do is, reduce the width of your logo image so instead of 12/12 make it 5/12 and then do the same for the ENGLISH O Putografiji Kontakt menu, instead of 12/12, make it 7/12. This should bring them together on the same row. You may need to reposition them so that they're in the correct order.

 

Regarding the social icons from the Branding article on our docs, I wrote that article and it clearly states where you add all the code to recreate it. Please read through the instructions again and I am positive you will get them working.

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

Hi Danny, 

 

Well yes, that's a good suggestion, I've just did it as you described :) But there is still a gap above and below the logo which is apparently automatically generated by PageLines, I have no other explanation. 

 

Ragarding the social icons, I have tried for several times now but they always look like this: 

 

untitled.png

 

This is when I paste first code into the text box and the second one for styling as a CSS custom code. It really looks simple and is well explained which means that I am obviouslymaking some stupid mistake again and again.

Edited by kostan

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

That's it! Thanks a lot.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No problem, happy to help!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

hi ,

i have a question. is possible to change color of the menu (fixed nav bar) and size of this nav bar? and color of the nav bar also :-)

 

i prefer style like base color is (with the color line under the link) but woul like to change the color of the bar.

 

thanx

 

Roman

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

romanondrasek

This topic has already been resolved, if you have a question please create a new topic.

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