This topic has 8 replies, 2 voices, and was last updated 8 years ago ago by Olga Barlow
Do you have documentation on how to create layout with xstore ? Is it based on bootstrap or similar ?
Visual composer is too heavy and I want to create different layout like column and such.
Most themes have a reference page for that.
Where can I see ?
Hello,
Our theme based on bootstrap but unfortunately we don’t have the tutorial that you are talking about. We took into account your suggestions and we’ll try to create this. XStore theme use VC as page builder and we also created many theme elements based on VC, so if you plan to disable VC you will lose these elements.
Regards
Well, then I would just like to know the structure used for basic layouts
like div md-6 or you know …
It’s for toolset, VC is too heavy to render, things like this
<div class="vc_column-inner "><div class="wpb_wrapper"><div class="vc_row wpb_row vc_inner vc_row-fluid"><div class="wpb_column vc_column_container vc_col-sm-3"><div class="vc_column-inner "><div class="wpb_wrapper"><div id="banner-7598" class="banner banner-type-2 align-center responsive-fonts valign-middle font-style-light cursor-pointer" onclick="window.location='/wp-content/uploads/2016/10/Ovivo-MBR-2016.pdf'"><img class="" src="http://dev.mbrcentral.com/wp-content/uploads/2016/08/Ovivo-MBR-2016-230x298.jpg" width="230" height="298" alt="ovivo-mbr-2016" title="ovivo-mbr-2016"><div class="banner-content "><h2 class="banner-title">Ovivo MBR</h2><div class="content-inner"><span style="color: #ffffff;">Download PDF</span></div></div></div><style type="text/css">#banner-7598 {background-color: #5c3373;}#banner-7598 img {opacity: 0.3;}#banner-7598:hover img {opacity: 0.5;}</style></div></div></div><div class="wpb_column vc_column_container vc_col-sm-3"><div class="vc_column-inner "><div class="wpb_wrapper"><div id="banner-1942" class="banner banner-type-2 align-center responsive-fonts valign-middle font-style-light cursor-pointer" onclick="window.location='http://dev.mbrcentral.com/wp-content/uploads/2016/10/stormBLOX-2016.pdf'"><img class="" src="http://dev.mbrcentral.com/wp-content/uploads/2016/08/stormBLOX-2016-1-230x298.jpg" width="230" height="298" alt="stormblox-2016" title="stormblox-2016"><div class="banner-content "><h2 class="banner-subtitle">Stormflow Management</h2><h2 class="banner-title">stormBLOX™</h2><div class="content-inner"><span style="color: #ffffff;">Download PDF</span></div></div></div><style type="text/css">#banner-1942 {background-color: #5c3373;}#banner-1942 img {opacity: 0.3;}#banner-1942:hover img {opacity: 0.5;}</style></div></div></div><div class="wpb_column vc_column_container vc_col-sm-3"><div class="vc_column-inner "><div class="wpb_wrapper"><div id="banner-6550" class="banner banner-type-2 align-center responsive-fonts valign-middle font-style-light cursor-pointer" onclick="window.location='/wp-content/uploads/2016/10/microBLOX-2016.pdf'"><img class="" src="http://dev.mbrcentral.com/wp-content/uploads/2016/08/microBLOX-2016-230x298.jpg" width="230" height="298" alt="microblox-2016" title="microblox-2016"><div class="banner-content "><h2 class="banner-subtitle">Packaged Wastewater Plant</h2><h2 class="banner-title">microBLOX<sup>®</sup></h2><div class="content-inner"><span style="color: #ffffff;">Download PDF</span></div></div></div><style type="text/css">#banner-6550 {background-color: #5c3373;}#banner-6550 img {opacity: 0.3;}#banner-6550:hover img {opacity: 0.5;}</style></div></div></div><div class="wpb_column vc_column_container vc_col-sm-3"><div class="vc_column-inner "><div class="wpb_wrapper"><div id="banner-6939" class="banner banner-type-2 align-center responsive-fonts valign-middle font-style-light cursor-pointer" onclick="window.location='/wp-content/uploads/2016/10/EQuipTech-2016.pdf'"><img class="" src="http://dev.mbrcentral.com/wp-content/uploads/2016/08/EQuipTech-2016-230x298.jpg" width="230" height="298" alt="equiptech-2016" title="equiptech-2016"><div class="banner-content "><h2 class="banner-subtitle">Support</h2><h2 class="banner-title">EQuipTech</h2><div class="content-inner"><span style="color: #ffffff;">Download PDF</span></div></div></div><style type="text/css">#banner-6939 {background-color: #5c3373;}#banner-6939 img {opacity: 0.3;}#banner-6939:hover img {opacity: 0.5;}</style></div></div></div></div><div class="vc_row wpb_row vc_inner vc_row-fluid"><div class="wpb_column vc_column_container vc_col-sm-3"><div class="vc_column-inner "><div class="wpb_wrapper"><div id="banner-8264" class="banner banner-type-2 align-center responsive-fonts valign-middle font-style-light cursor-pointer" onclick="window.location='/wp-content/uploads/2016/10/Aerostrip-2016.pdf'"><img class="" src="http://dev.mbrcentral.com/wp-content/uploads/2016/08/Aerostrip-2016-230x298.jpg" width="230" height="298" alt="aerostrip-2016" title="aerostrip-2016"><div class="banner-content "><h2 class="banner-subtitle">Fine Bubble Diffusers</h2><h2 class="banner-title">Aerostrip<sup>®</sup></h2><div class="content-inner"><span style="color: #ffffff;">Download PDF</span></div></div></div><style type="text/css">#banner-8264 {background-color: #5c3373;}#banner-8264 img {opacity: 0.3;}#banner-8264:hover img {opacity: 0.5;}</style></div></div></div><div class="wpb_column vc_column_container vc_col-sm-3"><div class="vc_column-inner "><div class="wpb_wrapper"><div id="banner-2797" class="banner banner-type-2 align-center responsive-fonts valign-middle font-style-light cursor-pointer" onclick="window.location='/wp-content/uploads/2016/10/Transmax-2016.pdf'"><img class="" src="http://dev.mbrcentral.com/wp-content/uploads/2016/08/Transmax-2016-2-230x298.jpg" width="230" height="298" alt="transmax-2016" title="transmax-2016"><div class="banner-content "><h2 class="banner-subtitle">Diffusers</h2><h2 class="banner-title">Transmax</h2><div class="content-inner"><span style="color: #ffffff;">Download PDF</span></div></div></div><style type="text/css">#banner-2797 {background-color: #5c3373;}#banner-2797 img {opacity: 0.3;}#banner-2797:hover img {opacity: 0.5;}</style></div></div></div><div class="wpb_column vc_column_container vc_col-sm-3"><div class="vc_column-inner "><div class="wpb_wrapper"><div id="banner-9560" class="banner banner-type-2 align-center responsive-fonts valign-middle font-style-light cursor-pointer" onclick="window.location='/wp-content/uploads/2016/10/Duet-2016.pdf'"><img class="" src="http://dev.mbrcentral.com/wp-content/uploads/2016/08/Duet-2016-230x298.jpg" width="230" height="298" alt="duet-2016" title="duet-2016"><div class="banner-content "><h2 class="banner-subtitle">Fine Screen</h2><h2 class="banner-title">Duet</h2><div class="content-inner"><span style="color: #ffffff;">Download PDF</span></div></div></div><style type="text/css">#banner-9560 {background-color: #5c3373;}#banner-9560 img {opacity: 0.3;}#banner-9560:hover img {opacity: 0.5;}</style></div></div></div><div class="wpb_column vc_column_container vc_col-sm-3"><div class="vc_column-inner "><div class="wpb_wrapper"><div id="banner-3548" class="banner banner-type-2 align-center responsive-fonts valign-middle font-style-light cursor-pointer" onclick="window.location='/wp-content/uploads/2016/10/EQprotect-2016.pdf'"><img class="" src="http://dev.mbrcentral.com/wp-content/uploads/2016/08/EQprotect-2016-230x298.jpg" width="230" height="298" alt="eqprotect-2016" title="eqprotect-2016"><div class="banner-content "><h2 class="banner-subtitle">Support</h2><h2 class="banner-title">EQprotect</h2><div class="content-inner"><span style="color: #ffffff;">Download PDF</span></div></div></div><style type="text/css">#banner-3548 {background-color: #5c3373;}#banner-3548 img {opacity: 0.3;}#banner-3548:hover img {opacity: 0.5;}</style></div></div></div></div><div class="vc_row wpb_row vc_inner vc_row-fluid"><div class="wpb_column vc_column_container vc_col-sm-3"><div class="vc_column-inner "><div class="wpb_wrapper"><div id="banner-4023" class="banner banner-type-2 align-center responsive-fonts valign-middle font-style-light cursor-pointer" onclick="window.location='/wp-content/uploads/2016/10/Zeolite-2016.pdf'"><img class="" src="http://dev.mbrcentral.com/wp-content/uploads/2016/08/Zeolite-2016-3-230x298.jpg" width="230" height="298" alt="zeolite-2016" title="zeolite-2016"><div class="banner-content "><h2 class="banner-subtitle">Media</h2><h2 class="banner-title">Zeolite</h2><div class="content-inner"><span style="color: #ffffff;">Download PDF</span></div></div></div><style type="text/css">#banner-4023 {background-color: #5c3373;}#banner-4023 img {opacity: 0.3;}#banner-4023:hover img {opacity: 0.5;}</style></div></div></div><div class="wpb_column vc_column_container vc_col-sm-3"><div class="vc_column-inner "><div class="wpb_wrapper"><div id="banner-1645" class="banner banner-type-2 align-center responsive-fonts valign-middle font-style-light cursor-pointer" onclick="window.location='/wp-content/uploads/2016/10/FS-FM-2016.pdf'"><img class="" src="http://dev.mbrcentral.com/wp-content/uploads/2016/08/FS-FM-2016-230x298.jpg" width="230" height="298" alt="fs-fm-2016" title="fs-fm-2016"><div class="banner-content "><h2 class="banner-subtitle">Screen</h2><h2 class="banner-title">FS FM</h2><div class="content-inner"><span style="color: #ffffff;">Download PDF</span></div></div></div><style type="text/css">#banner-1645 {background-color: #5c3373;}#banner-1645 img {opacity: 0.3;}#banner-1645:hover img {opacity: 0.5;}</style></div></div></div><div class="wpb_column vc_column_container vc_col-sm-3"><div class="vc_column-inner "><div class="wpb_wrapper"><div id="banner-2191" class="banner banner-type-2 align-center responsive-fonts valign-middle font-style-light cursor-pointer" onclick="window.location='/wp-content/uploads/2016/10/GAC-2016.pdf'"><img class="" src="http://dev.mbrcentral.com/wp-content/uploads/2016/08/GAC-2016-2-230x298.jpg" width="230" height="298" alt="gac-2016" title="gac-2016"><div class="banner-content "><h2 class="banner-subtitle">Media</h2><h2 class="banner-title">GAC</h2><div class="content-inner"><span style="color: #ffffff;">Download PDF</span></div></div></div><style type="text/css">#banner-2191 {background-color: #5c3373;}#banner-2191 img {opacity: 0.3;}#banner-2191:hover img {opacity: 0.5;}</style></div></div></div><div class="wpb_column vc_column_container vc_col-sm-3"><div class="vc_column-inner "><div class="wpb_wrapper"><div id="banner-1384" class="banner banner-type-2 align-center responsive-fonts valign-middle font-style-light cursor-pointer" onclick="window.location='/wp-content/uploads/2016/10/iSep-2016.pdf'"><img class="" src="http://dev.mbrcentral.com/wp-content/uploads/2016/08/iSep-2016-1-230x298.jpg" width="230" height="298" alt="isep-2016" title="isep-2016"><div class="banner-content "><h2 class="banner-subtitle">Stormflow Membranes</h2><h2 class="banner-title">iSEP</h2><div class="content-inner"><span style="color: #ffffff;">Download PDF</span></div></div></div><style type="text/css">#banner-1384 {background-color: #5c3373;}#banner-1384 img {opacity: 0.3;}#banner-1384:hover img {opacity: 0.5;}</style></div></div></div></div><div class="vc_row wpb_row vc_inner vc_row-fluid"><div class="wpb_column vc_column_container vc_col-sm-3"><div class="vc_column-inner "><div class="wpb_wrapper"><div id="banner-7371" class="banner banner-type-2 align-center responsive-fonts valign-middle font-style-light cursor-pointer" onclick="window.location='/wp-content/uploads/2016/10/Speece-Cone-2016.pdf'"><img class="" src="http://dev.mbrcentral.com/wp-content/uploads/2016/08/Speece-Cone-2016-1-230x298.jpg" width="230" height="298" alt="speece-cone-2016" title="speece-cone-2016"><div class="banner-content "><h2 class="banner-subtitle">Concentrated Oxygen Technology</h2><h2 class="banner-title">Speece Cone</h2><div class="content-inner"><span style="color: #ffffff;">Download PDF</span></div></div></div><style type="text/css">#banner-7371 {background-color: #5c3373;}#banner-7371 img {opacity: 0.3;}#banner-7371:hover img {opacity: 0.5;}</style></div></div></div><div class="wpb_column vc_column_container vc_col-sm-3"><div class="vc_column-inner "><div class="wpb_wrapper"></div></div></div><div class="wpb_column vc_column_container vc_col-sm-3"><div class="vc_column-inner "><div class="wpb_wrapper"></div></div></div><div class="wpb_column vc_column_container vc_col-sm-3"><div class="vc_column-inner "><div class="wpb_wrapper"></div></div></div></div></div></div>
when it could be something like this :
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
Hello,
Our theme uses and supports Bootstrap 3. More about bootstrap grid system and classes you can read here http://getbootstrap.com/css/#grid-options
Regards
Yeah … I know bootstrap, if I use those class directly will it work ?
For example, you seemed to have build your portfolio pages with this :
<div class="portfolio-item col-md-3 col-sm-6 col-xs-6 columns-count-4 port-style-default no-full-width grid-sizer post-5507 etheme_portfolio type-etheme_portfolio status-publish has-post-thumbnail hentry portfolio_category-photography with-transition" style="position: absolute; left: 0px; top: 0px;">
<div class="portfolio-item-inner">
<div class="portfolio-image">
<a href="https://www.8theme.com/demo/xstore/project/ducilius-conceptam/">
<img width="1170" height="878" src="https://www.8theme.com/demo/xstore/wp-content/uploads/2016/07/20-2-1170x878.jpg" class="attachment-large size-large wp-post-image" alt="20" srcset="https://www.8theme.com/demo/xstore/wp-content/uploads/2016/07/20-2-1170x878.jpg 1170w, https://www.8theme.com/demo/xstore/wp-content/uploads/2016/07/20-2-360x270.jpg 360w, https://www.8theme.com/demo/xstore/wp-content/uploads/2016/07/20-2-205x154.jpg 205w, https://www.8theme.com/demo/xstore/wp-content/uploads/2016/07/20-2-265x199.jpg 265w, https://www.8theme.com/demo/xstore/wp-content/uploads/2016/07/20-2-555x416.jpg 555w, https://www.8theme.com/demo/xstore/wp-content/uploads/2016/07/20-2.jpg 1300w" sizes="(max-width: 1170px) 100vw, 1170px"> </a>
<div class="zoom">
<a href="https://www.8theme.com/demo/xstore/wp-content/uploads/2016/07/20-2.jpg" class="btn btn-lightbox" rel="lightbox"><span>View large</span></a>
<a href="https://www.8theme.com/demo/xstore/project/ducilius-conceptam/" class="btn btn-view-more"><span>More details</span></a>
</div>
</div>
<div class="portfolio-descr">
<span class="posted-in"><a href="https://www.8theme.com/demo/xstore/portfolio-category/photography/">Photography</a></span>
<p class="project-title"><a href="https://www.8theme.com/demo/xstore/project/ducilius-conceptam/">Ducilius conceptam</a></p>
</div>
</div>
</div>
You are using class like those : portfolio-item col-md-3 col-sm-6 col-xs-6 columns-count-4 port-style-default no-full-width grid-sizer some of them are bootstrap but what about things like port-style-default ? no-full-width grid-sizer
Hello,
Bootstrap classes will work if you use them in right way. Also, we use our own classes that appear depending on Theme Options for portfolio, blog, products etc.
Regards
Can you provide me an idea or list is your own class ?
Hello,
Unfortunately, at this moment we don’t have documentation with description for classes and the list of all the classes that we use in our theme for all the elements and settings that we have.
As you can see we have a lot of theme options, elements, additional posts types that’s why preparing of such documentation requires time. Our theme is not a framework that’s why we don’t have such documentation. In first message you told me that most themes have reference to such documentation. Could you be so kind to send me an example?
Regards
You must be logged in to reply to this topic.Log in/Sign up