Jump to content


Photo

iBlogPro 6 iHeader Navigation Home icon customize

iBlogPro iHeader Navigation home_icon customize

Best Answer Danny , 07 September 2014 - 03:07 PM

Try adding something like this (may require additional CSS):

 

#site .section-iheader .homebutton > li:hover {
  background-color: rgba(0, 0, 0, 0);
  background-image: inherit;
  background-repeat: no-repeat;
  background-position: center center;
}
Go to the full post


  • Please log in to reply
30 replies to this topic

#1 jotaro

jotaro

    Member

  • Members

  • 29 posts
  • Country: Country Flag

Posted 29 August 2014 - 04:39 AM

How can I put customized Home icon for iHeader Navigation?



#2 Danny

Danny

    Is Awesome!

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

Posted 29 August 2014 - 01:15 PM

Hi,

 

I apologise, but I am not entirely sure what section you're referring to when you say iHeader ?



#3 jotaro

jotaro

    Member

  • Members

  • 29 posts
  • Country: Country Flag

Posted 29 August 2014 - 01:24 PM

This part.

 icon.jpg



#4 Danny

Danny

    Is Awesome!

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

Posted 31 August 2014 - 09:00 AM

I apologise, for some reason I thought you were referring to the PinsPro theme and not iBlogPro, not sure why I assumed this. Anyway, to add your own icon/image you're going to need to use custom CSS:

 

/* This hides the icon */

.homebutton .icon-pagelines {
display: none;
}
/* Add your image CSS here */
.homebutton { ... }


#5 jotaro

jotaro

    Member

  • Members

  • 29 posts
  • Country: Country Flag

Posted 01 September 2014 - 03:13 AM

where and which directory should I put my custom icon image?

 



#6 Danny

Danny

    Is Awesome!

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

Posted 01 September 2014 - 10:55 AM

You can upload your image anywhere you link, as long as you use the correct path in your CSS. I would say it would be best to upload via the media library in your WordPress admin dashboard.



#7 jotaro

jotaro

    Member

  • Members

  • 29 posts
  • Country: Country Flag

Posted 02 September 2014 - 06:03 AM

I did put custom CSS as you showed me, however nothing is happened.



#8 Danny

Danny

    Is Awesome!

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

Posted 02 September 2014 - 08:55 AM

The code I gave you will not add a custom image, it will only hide the icon, you need to add your custom CSS to display your custom image.

 

/* Add your image CSS here */
.homebutton { Add your image CSS here }


#9 jotaro

jotaro

    Member

  • Members

  • 29 posts
  • Country: Country Flag

Posted 03 September 2014 - 09:06 AM

/* This hides the icon */

.homebutton .icon-pagelines {
display: none;
}
 
I put this to custom LESS/CSS box, however the home button and default icon does not hide.


#10 Danny

Danny

    Is Awesome!

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

Posted 03 September 2014 - 10:35 AM

Try this:

 

/* This hides the icon */
#site .homebutton .icon-pagelines {
display: none;
}


#11 jotaro

jotaro

    Member

  • Members

  • 29 posts
  • Country: Country Flag

Posted 03 September 2014 - 10:49 AM

I tried it but the default  icon is still there.

 

pageline_forum1.jpg



#12 Danny

Danny

    Is Awesome!

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

Posted 03 September 2014 - 10:57 AM

Can you provide a link to the site in question and make sure the code you have added is still active, so I can see this issue myself.



#13 jotaro

jotaro

    Member

  • Members

  • 29 posts
  • Country: Country Flag

Posted 03 September 2014 - 11:00 AM

the site is not open for public. you need user name and password. how can I provide them to you?

 



#14 Danny

Danny

    Is Awesome!

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

Posted 03 September 2014 - 11:03 AM

You can send me a private message.



#15 jotaro

jotaro

    Member

  • Members

  • 29 posts
  • Country: Country Flag

Posted 03 September 2014 - 11:16 AM

I sent it.



#16 Danny

Danny

    Is Awesome!

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

Posted 03 September 2014 - 11:30 AM

I have changed the code slightly and it appears to be working now.



#17 jotaro

jotaro

    Member

  • Members

  • 29 posts
  • Country: Country Flag

Posted 03 September 2014 - 11:49 AM

Thanks. Then, I should put my custom icon as you told me earlier?
 

 

One more thing, I'd like to align the width of both slider image and navigation menu bar.

 

The slider image width is 1100 px and navigation menu bar is 1068 px now.

 

How could I do this?

 

pagelines_forum2.jpg


Edited by jotaro, 03 September 2014 - 11:51 AM.


#18 Danny

Danny

    Is Awesome!

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

Posted 04 September 2014 - 10:23 AM

To add your own image, you will need to inspect the element using Chromes dev tools and then find that menu items unique ID. When you do, you can use that ID to style that menu item only. From here, you can make it a different color to the rest or even add your own image.

 

To remove the space on either side of your header, you will want to remove the padding, you can do this by adding the following code:

 

#pl_areaua0476 .pl-content {
padding-left: 0;
padding-right: 0;
}

  • jotaro likes this

#19 jotaro

jotaro

    Member

  • Members

  • 29 posts
  • Country: Country Flag

Posted 04 September 2014 - 10:28 AM

I got it! Thank you so much, Danny. 

 



#20 Danny

Danny

    Is Awesome!

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

Posted 04 September 2014 - 12:46 PM

No problem and do you see in the code what I have done?

I have inspected the section which has a unique ID, all sections have a random ID which can be used to prefix your custom CSS to target that section. Then you just apply the other element classes to the CSS and then add your styling.


  • jotaro likes this





Also tagged with one or more of these keywords: iBlogPro, iHeader, Navigation, home_icon, customize