Edits to homepage/news feed structure

  • Author
    Posts
  • #2631560

    zacheryhenry
    Member

    A couple of questions…

    1) Is there a way to create multiple columns on my home page (i.e. more than just the single column down the middle)?

    2) Is there a way to change the headline font color for certain linked posts, but not all? I may want to, on occasion, change breaking news to red font vs. the current black font.

    3) Is there a way to re-position my search box (in footer) to top right corner of page?

    4) Is there a way to remove the “Link” text next to the date above each post? I’d prefer it to just have the date or be exempt altogether.

    Hitting you geniuses with a lot all at once. In no rush.

    I cancelled my upgrade to CSS until I need to use it. Thanks for the help!

    The blog I need help with is grandstandnews.com.

    #2631627

    zacheryhenry
    Member

    Disregard question 1 if it’s too difficult. I’m considering just creating a static page with links to each category page (in which case I would need the CSS to remove the category headers on the sub-pages). Still could use help on questions 2-4. Thanks!

    #2631639

    Hi,

    2) Is there a way to change the headline font color for certain linked posts, but not all? I may want to, on occasion, change breaking news to red font vs. the current black font.

    This can be done. It requires that we use the unique post CSS id and we have to target the entry-title, entry-titile a, and entry-title a:after to get the whole thing a different color. This targets the “Did Joe Know?” post.

    #post-3468.format-link .post-content .entry-title, #post-3468.format-link .post-content .entry-title a, #post-3468.format-link .post-content .entry-title:after {
        color: #cc0000;
    }

    3) Is there a way to re-position my search box (in footer) to top right corner of page?

    #searchform {
        position: absolute;
        right: 50px;
        top: 0;
    }
    #search {
        margin-top: 35px !important;
    }

    4) Is there a way to remove the “Link” text next to the date above each post? I’d prefer it to just have the date or be exempt altogether.

    Yup, we can do that.

    .format-link .entry-format, .format-link .sep {
        display: none;
    }

    #2631640

    zacheryhenry
    Member

    You’re awesome! Thanks.

    Just out of curiosity… would there have been a way to do #1? Working on a static page now, but if there was a way to divide columns on page (by category), I’d be interested.

    #2631641

    zacheryhenry
    Member

    So the “Search” box did what it was supposed to do by relocating to top right, but if you search for a term (example: paterno), it will display two search boxes on the results page – one covering the website title. Any idea why? It only does this on the results page.

    #2631642

    Oh, interesting. If you look at the opening body HTML tag on the search results page, you will see that there is a CSS class of “search-results” that is defined. We can use that with a bit of CSS3 trickery to exclude the search box relocation on the search results page. Change that code I had given to the following.

    body:not(.search-results) #searchform {
        position: absolute;
        right: 50px;
        top: 0;
    }
    body:not(.search-results) #search {
        margin-top: 35px !important;
    }

    #2631649

    zacheryhenry
    Member

    When I share my posts (example: https://grandstandnews.com/2016/05/11/sanders-attacks-clinton-a-disaster-for-democrat-party/#respond), it becomes difficult to find out where to click to read the actual story. Hint: click the image.

    If you look at the homepage (https://grandstandnews.com/), it’s easy to either click on the image or the main headline to follow the story. My problem is that when I share the article on social media, it takes them to the actual POST. This removes the link from the post headline, since the actual link is embedded in the image.

    Are there any CSS tricks that will allow me to type in the body of the post “Source: (link)” without that appearing on the main home page? Right now I just want the image and the image caption to appear on the home page. I don’t want “Source” and a link to muddy up the main page. But I’m perfectly fine with it appearing on the actual post page for clarification on where to go to read the story. Thanks!

    #2631650

    The first thought that occurs to me would be to add a CSS class to hide the link on the main page of your site, and then you would put this above your “Read More” tag in the post and edit the text and link as desired. The CSS below would not affect the single post pages.

    <p class="hide-link">Source: <a href="LINK_URL">Source Name</a></p>

    .blog .hide-link {
    display: none;
    }
    #2631651

    zacheryhenry
    Member

    Hmm. This didn’t seem to work. Am I missing something? I’m not entirely sure if I did it right.

    #2631652

    I’m not seeing the “read more tag in the Sanders Attacks… post, or the link. Which post did you do this to? I’m also not seeing the CSS I gave above.

    #2631656

    zacheryhenry
    Member

    Okay. I included the CSS and edited the Sanders post to include link. Still appearing on home page and post. I just want it to show on post, not home page. I’m not sure what the “Read More” tag is.

    #2631657

    zacheryhenry
    Member

    Apologies! Figured out what the “Read More” tag was that you were referring to (still learning). That seems to have helped.

    When I click on the “Read the rest of this entry ยป” on homepage, it scrolls me down to the link on the article. Any way to edit that link to just the article and not the “read more” tag in the article?

    #2631658

    zacheryhenry
    Member

    Hah. Nevermind. Just realized what that CSS code was you provided. Now that it is hidden, no one will ever have to click the “Read More” – genius. Gracias!

    #2631659

    Hooray!

    The Read More will auto scroll to just below the read more tag, and there isn’t a way to change that with CSS.

    #2631660

    zacheryhenry
    Member

    I’m worried that relevant news could quickly become buried on my home page. Any thoughts on an earlier question about three columns? I think page width will allow three columns, if the margins were removed. Right now there are wide margins on both sides of central page timeline. Any CSS that could solve this? Thoughts?

    #2631661

    Zachery, you can give this a try and see what you think.

    .blog #site-wrapper, .blog #core-content, .blog #footer {
        width: 1200px;
    }
    .blog #core-content {
        -moz-column-count: 3;
        -moz-column-gap: 40px;
    }
    .blog .hentry {
        page-break-inside: avoid;
        margin-bottom: 70px;
    }
    .entry-content pre {
        white-space: pre-wrap;
    }

    #2631662

    zacheryhenry
    Member

    I’m not sure if the “moz-column” code is working. It definitely took care of the wide margins, but it doesn’t appear to have broken the content into columns.

    #2631663

    Oh shoot! I forgot to include the other code on those rules for the other browsers. Let’s give this a try. I’ve included all the code again.

    .blog #site-wrapper, .blog #core-content, .blog #footer {
        width: 1200px;
    }
    .blog #core-content {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
        -moz-column-gap: 40px;
        -webkit-column-gap: 40px;
        column-gap: 40px;
    
    }
    .blog .hentry {
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        margin-bottom: 70px;
    }
    .entry-content pre {
        white-space: pre-wrap;
    }
    #2631664

    zacheryhenry
    Member

    That worked! Thanks.

    Okay, a few questions.

    First, how are these being ordered? By column, or left to right? I think it would be confusing if it isn’t left to right. For instance, the Rubio post (top – second column) was posted almost a week ago. I think it could become confusing for readers if posts at the top of the page were days/weeks old, while the second one in the first column was posted same day. Any fix?

    Second, is there a way to remove the date line located above each post? I think with three columns it may just add to the clutter.

    Finally – and I think this could be solved by changing to the “left to right” format – is there a way to keep each post title/headline locked to a grid? That way it looks a little cleaner on the page.

    Thanks so much for your help. I think this will look great!

    #2631665

    First, how are these being ordered? By column, or left to right? I think it would be confusing if it isn’t left to right.

    Oh, good point! There is another trick way to do this, but the problem is that it has only limited support in IE10 and no support at all before that, and IE8 and 9 account for about 6% browser share worldwide, and about 3% total in the US, so I’m still reluctant to use it at this time.

    Let me work on this. We may have to go back to a more “old-school” solution on this.

The topic ‘Edits to homepage/news feed structure’ is closed to new replies.