WordPress.org

Ready to get started?Download WordPress

Forums

Pinboard
[resolved] customizing header in pinboard theme (16 posts)

  1. scgupta
    Member
    Posted 1 year ago #

    First of all, thank you for developing this wonderful theme.

    I just built a small personal website. I consolidated and migrated my web presence from blogger and various google sites/pages into a single wordpress website. So I am not a business, and don't have logo etc., neither I plan to put ads in header. So I would like to get rid of the space taken up by header above the Nav Bar.

    Is there any Custom CSS that can remove the Name of the site from the header and move the social icons and search box to Nav Bar?

    If that is not possible, is it possible to reduce height of the header, Nav Bar, Footer through custom CSS (like http://fundersandfounders.com/ have done, but they modified they modified the theme; and though they have published the theme at Github, their theme changes are more suitable for their visual blog, rather than my mostly text site)?

    Thanks,
    +satish

  2. paul.a.cunn
    Member
    Posted 1 year ago #

    To make the correct suggestion do you have a link or a screenshot of your site?

  3. scgupta
    Member
    Posted 1 year ago #

    Link to my site: http://www.satishchandragupta.com

    I have added following custom CSS:

    #site-title {
    display: none;
    }

    #social-media-icons {
    position: absolute;
    right: 35px;
    top: -50px;
    }

    #header #searchform {
    position: absolute;
    right: 175px;
    top: -50px;
    }

    But I suspect this is probably not the best way to solve this. For example: 1) if I move search box to the right most and after the social icons with absolute coordinates, clicking on it messes up the whole thing 2) if I reduce the browser window to mobile size, social icons, search doesn't show up (but without this custom CSS, those are shown).

    I don't know web programming. I will fail any test for html5, css, JavaScript. I am just browsing through style.css and then trial and error.

    I can remove this custom css if that would make it easier to help me.

    Thanks,
    +satish

  4. paul.a.cunn
    Member
    Posted 1 year ago #

    1 & 2) These issues are happening because you are using absolute positioning.

    In order to remedy this I would like you to try removing all the css you added for the social media icons and the header search form. Keep the site-title css. Then go to "Appearance" Then Editor In the top right menu select "Pinboard." Then find the "Header.php" File. Then find the php listed below and make the change. All I am doing is moving a "div class="clear" to go after the menu bar so that it will display perfectly. Then paste the css into your css sheet and voila!

    php before

    <div class="clear"></div>
    	<nav id="access">
    		<a class="nav-show" href="#access">Show Navigation</a>
    		<a class="nav-hide" href="#nogo">Hide Navigation</a>
    		<?php wp_nav_menu( array( 'theme_location' => 'primary_nav' ) ); ?>
    		<div class="clear"></div>
    		</nav><!-- #access -->

    php after

    <nav id="access">
    		<a class="nav-show" href="#access">Show Navigation</a>
    		<a class="nav-hide" href="#nogo">Hide Navigation</a>
    		<?php wp_nav_menu( array( 'theme_location' => 'primary_nav' ) ); ?>
    		<div class="clear"></div>
    		</nav><!-- #access -->
      <div class="clear"></div>

    css

    #social-media-icons {
    margin-top: 9.5px;
    }
    
    #header #searchform {
    margin-top: 9.5px;
    }
  5. scgupta
    Member
    Posted 1 year ago #

    Hi Paul,

    Thanks a ton, that fixed it. I made that simple change in header.php and kept only following of my old css
    #site-title {
    display: none;
    }
    And added your css. And it works perfect :-) Thanks again.

    Is there a simple css so that clicking on a social icon results into opening the link into another tab/window (effect similar to <a target="_blank").

    regards,
    +satish

  6. paul.a.cunn
    Member
    Posted 1 year ago #

  7. scgupta
    Member
    Posted 1 year ago #

    Thanks a lot for your help.
    +satish

  8. redwren
    Member
    Posted 1 year ago #

    Hi Paul, I'm trying to figure this out as well.

    The only way I've figured out to move the access nav to the top is by moving the code in the header.php.

    I incorporated your revisions as to the Div Class Clear & CSS
    but that's not working for me. I'm missing something? Do the searchform and social media icons have to be rearranged in the code somewhere?

    I want the social media icons and search form to appear at the top right on the nav area. Thanks for any help! my site: http://savvymakeup.com/andmore/

    Here is the code I'm using right now that I've revised ( in my child theme) header.php :

    <body <?php body_class() ?>>
    	<div id="wrapper">
    		<header id="header">
    			<nav id="access">
    				<a class="nav-show" href="#access">Show Navigation</a>
    				<a class="nav-hide" href="#nogo">Hide Navigation</a>
    				<?php wp_nav_menu( array( 'theme_location' => 'primary_nav' ) ); ?>
    				<div class="clear"></div>
    			</nav><!-- #access -->
    		<div class="clear"></div>
    			<<?php pinboard_title_tag( 'site' ); ?> id="site-title">
    				<?php if ( ( '' != get_header_image() ) &&  ( false != get_header_image() ) ) : ?>
    					<a href="<?php echo home_url( '/' ); ?>" rel="home">
    						<img src="<?php header_image(); ?>" alt="<?php bloginfo( 'name' ); ?>" width="<?php echo ( pinboard_get_option( 'retina_header' ) ? absint( get_custom_header()->width / 2 ) : get_custom_header()->width ); ?>" height="<?php echo ( pinboard_get_option( 'retina_header' ) ? absint( get_custom_header()->height / 2 ) : get_custom_header()->height ); ?>" />
    					</a>
    				<?php endif; ?>
    				<a class="home" href="<?php echo home_url( '/' ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
    			</<?php pinboard_title_tag( 'site' ); ?>>
    			<?php if( ! is_active_sidebar( 1 ) ) : ?>
    				<<?php pinboard_title_tag( 'desc' ); ?> id="site-description"><?php bloginfo( 'description' ); ?></<?php pinboard_title_tag( 'desc' ); ?>>
    			<?php endif; ?>
    			<?php get_sidebar( 'header' ); ?>
    			<div class="clear"></div>
    
    		</header><!-- #header -->
  9. paul.a.cunn
    Member
    Posted 1 year ago #

    @redwren your issue is a little different since you want a site-title/description area. Just for future reference you should start your own thread for this type of thing. We will probably get yelled at by the moderators. Anyways Before Replacing any php make sure to have a back up of the original which I hope you do. Also you should use a child theme for the amount of changing you want to do. If you aren't doing those two things I would highly recommend them before applying this change. Please note that I was not able to try this change on a live site so make sure that you save your current php in a notepad document or something similar so you can restore it if need be. Below I have pasted some PHP which I believe will get us to the point we need to be. Can you try replacing the php from above with the following and then save it and post a link to it so I can see what happens.

    <body <?php body_class() ?>>
    	<div id="wrapper">
    		<header id="header">
    			<?php get_sidebar( 'header' ); ?>
    			<nav id="access">
    				<a class="nav-show" href="#access">Show Navigation</a>
    				<a class="nav-hide" href="#nogo">Hide Navigation</a>
    				<?php wp_nav_menu( array( 'theme_location' => 'primary_nav' ) ); ?>
    				<div class="clear"></div>
    			</nav><!-- #access -->
    <<?php pinboard_title_tag( 'site' ); ?> id="site-title">
    				<?php if ( ( '' != get_header_image() ) &&  ( false != get_header_image() ) ) : ?>
    					<a href="<?php echo home_url( '/' ); ?>" rel="home">
    						<img src="<?php header_image(); ?>" alt="<?php bloginfo( 'name' ); ?>" width="<?php echo ( pinboard_get_option( 'retina_header' ) ? absint( get_custom_header()->width / 2 ) : get_custom_header()->width ); ?>" height="<?php echo ( pinboard_get_option( 'retina_header' ) ? absint( get_custom_header()->height / 2 ) : get_custom_header()->height ); ?>" />
    					</a>
    				<?php endif; ?>
    				<a class="home" href="<?php echo home_url( '/' ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
    			</<?php pinboard_title_tag( 'site' ); ?>>
    			<?php if( ! is_active_sidebar( 1 ) ) : ?>
    				<<?php pinboard_title_tag( 'desc' ); ?> id="site-description"><?php bloginfo( 'description' ); ?></<?php pinboard_title_tag( 'desc' ); ?>>
    			<?php endif; ?>
    
    		</header><!-- #header -->
  10. redwren
    Member
    Posted 1 year ago #

    Hello, & thanks!
    Sorry, I'm pretty new to wp forums.
    I'm using a child theme - so all is backed up etc.

    I will try your code now. I did find a FIX (my novice hack) by moving up the <?php get_sidebar( 'header' ); ?> line to first after <"header"> in my child theme header.php :

    <div id="wrapper">
    		<header id="header">
    			<?php get_sidebar( 'header' ); ?>
    			<nav id="access">

    I've just used your code now and it works also.

  11. paul.a.cunn
    Member
    Posted 1 year ago #

    Nice! Yeah that was basically the same fix I did as well. Just reordering the php so that the html was written in the right order and so that the div clear didnt make a new line. I'm glad it worked!

    Cheers!

  12. redwren
    Member
    Posted 1 year ago #

    Paul, Thank you -- Your code works!!

    here is the link using your code:
    http://savvymakeup.com/andmore/

  13. gibsonchop
    Member
    Posted 1 year ago #

    scgupta --

    Can I ask you how you have reversed the social media icons? I would like mine to hover to the grey instead of hover fro grey to color. I have searched through the get-options code, but can not find where it is placing the images into the header.

    I would appreciate the help if possible.

    Thanks

  14. paul.a.cunn
    Member
    Posted 1 year ago #

    You should start your own thread for this because it is a completely different issue. Here is the css to do want you want.

    #a.social-media-icon {
    background-position: 0 -32px;
    }
  15. scgupta
    Member
    Posted 1 year ago #

    Hi gibsonchop,

    apart from changed listed above in header.php and in Sidebar-header.php as explained in http://wordpress.org/support/topic/how-to-open-links-to-social-media-in-new-windowtab I have added following CSS in Theme Options > Layout > Custom CSS:

    #site-title {
    	display: none;
    }
    
    #header {
    	border-top: 0px
    }
    
    #social-media-icons {
    	margin-top: 9.5px;
    }
    
    #header #searchform {
    	margin-top: 9.5px;
    }
    
    a.social-media-icon {
    	background-position: 0 -32px;
    }
    
    a.social-media-icon:hover {
    	background-position: 0 0;
    }
    
    #access li.current-menu-item > a {
    	background: #2790b0;
    	color: #fff;
    	text-decoration: none;
    }
    
    #access ul a:hover {
    	background-color: #2790b0;
    	color: #fff;
    }

    Thanks,
    +satish

  16. gibsonchop
    Member
    Posted 1 year ago #

    satish,

    Thank you very much and good luck in all your endeavors.

    ciao

    ~dave

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic