Support » Theme: Pinboard » how to adjust Pinboard site title and social book marks

  • Resolved maprado

    (@maprado)


    Hi all

    I have been trying to resolve this problem for a while. Basically I have a few issues with my header.
    1. How can I remove the site title and tagline? I have tried adding the below to style.css under layout
    #site-title {
    display:none;
    #site-description {
    display:none;
    }

    and it removed the entire header instead of just the title and tagline.

    2. how can I get the social book marks to be on the menu bar to the right?

    I much appreciate your help.

Viewing 15 replies - 1 through 15 (of 16 total)
  • paul.a.cunn

    (@paulacunngmailcom)

    Do you have a link to your site?

    Hi Paul
    my site is http://www.creativedesire.net
    cheers

    Hi Paul
    I managed to allocate the social bookmarks on the menu bar by adding:
    a.social-media-icons, #social-media-icons {
    position: relative;
    margin-right: 10px;
    margin-top: 0;
    right: 0;
    top: 45px;
    z-index: 2;
    }

    however, I did not manage to remove the site title and now there is a gap between the header and menu bar.
    help please!!
    thanks

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    I did not manage to remove the site title

    Try:

    #site-title .home {
     position: absolute;
     left: -9999em;
    }

    The gap is caused by <div class="clear">.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Use a Custom CSS plugin to hold your CSS modifications.

    hi Andrew
    thanks for you help.
    I have applied the the code and the site title has gone which is great. however, the gap between header and menu bar still there. Any thoughts on that?
    cheers

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Do the same for <div class="clear">?

    #header .clear,
    #site-title .home {
     position: absolute;
     left: -9999em;
    }

    hi again
    I am a newbie, so I am learning as a go.
    regarding the gap, what shall I do with the code below on header.php?
    <div class=”clear”>
    thanks

    ops had not seen your last msn

    Ok, I applied the #header .clear,
    #site-title .home {
    position: absolute;
    left: -9999em;
    }
    but now the text came up the page into the slide show.

    shall I use another code?

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Yeah, when you fiddle with one element it usually messes with another element.

    So we don’t go on forever, just do this:

    #access {
     width: 96.5%;
     float: left;
     position: relative;
    }

    The gap is now caused by your social elements.

    You can resolve this by positioning absolute your social elements but that will never work well in mobile platforms within your current page structure.

    To properly resolve this, first create a Child Theme and then copy the header.php file into the Child Theme directory.

    Once you’ve done that, edit the header.php file from your Child Theme and replace its contents with the code from this PasteBin page http://pastebin.com/FstcAf4D .

    Then in your Child Theme style.css file add this:

    a.social-media-icons, #social-media-icons {
     position: absolute;
     top: 10px;
    }
    
    #access #social-media-icons a {
     width: auto;
     display: inline-block;
     width: 32px;
     height: 32px;
     margin-right: 6px;
     padding: 0;
    }

    Edit: Code amended.

    I will try that
    many thanks for your help.
    regards
    marcelo

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    You may need to move this:

    #access {
     width: 96.5%;
     float: left;
     position: relative;
    }

    Outside of your Custom CSS plugin and inside the Child Theme style.css file.

    HI Andrew
    I created the child theme but could not get the site to look good, so I edit the pinboard custom css as follow:

    a.social-media-icons, #social-media-icons {
    position: absolute;
    top: 10px;
    }

    #access #social-media-icons a {
    width: auto;
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 6px;
    padding: 0;
    }

    #site-title, #site-title img { width: 100%; }

    #site-title img {
    margin: 0;
    }

    #site-title .home {
    position: absolute;
    left: -9999em;
    }

    and now the header looks almost ok with padding on the left and social bookmarks on the left too.

    Is it possible to remove the padding and positioning social bookmark to the right top corner?
    many thanks

    hi again
    I have done a few adjustment on custom css and removed the padding.
    I will try to position the bookmark to the right top corner.

    a.social-media-icons, #social-media-icons {
    position: absolute;
    top: 10px;
    }

    #access #social-media-icons a {
    width: auto;
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 6px;
    padding: 0;
    }

    #site-title {
    margin:0;
    line-height:0;
    float:top;
    }

    #header input#s {
    margin-top:0;
    }

    #site-title img {
    margin: 0;
    }

    #site-title .home {
    position: absolute;
    left: -9999em;
    }

    #site-title, #site-title img { width: 100%; }

    paul.a.cunn

    (@paulacunngmailcom)

    Change your first css to this

    a.social-media-icons, #social-media-icons {
    position: absolute;
    top: -50px;
    right: 0;
    }
Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘how to adjust Pinboard site title and social book marks’ is closed to new replies.