SportsEngine Community Forum
Register Latest Topics
 
 
 


Reply
  Author   Comment  
jmarcus

Junior Member
Registered:
Posts: 9
Reply with quote  #1 
Is their any CSS code to hide the thumbnail picture that appears beside each news article in the news aggregator? 
0
docnzok

Moderator
Registered:
Posts: 47
Reply with quote  #2 
jmarcus

Im sure I can whip up something.  Can you send me an example page link that has the image that you do not want to show please.

Thanks

Mark
0
jmarcus

Junior Member
Registered:
Posts: 9
Reply with quote  #3 
Website link: http://www.dcsaasports.org.prod.sportngin.com/page/show/3453073-home. The photos under DCSAA News. 


0
docnzok

Moderator
Registered:
Posts: 47
Reply with quote  #4 
Ok, so here is what is going on in the aggregator. There are a couple different ways to do it, and some simpler but this solution I think keeps it easy for you.

Here is my original aggregator and what the aggregator looks like after the CSS I built

Screen Shot 2017-06-23 at 10.53.57 AM.png           Screen Shot 2017-06-23 at 10.53.00 AM.png 

So we are hiding the image, moving the News Item Headline, Article Details and Teaser Text over to compensate for the missing image.

NOTE THAT I DID NOT MOVE ANY OF THE ARTICLE CONTENT OVER. (You can see the "Click here to.." in the last article is still centered as it is in the news item itself.

So, add the following CSS to the Single Head Code for the single page.  I would not add this to cascading as it may interrupt any other news items that are scattered throughout the site.

.expanded .newsItemHeader > a img {
    display: none;
}

.newsAggregatorElement .articleHasImage .newsItemHeader {
    padding-left: 10px;
}
.newsAggregatorElement .articleHasImage > h4 {
    padding-left: 10px;
}

Let me know if that works out for you.  If not, I can work it a little more, but I think you are showing the least amount of text in the aggregator so it should work fine.

Mark


0
jmarcus

Junior Member
Registered:
Posts: 9
Reply with quote  #5 
I added the code with and without the "style" tags and it did not work. It added the code to the top of the website. Screenshots attached. 


shot_2.png  screenshot.png 

0
docnzok

Moderator
Registered:
Posts: 47
Reply with quote  #6 
So add <style> to the top of that code and </style> to the bottom of the code.

Sorry forgot to add that
0
jmarcus

Junior Member
Registered:
Posts: 9
Reply with quote  #7 
Thank you, that did work. Look at the screenshot.... The first article had a photo and the second one did not. They are not aligned, any thoughts? 


2017-06-23_1234.png 

0
jmarcus

Junior Member
Registered:
Posts: 9
Reply with quote  #8 
I tried to use the same code on this theme and it did not work http://www.ucpsathletics.com.prod.sportngin.com/ucpsathletics
0
docnzok

Moderator
Registered:
Posts: 47
Reply with quote  #9 
Ok, let me see where it is giving that extra padding.

Just to clarify

The first article actually has an image associated with it right?
The second article does not have an image.

So I dont want to mess with the CSS of the "no-image" articles so I will try to adjust the other one to match that one.

Actually, if you want to try to do it yourself.  Just change the padding-left: 10px; to 5px and see where that lands you.

The padding-left is the amount of space that I am pushing the items over to compensate for the image 'hole'

Or I can do the code up again, but it's a good way to learn a little
0
docnzok

Moderator
Registered:
Posts: 47
Reply with quote  #10 
Regarding working on it in different themes.
Each SE theme is written in a world by itself. So the STYLE tags that we used for this theme are not going to be close to the other themes that are out there.  We would have to find the specific tags for all those elements and put them into style sheets that match the tags from that specific theme.

I know the difference between the two themes you have indicated is pretty significant.

0
jmarcus

Junior Member
Registered:
Posts: 9
Reply with quote  #11 
Decreasing the padding aligned the articles. But when I look at it on the mobile phone the space is still there. 

IMG_0483.PNG 

0
jmarcus

Junior Member
Registered:
Posts: 9
Reply with quote  #12 
Were you able to produce the code to remove the thumbnails from the news aggregator for the Nokomis theme? 

 

0
jmarcus

Junior Member
Registered:
Posts: 9
Reply with quote  #13 
Were you able to produce the code to remove the thumbnails from the news aggregator for the Nokomis theme? 
0
Previous Topic | Next Topic
Print
Reply

Quick Navigation:

Easily create a Forum Website with Website Toolbox.