-
Posts
-
Hi,
on my page I used a lot of color-sections: http://berlinguitartrio.de/?page_id=2337
Unfortunately the Enfold-Theme doesn’t have a “vertical-align” function implied. So I would like to simply have an “vertical-align: middle;” effect on all my color sections on this page. I tried to analyse the structure of the several divs but couldn’t find the right css-code, that would change the layout.
For the headers (the color sections with the different background colour) I also would like to reduce the padding, so that the sections fits tighter to tehe text. How to do that?
Thanks for your help
PhilippHi p_niedrich!
Please add following code to Quick CSS in Enfold theme options under Styling tab
.avia-section { min-height: inherit; }Regards,
YigitHi!
It does seem to be working on my end. Please flush browser cache and refresh your page a few times. You can change “inherit” to a certain size like 50px if you would like
Cheers!
YigitHi,
you are right, somehow my browser didn’t update. The sections have a better size now, nonetheless the vertical alignment is still not in the middle. How to achieve that?
Thanks
Hey!
Please try this:
.av_textblock_section { padding-top: 30px; }You can add a unique selector for each Avia Elements. Edit functions.php, find this code:
if(isset($avia_config['use_child_theme_functions_only'])) return;Below, add this code:
add_theme_support('avia_template_builder_custom_css');Edit any avia elements like Text Block then scroll below. Add a unique css selector on “Custom Css Class” field. For example, add “awesome-textblock”. You need this to adjust other text blocks’ top padding.
You can add something like this on your custom.css or Quick CSS:
.avia_textblock.awesome-textblock p { padding-top: 20px; }Regards,
IsmaelHi Ismael,
thanks for your help. With the padding the vertical alignment is affected, but I have to change that value manually, depending on the content of each section. SInce I have a lot of sections that would be a ton of work. Would be nice to have that done automatically…
I didn’t try out your code proposals yet, but that sound pretty awesome since I was asking myself, how I could attach css code to particular avia elements. If I understand correctly, that would attach an id form to the text-blocks, like it exists for the color-sections, right?
By the way, I would suggest that feature (to have id forms for all the layout builder elements) for future updates. I think a lot of people would like that…
Regards
PhilippHi!
No, the code will add a “css class” option field to all layout elements where you can enter a custom css class name. You can use the css class(es) to apply a custom style to some (or all) advanced layout elements which share the same class. It’s more flexible than the id solution because you can apply the same class to an unlimited number of elements whereas you can’t use the same id for two or more elements on the same page.
Cheers!
PeterHi Dude,
thanks for this clarification.
I would love to do exactly this, so I set up a child theme. I’m not very experienced with php and child themes, here my question:
I have the empty functions.php in my childtheme folder and the style.css. Now I want to add the code as Ismael proposed. I can’t do that in my functions.php, since it’s empty and the code has to be in a certain line of the original enfold functions.php.
I could simply copy the original and overwrite the empty functions.php and modify the code. But then all the benefits of a child theme would be negatet. With every update I would have to recopy the functions.php and modify it again, right?
Would be glad if you could help me with this.
Regards
PhilippHi!
The functions.php in your child theme should be empty. It gets loaded in addition to the parent and you would just add in the function right in there.
See the following for a bit more: http://kriesi.at/documentation/enfold/using-a-child-theme/ and here: http://codex.wordpress.org/Child_Themes
Best regards,
DevinHi Devin,
as soon as I add
add_theme_support(‘avia_template_builder_custom_css’);
to my empty functions.php, my site goes down. It simply doesn’t load any more, just an empty white screen. I can’t view my site, nor go to the admin area. As soon as I undo the change, everything works again.
How should my functions.php file look, to impy the custom css-classes?
Thanks for your help
PhilippHi!
It shouldn’t break the theme. If you have an empty child theme functions.php, it should look like this when you add the code:
<?php /* * Add your own functions here. You can also copy some of the theme functions into this file. * WordPress will use those functions instead of the original functions then. */ add_theme_support('avia_template_builder_custom_css');Regards,
IsmaelHi,
that’s weired, I tried out exactly the same code in my functions.php, just the comment was different, but that actually shouldn’ matter. However, now when I copied your code it works! I don’t know why, but it works, and that’s most important :)
Thanks a lot, the css class-form makes my life a lot easier :)
Best Regards,
PhilippHi,
one more question about the css. Now I set up a table, that I called “konzerte_table”. In the custom css I added the following code:
.avia-table.konzerte_table th, td, tr {
border-left-width: 0px;
border-right-width: 0px;
vertical-align: middle;
}The table is displayed as I wish, unfortunately the change is applied to ALL tables, not just my “konzerte_table” class. Is the code wrong?
Regards
PhilippHey!
Glad it is finally working now. Can you please give us a link to the page with the table?
Cheers!
IsmaelHi Ismael,
I set up a test page for you:
http://berlinguitartrio.de/?page_id=3505The left table has the konzerte_table css class, the right one doesn’t have any class, nonetheless they look the same. This code I added to my custom css file:
.avia-table.konzerte_table th, td, tr {
border-left-width: 0px;
border-right-width: 0px;
vertical-align: middle;
}Apart from the class problem I don’t understand, why there is still a border on the left side. Could you as well provide me with the correct code, so that all the vertical borders are not displayed.
Thanks an best regards
PhilippThere is no .avia-table.konzerte_table th in the table. There are td and tr but the selector would need to have the class name in it to target those specifically. Eg:
.avia-table.konzerte_table th, .avia-table.konzerte_table td, .avia-table.konzerte_table tr { border-left-width: 0px; border-right-width: 0px; vertical-align: middle; }If you need further customization assistance I would suggest looking into a freelance developer from somewhere like Microlancer, Codeable or you can use the form here: http://kriesi.at/contact/customization
Thanks for the correction Devin, a very stupid mistake from me, sorry to have bothered you with that.
Best regards
PhilippHi,
unfotunately I discovered another problem:
Everything is fine but when I reduce the width of the browser window to less than 767px, the code doesn’t apply any longer and the table looks like a standard table once again.
Regards
Philipp
- The topic ‘How to manipulate alignment in color-sections’ is closed to new replies.