How can I make the subparent titles into more columns?

  • Author
    Posts
  • #1178494

    9thartwave
    Member

    Hello,

    When you touch the Artists label in my website, there is a list of names, which is quite long, imagining that more will be added. Is there an option to have them in two or more columns, or decrease their sizes, colors etc? sth like in this website

    http://www.asos.com/Women/

    thanks

    The blog I need help with is 9thartwave.com.

    #1178690

    There isn’t a way to make multiple columns in the menu system at WordPress.com as far as I know. Is there any way you can organize the artists into two different sections, such as men and women, or perhaps by the type of art (paintings, sculpture, etc.)?

    #1178693

    9thartwave
    Member

    unfortunately not as there will be much more…any way to make the letters smaller, change their font type, align them on the right etc?

    #1178695

    raincoaster
    Member

    Given the number of artists, and the likelihood that you will have more and more, I’d suggest making Posts rather than Pages for them.

    #1178696

    timethief
    Member

    I agree with raincoaster. I would create categories under each artist’s name and assign them to Posts. Pages have diddly squat when it comes to Google juice and posts have tonnes. Creating Pages with lengthy dropdowns to sub-pages is not the best navigation experience for any reader. This may be helpful > http://onecoolsitebloggingtips.com/2011/03/06/multi-author-wordpress-com-blogs/

    #1178701

    Add this to the bottom of your CSS and see what you think. You can edit the 90% font size value as desired. The first number in the padding in the second bit of CSS is the top and bottom padding for the sub menu items. It was originally 0.78571rem and I took it down to 0.38571rem. These two changes will give you some room to grow. I probably wouldn’t go much smaller on the font size, but you could take the padding down to perhaps 0.18571rem.

    At some point, you are going to have to break up the artists somehow. I don’t have access to the premium themes, but if the home page supports a sidebar, you could make a custom menu of the artists and then put a custom menu widget into that sidebar. It lists it as supporting two columns, but I just don’t know if that is also for the main home page template or not.

    nav[role="navigation"] ul.sub-menu li a, nav[role="navigation"] ul.children li a {
    font-size: 90%;
    }
    nav[role="navigation"] li ul li a {
        padding: 0.38571rem 0.28571rem;
    }
    #1178704

    9thartwave
    Member

    hello guys and thanks for your answers, although i have not understood your point. what is the difference of having pages instead of posts, for artists, as long as I want to have them under the general artists page?

    the idea is to be able to access each artist directly, without getting into any specific page, but for the top labels

    #1178705

    timethief
    Member

    Posts attract search engine attention but Pages do not because they are meant to be used for content that rarely changes. If every author’s name is a category and you publish posts with the appropriate author assigned to it as a category then the search spiders will be all over it as it’s a Post. Moreover readers click any author name category and immediately locate all the posts for that author.

    #1178708

    9thartwave
    Member

    fair enough, but this does not solve my issue about the presentation of my site…

    moreover, i need a portfolio for each artist, which i cannot create if an artist is in a post…except for that, each artist’s name appears in the posts as well

    #1178714

    9thartwave
    Member

    what exactly are the functions of the sidebar?

    #1178716

    raincoaster
    Member

    You can indeed to that: you can make sub-categories. Or you can make a Portfolio category and people can browse it comparing portfolios. Use your custom menu to link to the category pages and it will save space overall as well as be much more search engine optimized.

    #1178870

    One possibility to making the submenu in the Portfolio theme two columns would be to use the “columns” property in CSS. Here is an example to illustrate the idea:

    nav[role="navigation"] li ul.sub-menu {
    	background: #fff;
    	width: 435px;
    	height: 160px;
    	columns: 145px 3;
    	column-gap: 0;
    	-webkit-columns: 145px 3;
    	-webkit-column-gap: 0;
    	-moz-columns: 145px 3;
    	-moz-column-gap: 0;
    }
    nav[role="navigation"] li ul.sub-menu li,
    nav[role="navigation"] li ul.sub-menu li a {
    	padding: 0;
    	border: 0;
    }
    nav[role="navigation"] li ul:before {
    	display: none;
    }
    nav[role="navigation"] ul.sub-menu li:first-child,
    nav[role="navigation"] ul.children li:first-child,
    nav[role="navigation"] ul.sub-menu li:nth-child(1):last-child,
    nav[role="navigation"] ul.children li:nth-child(1):last-child {
    	border: 0;
    }

    I used Chrome 25 to test the example above. Consider the example experimental.

    You will need to adjust some of the spacing on your own. One of the other rules you already have in your custom CSS affects where the submenu itself falls.

    Note that the columns property is a CSS3 rule which has limited browser support. You should only use CSS3 rules with limited support like this if you choose to support visitors with modern, up-to-date web browsers. Even then, it’s possible some CSS3 rules will only have partial support (for example, I tried using the “column-rule-gap” property and it didn’t work in my test).

    You can find out more about the columns property from the CSS3 spec here:
    http://www.w3.org/TR/css3-multicol/

    This site shows how much browser support the rule is getting at the moment (looks like at least partial support for the main browsers across the board).

    #1178871

    Here is an additional example which doesn’t use the “columns” property but uses floats instead:

    nav[role="navigation"] li ul.sub-menu {
    	background: #fff;
    	width: 290px;
    }
    nav[role="navigation"] li ul.sub-menu li,
    nav[role="navigation"] li ul.sub-menu li a {
    	padding: 0;
    	border: 0;
    	float: left;
    }
    nav[role="navigation"] li ul:before {
    	display: none;
    }
    nav[role="navigation"] ul.sub-menu li:first-child,
    nav[role="navigation"] ul.children li:first-child,
    nav[role="navigation"] ul.sub-menu li:nth-child(1):last-child,
    nav[role="navigation"] ul.children li:nth-child(1):last-child {
    	border: 0;
    }

    You might want to take this route if you’d like to support a wider range of older web browser versions.

    #1178872

    The examples above only apply to one level of submenu.

    #1178884

    9thartwave
    Member

    many thanks, i used the first one, just one question, how can I move the whole box to go a little bit down so as not to hide the top labels?

    #1178888

    @designsimply, this is a nice solution. Saving it to my CSS goodies file. :)

    #1178891

    @thesacredpath, thank you!

    #1178892

    how can I move the whole box to go a little bit down so as not to hide the top labels?

    You’ve already made an adjustment to that in your custom CSS. If you look through what you already saved, you’ll find this:

    nav[role="navigation"] li ul {
    	top: 15px;
    }

    Try changing “top” to “padding-top”. Be careful because changing it the wrong way could disconnect it from the top menu and cause trouble.

    #1178896

    9thartwave
    Member

    perfect, many thanks

The topic ‘How can I make the subparent titles into more columns?’ is closed to new replies.