Announcement

Collapse
No announcement yet.

Style & layout

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Style & layout

    Hi,

    Is it possible to change the layout for only one installed style? Right now, if I change the layout, all styles use that layout.

    Best Regards

    I found the answer with a search in the forum : edit: All styles use the same layouts.

    @++
    Last edited by lange; Mon 7 Jun '21, 6:20am.

  • #2
    Page/Screen Layouts don't actually contain any formatting. They contain sections represented by <div> blocks with CSS classes and IDs. If you remove all the CSS, then you'll see a page with a white background and no formatting. The CSS for your style would have to take advantage of this to change what the end-user sees. You can use that to make columns wider or narrower, move many things around on the screen, and more. You can see the templates for the screen layouts under Screen Layout Templates in the Style Manager's template list. The ones with _admin_ in the name are the most descriptive. You can also look at the rendered page. This will allow you to target specific areas of a layout.

    This is the screenlayout_admin_threecol_15_15_70 template:

    Code:
    <div id="canvas-layout-threecol-15-15-70" class="canvas-layout {vb:raw displayClass}" data-layout-id="{vb:var screenlayout.screenlayoutid}">
    
    	<!-- section 5 -->
    	<div class="canvas-layout-row no-columns h-clearfix l-row">
    		<div class="canvas-widget-list canvas-widget-list-global js-section section-200 js-section-global js-sectiontype-global_after_breadcrumb l-col__large-12 l-col__small--full" data-section="200"></div>
    	</div>
    
    	<!-- section 2 -->
    	<div class="canvas-layout-row no-columns h-clearfix l-row">
    		<div class="canvas-widget-list js-section section-2 js-sectiontype-notice l-col__large-12 l-col__small--full" data-section="2"></div>
    	</div>
    
    	<!-- section 4, 0, 1, displayed: 0, 1, 4 -->
    	<div class="canvas-layout-row has-columns l-row">
    		<div class="canvas-widget-list js-section section-4 js-sectiontype-primary has-adjacent-left-col l-col__large-8 l-col__large--move-right-4 l-col__small--full" data-section="4"></div>
    		<div class="l-narrow-column canvas-widget-list js-section section-0 js-sectiontype-secondary has-adjacent-right-col l-col__large-2 l-col__large--move-left-12 l-col__small--full h-padding-right-xl" data-section="0"></div>
    		<div class="l-narrow-column canvas-widget-list js-section section-1 js-sectiontype-secondary has-adjacent-left-col has-adjacent-right-col l-col__large-2 l-col__large--move-left-10 l-col__small--full h-padding-right-xl" data-section="1"></div>
    	</div>
    
    	<!-- section 3 -->
    	<div class="canvas-layout-row no-columns h-clearfix l-row">
    		<div class="canvas-widget-list js-section section-3 js-sectiontype-extra l-col__large-12 l-col__small--full" data-section="3"></div>
    	</div>
    
    	<!-- section 6 -->
    	<div class="canvas-layout-row no-columns h-clearfix l-row">
    		<div class="canvas-widget-list canvas-widget-list-global js-section section-201 js-section-global js-sectiontype-global_before_footer l-col__large-12 l-col__small--full" data-section="201"></div>
    	</div>
    
    	<input type="hidden" name="displaysections[0]" />
    	<input type="hidden" name="displaysections[1]" />
    	<input type="hidden" name="displaysections[2]" />
    	<input type="hidden" name="displaysections[3]" />
    	<input type="hidden" name="displaysections[4]" />
    	<input type="hidden" name="displaysections[200]" />
    	<input type="hidden" name="displaysections[201]" />
    
    </div>

    Your CSS can also target modules via their widget id (type i.e. all search modules) or their widget instance id (specific module i.e. the search widget on the home page). Modules and widgets are the same thing. The backend and code uses the term widget. It was changed to modules for end-users.
    Translations provided by Google.

    Wayne Luke
    The Rabid Badger - a vBulletin Cloud demonstration site.
    vBulletin 5 API

    Comment


    • #3
      I'm not sure I understand that right now. I use the layout 25/50/25 for my style which is almost finished. I use the layout 25/50/25 for my own responsive content inside the sidebars, so the style needs a maximum in width for the sidebars.

      Is your code the same for 25/50/25?

      Best Regards

      Comment


      • #4
        That is the 15/15/70 layout. You would have to look at the 25/50/25 layout in the AdminCP. The code will appear similar though since they are both 3 column layouts.
        Translations provided by Google.

        Wayne Luke
        The Rabid Badger - a vBulletin Cloud demonstration site.
        vBulletin 5 API

        Comment


        • #5
          Thank you very much!

          Comment

          Related Topics

          Collapse

          Working...
          X