more choices for homepage layout
After spending hours trying, I cannot find a way to apply custom CSS to change the homepage layout which is closest to the one we prefer. Even though we are changing it using chrome develop tools, when we install the change in custom CSS (protean) the system does not show the changes. Someone suggested that it may not be possible to change this, and that I should file a request for more layouts.
I need
top area with content, bar, bar below
The closest you offer is
top area with left and right bars
=========
Consider that if there is an active forum, then the content is where the discussions will be displayed on the homepage because the bars are too small. But if the person uses a phone device, he will have to scroll through the left bar before he can get to the content (50% middle column) and that discourages people from accessing the site.
Leonids discussed this with me already (https://unacms.com/page/view-discussion?id=3199) but I cannot get it to change using custom CSS even though I can get it done using chrome developer tools.
-
I like this. Great suggestion
-
Yes you can do it by injecting the following code into your mix, but be careful, by doing that you redefined I think you also redefined all the layout that use the proportion 25/50/25, you replace all by 50/25/25
/* Left column */ .bx-layout-bcb-bar1 { width: 50%; } /* central column */ .bx-layout-bcb-content { width: 25%; } */ right column */ .bx-layout-bcb-bar2 { width: 25%; } -
Baloo, I tried that and cleared all cache but got no effect on the site. Also previously I tried this code below and got no effect.
/* columns shifted */
.bx-layout-bcb-bar1, {
width: 50%;
}
.bx-layout-bcb-content {
width: 25%;
}
.bx-layout-bcb-bar2 {
width: 25%;
image attached is your code applied after deleting my code
-
Strange works at home without even needing to empty the cache. So maybe try this:
/* Left column */ .bx-layout-bcb-bar1 { width: 50% !important; } /* central column */ .bx-layout-bcb-content { width: 25% !important; } /* right column */ .bx-layout-bcb-bar2 { width: 25% !important; } -
no change with !important......... i have other custom changes which took effect immediately... having no luck with this.
-
Baloo solution should definitely work, but I would suggest to add this code to the raw block on the page which you want to change, so it will not be applied site wide:
Just add "raw" block with the following content:
<style> /* Left column */ .bx-layout-bcb-bar1 { width: 50% !important; } /* central column */ .bx-layout-bcb-content { width: 25% !important; } */ right column */ .bx-layout-bcb-bar2 { width: 25% !important; } </style> -
We have also decided to add a layout builder tp Studio to allow for creating custom layouts of all kinds using CSS grid.
-
adding a layout builder would move UNA into the big league!
-
Using AlexT suggestion for a style tag in studio>designer>injections>HEAD works.
Just want to be sure you understand that adding the code in custom style of Protean does not work on this end.
If it works for other sites, then that is a mystery and it is worth knowing why this is happening.
Anyway, thanks to AlexT for this and to Baloo for his effort.
-
Thank you for this tip, we always learn here :-)
-
I still do not understand what AlexT meant by "raw block." I found the injection page because previously I was advised about it by a video insertion developer who said that it has to be used for anything having java script.
Again, what is "raw block?"
I guess I could ask:
What is a mouse besides a four legged nuisance?
-
Raw block is just one type of block that can contain code, just add it as another and then edit it and put your code in it.
Note that in order not to be visible on your page, change also Block Layout. -
Baloo:
Thanks for the clarification!
-
Very Good Discussion here guys 😀 all i can say is i look forward to more features to us with Una. Edit: Also raw code blocks are awesome they can do so much for a project at hand.
-
The layouts all come from /template/ then layout_1 etc.htm - they start with layout. I added a new on once - along with the image. Can remember where the rest of the code is.
zz-code.PNG 