Icon list with delivery info

Support
#1

Hi support.
Im trying to make an icon list with some delivery information under my slider in the x theme Gym demo.
how do i do that?

Hope you can help me.

this is how it looks now:

This is how i want it to look.

#2

Hi Jakob,

You can use the Classic Feature Box element for this:

All you have to make sure is to set the Horizontal Alignment option to Left.

Then you will get this result:

Hope this helps.

#3

Hi Jade.
Thanks, thats kind of what i wanted, but is there a way to change the font and the font size and import my own icons to the Feature box?

Thanks.

#4

Hi Jakob,

It’s not currently possible to have custom icons, the classic elements are only limited to its predefined icons.

Thanks!

#5

Hi Support
So there is no way in X to get an icon or image next to a text like in the example i’ve showed???

#6

Hey Jakob,

Our apologies for the confusion. Yes, it is possible. You just need to adjust the Graphic Spacing value of the Feature Box element.

It is 20px by default but you can change it to any value.

Hope this helps.

#7

Hi Support.

Thank you, but if i can’t change the font and line space between the headline and content -the graphic spacing won’t help me much - Are there any other way, maybe besides the Feature Box, to achieve what i’ve showed in the exampel???

Thanks.

#8

Hi Jakob,

To achieve similar effect, try adding the following CSS rule into your X -> Theme Options -> CSS area and adjust it further accordingly.

.x-feature-box {
    width: 300px;
    float: left;
}

Please note that custom development is outside the scope of our support. Issues that might arise from the use of custom styling and further enhancements should be directed to a third party developer.

Thanks!

#9

Hi Jakob,

Sorry, I only saw the previous query you have which is to change the spacing between the image to the text.

There is no out of the box option that is available in the Feature Box element to change the font and the font size of the heading and the box content. However, there is a workaround which is to add a custom CSS.

Firstly, what you will need to do first is to assign a common class to each feature box element with the same structure. Let’s say the class you assign to them is styled-featured-box.

Now, you can write the CSS code and make use of the class to target the feature box element specifically.

The selectors you will need to use in order to target the heading text is .styled-featured-box .x-feature-box-content .x-feature-box-title and for the text content is .styled-featured-box .x-feature-box-content .x-feature-box-text.

Then please use the font-family and font-size CSS attributes to change the font and the font size of the elements.

So to get you started, the code for the feature box title would be:


.styled-featured-box .x-feature-box-content .x-feature-box-title {
    font-family: 'Arial';
    font-size: 20px;
}

You may add further customization to the code above.

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps you get started.

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.