Alignment / Navigation Help – Fictive Theme

  • Unknown's avatar
    stacysnotes · Member ·

    Appreciate help how to:
    1. reduce the spacing between connect with me sharing buttons and my email address posted. (side navigation). (is there a better way/place to show my email address prominently?)
    2. make the left side navigation aligned. Some of it is left justified. some center. It looks awful.
    3. reduce some spacing between each section on the navigation. Want to tighten it up a little bit (left side)

    unrelated to alignment/navigation:
    how do i add “like” each post. Is that different than “share” posts which I show social media icons now, but want to add the Facebook “like” to my blog too.

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there,

    1. reduce the spacing between connect with me sharing buttons and my email address posted. (side navigation). (is there a better way/place to show my email address prominently?)

    You can use the following CSS and then adjust the top margin and bottom margin values (what I have shown are what they are now) to move it up closer, but spambots continually scan the internet looking for email addresses to… pester? I would suggest turning your email address into a link to your contact form instead so that all contacts will be scanned by the Akismet and weed out the spambots for you. 

    #widget_contact_info-4 {
    margin-top: 40px !important;
}
#text-7 {
    margin-bottom: 10px;
}

    2. make the left side navigation aligned. Some of it is left justified. some center. It looks awful.

    The following should align things in the left sidebar for you. 

    #text-7 .textwidget, #widget_contact_info-4 .confit-address, #blog_subscription-17 #subscribe-blog, #facebook-likebox-4 {
    padding-left: 24px;
}

    3. reduce some spacing between each section on the navigation. Want to tighten it up a little bit (left side)

    Are you talking about in the menu at the top, or all the things in the sidebar when you say each section of the navigation? Right now you have the following in your custom CSS, and the 40px top margin is responsible for the spacing between the widgets. You can reduce that to tighten up spacing between the widgets. 

    #secondary .widget {
    color: #fff;
    margin-top: 40px;
}

    If you wish to tighten up the spacing in the content within the widgets, you can add the following and then adjust as desired. 

    .widget ul li {
margin-top: 24px;
margin-bottom: 24px;
}

    You can set where the Likes button will appear by going to Settings > Ratings in your dashboard.

  • Unknown's avatar
    stacysnotes · Member ·

    thank you for your help! I’m still having an issue in centering the “pages” in left navigation and “connect with me” section (is not lined up). Can you take a look and help me improve? Great tip re: email address. Trying to fix that and have it link to contact page.

  • Unknown's avatar
    stacysnotes · Member ·

    Hi. I updated the navigation since posting, but still having issues with alignment plus more…
    The search box is not lined up. help.
    The Facebook box has too much white space. how to fix?
    The email icon under my tagline doesn’t look like email (which I link to my contact form). can i make it an email icon?
    (or am i better off adding text box that says “email me” and link it?
    also, how do I add “Facebook like” icon next to each post…isn’t that different than “sharing” icon? Appreciate your time!!!

  • Unknown's avatar
    thesacredpath · Member ·

    For alignment of the like box and follow widgets, add the following to your CSS. 

    .widget_facebook_likebox iframe, .widget_blog_subscription form {
    margin-left: 24px;
}

    If you want to center the labels in the menu on the left, add this. 

    .menu a {
    text-align: center;
}

    For your link to the contact form, you can link text or you can find an email icon image and link that to your contact page. For more information on doing that, see these support pages.

    Text Widget Links
    Linking Images

    For the height on the FB likebox, add the following. 

    .widget_facebook_likebox iframe {
    max-height: 70px;
}

    On the search box, I’m seeing it aligned with everything else in the sidebar right now.

    One other note, you have two #secondary .widget rules in your custom CSS. Delete one of them since one has a 40px top margin and the other has a 10px top margin. Figure out which you want to keep and delete the other.

  • Unknown's avatar
    stacysnotes · Member ·

    thanks so much for your help!

    How do I fix the teal color that is showing on mobile and tablet experience but not on desktop. I don’t want that color showing on mobile/tablet views.

    Also, How do i improve readability of the navigation. everything on left side navigation is white and sections run into each other. How would you suggest I improve? change color? not sure how.

    How do I add “like” button next to each post. I have sharing buttons but that’s different than people “liking” it. correct? how to add?

    How do you make “follow” blog pop up or stand out more? friends are visiting blog but not subscribing as they don’t realize. Thoughts?

  • Unknown's avatar
    stacysnotes · Member ·

    Another question… I added “follow the conversation” in my navigation instead of a like box since I have zero followers at this time.
    How do i align that text box with the rest of the items in left navigation. (would it look better if centered?) Should I have both – social media icon to follow and a like box? Or do they serve same purpose?

    How to reduce spacing above/below the follow conversation section?

    Do you recommend other wording to get people to connect via social media rather than “join the conversation”?

    Is there a better way to visually represent “follow blog” in navigation, so people follow when they visit. Appreciate help to implement, and advice.

    Can you check my css and ensure I have the right items in there based on changes made.

  • Unknown's avatar
    thesacredpath · Member ·

    Hi,

    How do I fix the teal color that is showing on mobile and tablet experience but not on desktop. I don’t want that color showing on mobile/tablet views.

    Add this and edit the color as desired. 

    .menu-toggle {
    background-color: #6f9d9f;
}

    Also, How do i improve readability of the navigation. everything on left side navigation is white and sections run into each other. How would you suggest I improve? change color? not sure how.

    Give the following a try which places a slightly transparent white background on the left navgiation/widget area. The first 3 numbers are the RGB color 255 255 255 is white) and the 0.9 is the opacity. The closer to 1, the more opaque. It still lets the background show through a little. 

    .site-header {
    background: rgba(255, 255, 255, 0.9);
}

    How do I add “like” button next to each post. I have sharing buttons but that’s different than people “liking” it. correct? how to add?

    You can activate the like button at Settings > Sharing as explained in this section of our Sharing support page.

    How do you make “follow” blog pop up or stand out more? friends are visiting blog but not subscribing as they don’t realize. Thoughts?

    For those not logged into WordPress.com, or those that do not have a WordPress.com account, the follow button will always be at the bottom right of their browser window. For those that are logged into WordPress.com, the follow button is in their admin bar at the top of their browser window. If you wanted to make it more obvious, you could change the color and make the font contrast more and bold, something like this. 

    #bit a.bsub {
    background-color: #cc0000;
    color: #fff;
    font-weight: bold;
}
  • The topic ‘Alignment / Navigation Help – Fictive Theme’ is closed to new replies.