I don't like the behavior of the wordpress columns block and wanted to extend it by adding attributes. I can already do that part but I don't know how I change the styles of each columns, especially the width. There is a default range slider where you can set the width of the block in %. I want to do the same but with my own preset values. How do I do that?
Edit: I managed to achive what I was trying to do. I created a custom block with inner child blocks. Each child wrapper has the clientid of the child as html attribute id. So I can use JS to select and change its attributes but it feels kind of dirty. I guess there is still a react/jsx or "proper" way of doing that which I want to know.
Here a image of how it looks like now
Related
I'm using CSS Hero which makes it easy for the element to break down.
On one page the wrapper, which bleeds over to other templates, shows this:
html>body>#wrapper>#main>#content>div
Since I only want the changes to be for this element on this page what would I do? I tried this:
.page-id-89 .html>body>#wrapper>#main>#content>div
Unfortunately, this did not work.
We are on 6.5.3. Like in CSS/bootstrap, there is a property to add the spacing between grid columns. I would like to know if there is any way to achieve this in AEM Grid? We need to add some gaps to ensure content doesn't stick together when content is placed inside the column grids. Modifying the grid.less is an option that we are thinking of as last resort, but we would like to check if there is a declarative way from the AEM grid, for example specifying the spacing in some property.
There is no property for padding/margin in AEM grids by default, this is the reason we have grid.less file in place OOTB. But,you can edit and add a property in your templates for that.
Although, this is not the best approach
If you want to add default spacing in all the grids, you have to do it in grid.less.
This would be even worse, as these changes would be global
A Better Approach
I would suggest to create a spacer component instead of adding a default padding in all grids. That way, when you don't want padding in your grids you wouldn't get stuck again.
Content Authors can just add a spacer component(or multiple) in between different components depending upon the size of padding/margin you need.
Customizing AEM Grid
I am trying to create a profile menu for my polymer website, something on the lines of github.com
If you notice,there is a triangular tip at the top of the menu.I am trying to create a similar triangle at the top of paper-listbox.
The problem I am facing is that the triangle seems to hide as soon as it gets out of the boundaries of paper-listbox.
I have create a jsbin to demonstrate my problem: http://jsbin.com/samaloqowu/1/edit?html,console,output
If you change the top property of the triangle (say -16px), it hides when it gets out of the listbox region. Please help me solve this CSS issue.
Short answer : No you can't.
Explanation : Because the dropdown content get encapsulated in a slotted element that gets styled inside the shadowRoot of the custom element you try to modify the behavior. And the paper-menu-button doesn't actually gives you a way to directly customize the slotted.
But there is a trick ! You can access the slotted through classic javascript. Just alter your connectedCallback function and add this line :
...
connectedCallback() {
super.connectedCallback();
this.$.profileMenu.$.dropdown.querySelector('.dropdown-content').style.overflow = 'visible';
...
}
...
This should do the trick, I agree this looks totally awful and trying to force and change the initial behavior of an element is not really recommended but well it seems to work, just make some tests when the element gets in a new context to see if anything breaks.
UPDATE (22/09/2017) :
Thinking of that again, I think this is a terrible idea to change this overflow to visible, I guess the polymer team has set the overflow to auto because if the list get long and you force the height of the element, the list will flow and be visible which is not really a dropdown anymore, but more like a full list display and that will mess with the general design purpose of your app. IMO when you start trying to mess with the inner properties of a custom element it means this element doesn't quench your requirement, and that it's time to make your own, especially when you try to modify the design of a custom element that has a design already implemented.
I have different sub-elements in a GtkBox, the first item always is a GtkLabel which should show the line-number. ( Each element of the GtkBox shows a line of a file )
Now I want to make sure that the width of the GtkLabel always is the maximum used width across all GtkLabel's in the GtkBox.
I already implemented that in C-code, however I wonder if it is as well possible to do so by using css ... probably that would be more elegant.
For gtkBoxes the css-attribute "min‑width" is available ... but I dont want to set a fixed value, I want to set the maximum width of all objects which are in the css-class.
I have no idea how/if that is possible. Is there some way to express that in css ?
No, you cannot define this behaviour in CSS.
You should use a GtkSizeGroup with a GTK_SIZE_GROUP_HORIZONTAL mode, instead; you can also define size groups inside your GtkBuilder XML files, if you want to avoid having this relationship inside the source code.
I am working on a joomla 2.5 site and am required to insert a menu module at the the bottom i.e the footer of the template.I have three items in the middle div ( module ).All i want is that there is some spacing between the three items and also that the menu are displayed inline.so i did add a custom class suffix to the module and am using it in the CSS to exactly match the one i truly require but all i get is somehow my padding set to 0 and the padding-left that i specify in my custom CSS isnt applied.
Please help me with its
Display:inline
spacing between the items.
Please note that this custom CSS should be applied to ONLY AND ONLY this module.because otherwise the whole look of the lists and unordered lists of the site changes.
i am new to it so i am able to exactly figure why it doesnt work
First, in order to affect only the module with the menu you will want to add a module class suffix in the module parameters in the advance module options (it looks like you did that with bottom_footer_menu).
Next, margins don't work on inline elements. You will need to either float the LIs or set them to display as inline-block.