zenpage - archive view

I asked this in a previous post, but we moved onto other issues.

On the 'Archive View' page the 'Gallery Archive' is displayed as 1 long column. Is it possible to change this to 2 or 3 columns to reduce the length of the display?

OR

Is it possible to keep the display as 1 column and have the 'Popular Tags' displayed in a second column next to it?

I appreciate that the right-hand sidebar menu may cause problems.

log in as 'test-user' with 'test123'

Comments

  • fretzl Administrator, Developer
    This is about the shortest archive view I can think of...

    In your style.css file look for "Archive View" (around line 885)

    Replace all properties between "Archive View" and "Tag Cloud" with this:
    `
    ul.archive,
    ul.archive * {
    padding: 0;
    margin: 0;
    list-style: none;
    font-weight: normal;
    }

    ul.archive {

    }

    ul.archive .year {
    font-weight: bold;
    width: 115px;
    display: inline-block;
    vertical-align: top;
    }

    ul.archive .archive-active a {
    color: black;
    }

    #archive h3 {
    font-size: 15px;
    letter-spacing: 0.1em;
    }
    `
    You could also experiment with columns.
    https://www.w3schools.com/cssref/css3_pr_columns.asp
  • Thanks,that is much better and it will look 'Tidier' when more of my photos have been dated and tagged.

    It is showing in 4 'columns' is it possible to make it 5 so that the space between the 'columns' and the sidebar menu is used up?

    I had already looked at w3schools but none of my attempts were as good as your solution.

    Edit
    I have got 5 'columns' by altering the width from 115 to 100

    Finally is it possible to reduce the size of the 'tag cloud' by increasing its width?

    Thanks for your help and support :)
  • fretzl Administrator, Developer
    In your style.css find the section that begins with "Tag Cloud".

    Change
    `
    #tag_cloud {
    text-align: center;
    background: #eee;
    }
    `
    to
    `
    #tag_cloud {
    width: 860px; /* adding a fixed width */
    text-align: center;
    background: #eee;
    }
    `
    And add this to get a decent padding:
    `
    #tag_cloud ul {
    padding: 10px 30px;
    }
    `
  • Excellent!!

    Thank You :)
  • acrylian Administrator, Developer
    Just to note: w3schools is not always the best source. This one is far better as more accurate:
    https://developer.mozilla.org/en/docs/Web/HTML/Reference
Sign In or Register to comment.