WordPress.org

Ready to get started?Download WordPress

Forums

Pinboard
[resolved] how to adjust Pinboard site title and social book marks (17 posts)

  1. maprado
    Member
    Posted 1 year ago #

    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.

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

    Do you have a link to your site?

  3. maprado
    Member
    Posted 1 year ago #

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

  4. maprado
    Member
    Posted 1 year ago #

    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

  5. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    Use a Custom CSS plugin to hold your CSS modifications.

  7. maprado
    Member
    Posted 1 year ago #

    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

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

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

    #header .clear,
    #site-title .home {
     position: absolute;
     left: -9999em;
    }
  9. maprado
    Member
    Posted 1 year ago #

    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

  10. maprado
    Member
    Posted 1 year ago #

    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?

  11. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  12. maprado
    Member
    Posted 1 year ago #

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

  13. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  14. maprado
    Member
    Posted 1 year ago #

    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

  15. maprado
    Member
    Posted 1 year ago #

    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%; }

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

    Change your first css to this

    a.social-media-icons, #social-media-icons {
    position: absolute;
    top: -50px;
    right: 0;
    }
  17. maprado
    Member
    Posted 1 year ago #

    Hi Paul
    it worked really well.
    many thanks

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic