Minnow theme: how to replace social link icons with regular text, centered?

  • Unknown's avatar
    talksoverlatte · Member ·

    Hello,

    I would like to keep links where the social menu is – right below the header, centered.

    However, right now, with the Minnow theme, there is a sliding menu sidebar that appears when you click the top right. I’d like to get rid of that and only have a menu centered below the header.

    Does anyone know how to do this with CSS?

    Thank you!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    talksoverlatte · Member ·

    I realized what I wanted wasn’t clear:

    Instead of WordPress icons, I would like text that says “about” “home” “travel”, etc, instead of pictures.

    Thank you

  • staff-happychia · Staff ·

    The WordPress icons below the header is designed to be the social menu, each icons pointing to social media service like facebook, twitter etc. But you configured those links to point to your own blog pages and category pages so the icons default to WordPress icons.

    Anyway, if you wish so, here is the CSS:

    First hide the menu toggle so your visitors can’t see it :-) 

    button.menu-toggle {
    display:none;
}

    Then override the styles for each social icon with the following styles. 

    #menu-item-11 a:before, #menu-item-12 a:before, #menu-item-13 a:before, #menu-item-14 a:before, #menu-item-15 a:before,
#menu-item-16 a:before, #menu-item-17 a:before, #menu-item-18 a:before {
background: #FAFAFA;
color: black;
font-family: inherit;
}

#menu-item-11 a:before {
content: 'Home';
}

#menu-item-12 a:before {
content: 'About';
}

#menu-item-13 a:before {
content: 'Beauty';
}

#menu-item-14 a:before {
content: 'Fashion';
}

#menu-item-15 a:before {
content: 'Food';
}

#menu-item-16 a:before {
content: 'Lifestyle';
}

#menu-item-17 a:before {
content: 'Travel';
}

#menu-item-18 a:before {
content: 'Culture';
}
  • staff-happychia · Staff ·

    Hiding the menu toggle is perhaps not a good idea because you have a few widgets in the sidebar. There is no other widget area in this theme other than the sidebar. Hiding menu toggle also blocks the access to widgets.

    Also I found that the menu toggle only appears if we select a Primary Menu from Dashboard > Appearance > Menus > Manage Locations tab.

    So I can set an empty menu as a Primary Menu and then use custom CSS to hide the MENU header that appears as the first item on the sidebar. That way, you still have access to widgets yet have only one menu under the header title.

    Let me know what is your preference so we can arrange things accordingly :-)

  • Unknown's avatar
    talksoverlatte · Member ·

    Thank you so much! We activated the theme and your css code on our blog: http://talksoverlatte.com (the previous one was a test site).

    We love it and really, really appreciate your help.

    Do you happen to also know how to increased the width for the content, and remove the underline on tags (left of the content?)

    Thank you!

  • staff-happychia · Staff ·

    You are welcome. Glad to be of service :-)

    First the easy one: remove the underline on tags.

    media="all"
.entry-meta a {
text-decoration: none;
}
  • staff-happychia · Staff ·

    Increase the width of the content:

    media="all"
@media screen and (min-width: 68em)
.content-area {
margin-left: auto;
margin-right: auto;
max-width: 90%;
}

    Adjust the max-width and pick the % that feels right for you.

  • Unknown's avatar
    talksoverlatte · Member ·

    Thank you! I don’t know if I’m doing anything wrong :( I added those two codes and it doesn’t seem to be affecting anything.

  • staff-happychia · Staff ·

    My bad.

    Let’s try the following corrected styles:

    .entry-meta a {
text-decoration: none;
}

    and

    @media screen and (min-width: 68em) {
.content-area {
margin-left: auto;
margin-right: auto;
max-width: 90%;
}
}
  • Unknown's avatar
    talksoverlatte · Member ·

    Hi! That worked perfectly! I’m sorry to have to keep asking you all these questions…

    I have one more: how can I make all my images responsive to the width of the content? Right now, my text is fine, but my images are still smaller than the content area, leaving awkward white spaces. I even changed my image properties on wordpress to “full size” on this post: http://talksoverlatte.com/2014/12/16/williamsburg/ and aligned it to center.

    thanks in advance! we really, really appreciate your help!

  • staff-happychia · Staff ·

    No problem. You can ask any number of questions. I am here, like many other volunteers, to help the WordPress community in whatever way I can :-)

    It seems white space is a problem only in case of adjacent images. Single images are fine, I reckon.

    Did you try resizing the images in the post editor? What happens if you click on the image and drag by the edges to resize?

    I really don’t have any solution for this.

  • Unknown's avatar
    teamogundo · Member ·

    Thank you for all the tips!
    I wil try to apply it to mine :)

    I am new to CSS (and to wordpress)- how did you add your logo? how have you changed the color of the text titles on each post?

    You version of MINNOW looks really good!

  • Unknown's avatar
    talksoverlatte · Member ·

    I think I figured it out – not sure why, but when i set the custom size to width=1200px, it just naturally fills out the content space; this didn’t work when i set the size to full size, even if it were bigger than 1200 px.

    Teamogundo – thank you! We are excited about our blog :) There’s a logo option in the customizable section! http://allaboutbasic.com/2012/09/05/wordpress-com-theme-twenty-twelve-theme-modification-modify-headerfooterfontsitebartitles-using-css/ this is a good starter for how to modify themes with CSS!

  • staff-happychia · Staff ·

    Today I learned that we can specify the dimensions in pixels for large, medium and thumbnail sizes in the respective fields in the Dashboard > Settings > Media screen.

    I am not sure but could you specify the pixel values there and see if it helps.

  • Unknown's avatar
    teamogundo · Member ·

    thanks it’s ok our CTO has time to do it :)
    Good luck all!

  • The topic ‘Minnow theme: how to replace social link icons with regular text, centered?’ is closed to new replies.