Change the widths in Barceloneta

Plone Support Customizing Plone
1

Hi!
I would appreciate a little help:
in Barceloneta, what is the best/proper way to increase the content area and the right columns width, and diminish the left and right margins width?
Thanks.

2

Barcelona uses a grid system, so unless you need to change the 'whole width that the theme uses', I would consider changing the classes.

These are added in the rules.xml file, look for lines like:
col-xs-6
col-sm-3

(when you change them, you probably want them to 'add up as 12' (google for bootstrap grid)

You could also consider skipping the grid system, in which case you could remove just add your own CSS classes add CSS rules..

2 Likes
3

Hi and good day

Appreciate your comments, but only need change width of column 1 and column 2, where are defined this widhts in barceloneta theme?
BEST REGARDS

4

In the barceloneta rules, it uses a 12 grid system:

  <xsl:if test="//aside[@id='portal-column-one'] and //aside[@id='portal-column-two']">col-xs-12 col-sm-6</xsl:if>
  <xsl:if test="//aside[@id='portal-column-two'] and not(//aside[@id='portal-column-one'])">col-xs-12 col-sm-9</xsl:if>
  <xsl:if test="//aside[@id='portal-column-one'] and not(//aside[@id='portal-column-two'])">col-xs-12 col-sm-9</xsl:if>
  <xsl:if test="not(//aside[@id='portal-column-one']) and not(//aside[@id='portal-column-two'])">col-xs-12 col-sm-12</xsl:if>

So: you can change the 6 and 9 (just remember, it must 'add up to 12'

This means you will also change the

div class="col-xs-6 col-sm-3 sidebar-offcanvas"

Another options is the removed those classes all together, and for example use CSS flex or 'float'.

5

Hi,
I know this is a bit dated of a post, but this is what I am trying to do as well. Just not sure how still adding up to 12 would solve it for me.

I have 2 sides of gutter space about 25% of the screen. I would like to reclaim that space.

help.vibe.direct is an example of it.

I have struggled through learning the CSS to get that far, but need to reclaim more of this for usable articles/column areas.

So forgive my ignorance to this but column one shows 6 and column two shows 9. How is that adding up to 12?

I used to just set up a page as 25% 50% 25% and would honestly be ok with that here too, but am at a loss on how to set that up.

Is rules.xml the best place for that? Any resources out there that can help with this?

Thank you for your time,
M