Flow Tags Into 3 Columns and Add Bullet

  • Alan,

    You have given so much and ask for so little that maybe this bit of code you can play with and maybe add to this great plugin.

    I have way to many posts to try and show all of the tags in one page so I show them by the Alphabet, but with the current setup it would only appear in one big long list.

    What I wanted was to flow the content into 2, 3 or 4 columns so that anyone looking for a tag or title will be able to look through them easier.

    After looking and experimenting for days I finally found some code that works on my site.

    Here is a link to my site showing Alan’s plugin in with the additions I wanted in the page.

    https://www.ethingstodo.com/tag-index/?mctm-page=A

    For the code I just went into the CSS for Alan’s Plugin and added this at the bottom.

    #mcTagMap ul {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    }

    #mcTagMap li::before {
    content: “\2022”; /* Add content: \2022 is the CSS Code/unicode for a bullet */
    color: black; /* Change the color */
    font-weight: bold; /* If you want it to be bold */
    display: inline-block; /* Needed to add space between the bullet and the text */
    width: 1em; /* Also needed for space (tweak if needed) */
    margin-left: -1em; /* Also needed for space (tweak if needed) */
    }

    Alan, I am not a programmer so if any of this is bad coding and can hurt a site please let me know.

    If it is ok, it is yours to use with your plugin as you please.

    Thanks for everything,

    David

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author tugbucket

    (@tugbucket)

    Interesting I guess I didn’t apply the multi column code for multi page. I’ll add that to my list of things to do in the next update.

    It is interesting but not responsive, the letters of the categories come out too much together

    Thread Starter dtbcinci

    (@dtbcinci)

    That I did not check, thanks.

    i’m trying and i can’t

    https://frasescristianas.org/1-2/

    Thread Starter dtbcinci

    (@dtbcinci)

    Geycer,

    I am not an expert but I just looked at your site and it looks to me like it is flowing the content for A into 4 columns and the same for the rest of the Index. If what you want is just the A to appear then that is changed with the addition of a item added to the shortcode and that is found in Tugs site.

    I think what you need to add is:
    multi_page=”yes” show_navigation=”yes”

    Hope that helps,
    David

    Plugin Author tugbucket

    (@tugbucket)

    @geycer

    You are using the shortcode of:
    [mctagmap show_categories="yes" tag_count="yes"] and on your page, that is exactly what the plugin is displaying eg: categories and the count. Your CSS is displaying them in four columns. Like it’s supposed too.

    What @dtbcinci is doing is using the multi_page option where it only displays one “letter” at a time and that is not what you are doing. You can try to follow their advice or you could also try: https://mctagmap.tugbucket.net/options/responsive/

    By your page example and what you have written here, I’m not 100% sure which one would work best for your situation.

    Thread Starter dtbcinci

    (@dtbcinci)

    Tug,

    Sorry about my answer, as I did not mean to cause any problems for Geycer, just trying to help.

    On my site I just have so much content that stacking it all in one page would way to long to try and read and leaving the content even at one letter at a time, A, in one long column was not attractive to the site.

    So I went looking for a way to flow the content into 3 columns and it is working, however as Geycer pointed out my workaround is not responsive.

    I went looking again and I think I have found a responsive 3 column solution.

    I have replaced my old code with this:

    #mcTagMap .tagindex ul, #sc_mcTagMap .tagindex ul {
    -webkit-columns: 3 200px;
    -moz-columns: 3 200px;
    columns: 3 200px;
    -webkit-column-gap: 4em;
    -moz-column-gap: 4em;
    column-gap: 4em;
    }

    And here is an example page that appears to now be responsive.

    https://www.ethingstodo.com/post-index/?mctm-page=T

    Again, tug I did not mean to cause any problems and as I have posted I am not a programmer. Geycer, sorry that I gave you the wrong answer to your question.

    David

    • This reply was modified 4 years, 8 months ago by dtbcinci.
    Plugin Author tugbucket

    (@tugbucket)

    Hey David,

    You’re good. Your CSS is what I should have added years ago. I was just pointing out that @geycer shortcode wasn’t the same as yours. So it wasn’t clear exactly their goal. I was just adding another option.

    On your original request, look at: https://mctagmap.tugbucket.net/advanced-usage/multi_page-and-responsive/

    It essentially incorporates your new CSS and using column-width to achieve responsiveness.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Flow Tags Into 3 Columns and Add Bullet’ is closed to new replies.