Categories Layout? Help please

[Spidiman]

Hi,

How can create categories layout like in this picture please (attached file)

Many thanks! 




[gelöscht durch Administrator]

[ColinM]

Hi
At the moment I am in the process of updating all the layouts to work in a more responsive manner.
There is a four column one that I have quickly edited to add in the description which gives a view like the one attached.  It is not the same layout as you would ideally like but it is reasonably close.  To get one just as you would like depends on your CSS knowledge.  You could use the attached as an example to get you to a 2 column version - remember to change the 4 to 2 in the Layout control section

You will also need to add the css below  into your jd_custom.css file  - see documentation articles if you are not sure how to do this. There is a specific field "Number of columns" in layout.  I have exported this layout in a zip file attached. You will need to extract the enclosed xml file and import it using the option in the Categories Layout page, the version attached is the pre-release version of the 4 column example using a div rather than a table structure.

NOTE if you need to change the CSS classes then please change the names as otherwise you may get them overriden when we actually release the new more responsive layouts.

You will see that in the layout there are 4 'items of info' in each of the 5 blocks.  So you could reduce it to only 2 items of info in each of the 5 blocks, and change Number of Columns to 2.  If this is OK the create a new layout by save and copy. 

To get what you want the next step is to 'transpose' the arrangement with only two blocks each with five items of info with the contents of each block to have one of each information type  that is the first block would now contain separate <div>'s with {cat_pic1}, {cat_title1} and so on. The second block would have {cat_pic2}, {cat_title2} and so on.Edit See next item in Forum The CSS may well need to be modified as you show items in a specific placement and there are some alignments needed.
EDIT: forgot to add files first time!!!
Colin
PS when the new layouts are available please remind me and I will endeavor to do a proper version with all the relevant css. If you have succeeded then please share your results and the details.

Code Select Expand

/* 4 column categories use width at 25% (4 times 25% = 100%) Must also have "box-sizing: border-box;" added to include padding and any border within the width*/
.jd_cats_4col {
   float: left;
   width: 25%;
   text-align:center;
   word-wrap: break-word;
   padding-left:0 3px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
.jd_cats_4col_wrapper {
   width: 100%;
   padding-top: 5px;
   border-bottom: 1px dashed #bbb;
}

[gelöscht durch Administrator]

[ColinM]

Hi
It was more 'interesting than I thought.  So I have nearly completed a 2 column layout
  See examples below.  I prefer the second one.

Colin

[gelöscht durch Administrator]

[ColinM]

Hi
There is a better 2 column layout file attached below
  You need to add the CSS as follows into your jd_custom.css file.  I have also included this in the new layouts but have not yet uploaded to the Downloads.
Colin

Code Select Expand

/* 4 column categories use 4 times 25% so "box-sizing: border-box;" added to include padding and any border within the width*/
.jd_cats_4col {
   float: left;
   width: 25%;
   text-align:center;
   word-wrap: break-word;
   padding-left:0 3px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
.jd_2col_inner_wrapper {
  vertical-align: top;
  border: 0px none;
  overflow: hidden;
  width:50%;
  display: inline-block;
  box-sizing: border-box;
  padding-left: 5px;
}
.jd_cats_2col {
   text-align:left;
   word-wrap: break-word;
   padding:0px 3px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   vertical-align: top;
}
.jd_cats_2col_left {
   display: inline-block;
   float: left;
}
.jd_cats_2col_wrapper,
.jd_cats_4col_wrapper {
   width: 100%;
   padding-top: 5px;
   border-bottom: 1px dashed #bbb;
}
.jd_cats_2col_wrapper {
  display:inline-block;
}


[gelöscht durch Administrator]