Jump to content


Photo
- - - - -

Header customization issues

header social icons navbar branding

Best Answer Danny , 05 November 2013 - 10:21 AM

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


  • Please log in to reply
23 replies to this topic

#1 kostan

kostan

    Member

  • Members
  • PipPip
  • 25 posts
  • LocationBelgrade, Serbia
  • Country: Country Flag

Posted 02 November 2013 - 09:32 PM

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.pageline...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. 



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 02 November 2013 - 10:12 PM

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.pageline...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.



#3 kostan

kostan

    Member

  • Members
  • PipPip
  • 25 posts
  • LocationBelgrade, Serbia
  • Country: Country Flag

Posted 02 November 2013 - 11:13 PM

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. 



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 03 November 2013 - 12:19 AM

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.



#5 kostan

kostan

    Member

  • Members
  • PipPip
  • 25 posts
  • LocationBelgrade, Serbia
  • Country: Country Flag

Posted 03 November 2013 - 12:39 AM

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. 



#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 03 November 2013 - 12:44 AM

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?



#7 kostan

kostan

    Member

  • Members
  • PipPip
  • 25 posts
  • LocationBelgrade, Serbia
  • Country: Country Flag

Posted 03 November 2013 - 12:54 AM

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



#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 03 November 2013 - 01:04 AM

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.



#9 kostan

kostan

    Member

  • Members
  • PipPip
  • 25 posts
  • LocationBelgrade, Serbia
  • Country: Country Flag

Posted 03 November 2013 - 01:11 AM

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


Edited by kostan, 03 November 2013 - 01:12 AM.


#10 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 03 November 2013 - 01:27 AM

Try adding this code, to see if it helps:

 

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



#11 kostan

kostan

    Member

  • Members
  • PipPip
  • 25 posts
  • LocationBelgrade, Serbia
  • Country: Country Flag

Posted 03 November 2013 - 02:57 PM

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, 03 November 2013 - 02:59 PM.


#12 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 03 November 2013 - 04:22 PM

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">



#13 kostan

kostan

    Member

  • Members
  • PipPip
  • 25 posts
  • LocationBelgrade, Serbia
  • Country: Country Flag

Posted 03 November 2013 - 04:54 PM

Nope, it still looks the same :( 



#14 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 03 November 2013 - 06:12 PM

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.



#15 kostan

kostan

    Member

  • Members
  • PipPip
  • 25 posts
  • LocationBelgrade, Serbia
  • Country: Country Flag

Posted 03 November 2013 - 06:21 PM

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. 



#16 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 03 November 2013 - 06:25 PM

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.



#17 kostan

kostan

    Member

  • Members
  • PipPip
  • 25 posts
  • LocationBelgrade, Serbia
  • Country: Country Flag

Posted 03 November 2013 - 06:39 PM

Ok, I understand. Thanks anyway. 



#18 Danny

Danny

    Is Awesome!

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

Posted 04 November 2013 - 10:21 AM

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.



#19 kostan

kostan

    Member

  • Members
  • PipPip
  • 25 posts
  • LocationBelgrade, Serbia
  • Country: Country Flag

Posted 04 November 2013 - 06:04 PM

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, 04 November 2013 - 06:06 PM.


#20 Danny

Danny

    Is Awesome!

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

Posted 05 November 2013 - 10:21 AM   Best Answer

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.






Also tagged with one or more of these keywords: header, social icons, navbar, branding