Alphabetic Cat Filter- How to display horizontally?

  • Resolved FamNW

    (@famnw)


    8 years, 8 months ago

    First of all I’d like to thank you for this great plugin!

    I am really happy with it. Just one question: Is there any way to make the alphabetic cat filter appear horizontally instead of vertically?

    So like this: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

    instead of like this:
    a
    b
    c
    d
    e
    f
    g
    h
    i
    j
    k
    l
    m
    n
    o
    p
    q
    r
    s
    t
    u
    v
    w
    x
    y
    z

    I’ve tried editing the stylesheet myself, but I don’t really know a lot about CSS, so could not figure it out. I know somebody else has asked the same thing two months ago, but it seems like the issue was not resolved? I have the newest version of the plugin so I have all the new entries for the cat filter. However I don’t see where I could change it from vertical to horizontal ( The only options in the menu are to display it before the categories, before the links or before both) and I don’t know what I have to change in the stylesheet editor.

    Thanks in advance for your help!

    https://wordpress.org/plugins/link-library/

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Yannick Lefebvre

    (@jackdewey)

    8 years, 8 months ago

    Have you been using Link Library for some time? The current default stylesheet already takes care of making these items display horizontally. That being said, if you have been using the plugin for some time, you do not have the proper CSS rules to style this as you desire. Just copy the following line to your current stylesheet:

    .allcatalphafilterlinkedletter, .catalphafilterlinkedletter, .catalphafilteremptyletter, .catalphafilterselectedletter, .allcatalphafilterselectedletter {
	width: 16px;
	height: 30px;
	float:left;
	margin-right: 6px;
	text-align: center;
}

.allcatalphafilterlinkedletter, .allcatalphafilterselectedletter {
	width: 40px;
}

.catalphafilterlinkedletter {
	background-color: #aaa;
	color: #444;
}

.catalphafilteremptyletter {
	background-color: #ddd;
	color: #fff;
}

.catalphafilterselectedletter {
	background-color: #558C89;
	color: #fff;
}

.catalphafilter {
	padding-bottom: 30px;
}

    Let me know if this works and please consider donating to support this plugin’s development.

    Thread Starter FamNW

    (@famnw)

    8 years, 8 months ago

    Thanks for getting back to me so quickly!

    No, I’ve actually only downloaded it today. So I already have the code you’ve sent me in my default stylesheet. It still displays the Alphabetic CAT Filter vertically instead of horizontally.

    Do I have to change any of the settings in the menu to make it appear horizontally?

    Plugin Author Yannick Lefebvre

    (@jackdewey)

    8 years, 8 months ago

    There may be something in your general site theme that has precedence over what Link Library sets. That’s always the fun part with CSS. Can you provide a link of the page where you are trying to use this so I can see it in action and see why it’s not behaving correctly?

    Thread Starter FamNW

    (@famnw)

    8 years, 8 months ago

    Sure, the site is still under construction, but I’ll put it out of maitenance mode momentarily:

    This is the page where I want my link library w horizontal alphabetic category filter to appear:

    http://familien-nordwestschweiz.ch/stichwortverzeichnis/

    I’ve used the shortcode:
    [link-library settings=1] to insert the links

    Thank you so much for taking the time to check it out. I don’t have a lot of knowledge with CSS, so I don’t have a clue where to look for the problem..

    Plugin Author Yannick Lefebvre

    (@jackdewey)

    8 years, 8 months ago

    I see. Something is not working right and all of the styling information for Link Library is not making it to the page. Here is something to try to fix it:

    – Go to the General Settings section of Link Library
    – Enter the value 617 in the field ‘Additional pages to load styles and scripts’
    – Save general settings

    If this does not help, then I would recommend copy/pasting the Link Library stylesheet and append it to the end of your general site stylesheet, since that should get loaded correctly.

    Please consider donating to support this plugin’s development.

    Thread Starter FamNW

    (@famnw)

    8 years, 8 months ago

    Your solution with entering the value 617 in the field ‘Additional pages to load styles and scripts’ worked like a charm!

    Thank you very much for your help. I’ll definitely donate to support the plugin’s development in the future.

    Cheers!

    Plugin Author Yannick Lefebvre

    (@jackdewey)

    8 years, 8 months ago

    Glad to hear it. by the way, 617 is the ID of the page on which you are displaying Link Library, in case you had not realized.

    And thanks for upcoming donation! Cheers!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Alphabetic Cat Filter- How to display horizontally?’ is closed to new replies.