Making changes to Archive pages

• 

  gotmaester · Member · Jul 21, 2017 at 12:04 pm

  • Copy link
  • Add topic to favorites

  Here is an example of a tag archive page I am working on

  https://game-of-thrones-episodes.com/tag/oldtown/

  So far, I have been able to move the body of the page to the center, to create a right column on page (which I have yet to move a widget or two into), and remove the title header: Tag archives.

  I need help doing the following:

  1. Removing the date,
  2. Changing properties of the MORE tag (which I have added text to for each post). I would like to increase the text to around 14pt and disable the link, so it appears just as regular text.
  3. Is there also a way, when I am adding text to the more tag when creating the post to make the SEASON, EPISODE bold?

  Thanks,

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

• 

  thesacredpath · Member · Jul 21, 2017 at 7:53 pm

  • Copy link

  Hi, to remove dates on all “tag” archive pages, use the following.

  .archive.tag .entry-meta {
    display: none;
  }

  Disabling links has been a bit problematic in one browser, but I can’t remember which one. I think in Chrome. You can try the following and test in Chrome, Safari and Firefox (if you have it installed). I tested FF using the web inspector and it seems to work fine though.

  .archive.tag .more-link {
    pointer-events: none;
  }

  As far as making part of the more tag text bold, simply highlight the text you want bold (probably best to do this from within the Text/HTML tab in the editor) and hit the bold button. I tested this and it seems to work just fine.

• 

  gotmaester · Member · Jul 21, 2017 at 8:14 pm

  • Copy link

  is there a way to eliminate the date, without eliminating the edit link AND without collapsing the line/container?

  Disabling the more tag seems to work fine. But I added a few lines to change color and font size to the more-link code, but without success. Perhaps these are placed elsewhere?

  .archive.tag .more-link {
  pointer-events: none;
  color: #000000;
  font-size: 12px;
  }

• 

  thesacredpath · Member · Jul 22, 2017 at 2:38 am

  • Copy link

  This would remove the date and leave the edit link.

  .archive.tag .entry-meta > a:first-of-type, .archive.tag .entry-meta .sep {
    display: none;
  }

  For the color and font size, I think we will have to do this.

  .archive.tag .entry-summary a.more-link {
    color: #000 !important;
    font-size: 12px;
  }

• 

  gotmaester · Member · Jul 22, 2017 at 2:26 pm

  • Copy link

  Thanks, as we proceed…(at least in my mind) these archive pages are beginning to take shape. Of course, that means more changes to the CSS.

  Is it possible to increase the FEATURE IMAGE about 100% (double the current size) on the archive pages and move up the title of the post so that it is flush with the top edge of the image, and the more tag (excerpt) wraps around it (which it already seems to be doing.)

  Once you give me the code, I can play around with it to make it exactly the way I want it too look. The problem is finding the right code!

• 

  gotmaester · Member · Jul 23, 2017 at 4:49 pm

  • Copy link

  Here is the progress I have made since yesterday. You can observe the following changes on this page:

  https://game-of-thrones-episodes.com/tag/701-dragonstone/?order=asc

  The only thing that I am having trouble with is increasing the size of the featured image. Since I have decreased the font size of the titles, I probably don’t wont to double the size of the images anymore, but maybe increasing them by 25-50% might work.

• 

  thesacredpath · Member · Jul 25, 2017 at 9:15 am

  • Copy link

  On the tags archive page images, we can do it, but since the software creates the image off of your original image in the side it needs for the space, the images will lose quality. Here would be the CSS to do that at a 50% increase in size (the max-width was 120px).

  .posts .post div.thumb {
    max-width: 180px;
    width: 100%;
  }
  .posts .post div.thumb img {
    width: 100%;
  }

• 

  gotmaester · Member · Jul 25, 2017 at 2:51 pm

  • Copy link

  THANKS!!! That works. I made the width 200px; do you see any problem with that change?

  https://game-of-thrones-episodes.com/tag/701-dragonstone/?order=asc

  Otherwise I will mark this thread resolved.

  Thanks, again :)

• 

  pouriya93 · Member · Jul 25, 2017 at 3:16 pm

  • Copy link

  It was useful thanks

• 

  thesacredpath · Member · Jul 26, 2017 at 3:46 am

  • Copy link

  @dnnlldd, I don’t see any issues with 200. Looking good.