Custom CSS in Bricks Builder for an efficient workflow | How to CSS Tutorial | WordPress Tutorial
HTML-код
- Опубликовано: 6 июн 2024
- Learn how to use Custom CSS in Bricks Builder.
GET ACCESS TO MY ADVANCED & INDEPTH TUTORIALS
geary.co/inner-circle/ref/1/
Bricks Builder WordPress | Tutorial
#wordpress #bricksbuilder #bricks
FACEBOOK GROUP: / designwithcracka
FOLLOW ON TWITTER: / udoroessien
GET ACCESS TO MY ADVANCED & INDEPTH TUTORIALS
geary.co/inner-circle/ref/1/
GET AUTOMATIC.CSS - A time saving utility class for WordPress websites
automaticcss.com/ref/37/
--------------------------------------------------------------
GET MOTION.PAGE - Interact & animate any WordPress site
motion.page/go/dwc/
--------------------------------------------------------------
GET RECODA WORKSPACE - Advance workspace for Oxygen Builder
recoda.me/workspace-store?via...
--------------------------------------------------------------
GET YABE WEBFONT - Custom fonts management and self-host Google Fonts with seamless WordPress page builders integration
webfont.yabe.land/?ref=11
--------------------------------------------------------------
Get Breakdance - A record breaking visual builder for WordPress
breakdance.com/ref/50/
--------------------------------------------------------------
GET 20% OFF HOSTING PLAN FROM HOSTINGER
hostinger.com/?referralcode=1...
DISCLAIMER: This video or description contains affiliate links, which means that if you click on one of the product links, you'll be supporting the channel, and I’ll receive a small commission.
=============================================
BOOK A 1-HOUR CONSULATION
calendly.com/designwithcracka...
=============================================
HIRE ME: udoroessien@gmail.com
=============================================
If you know CSS in an out, this might be faster than browsing through the Builder-Menu, no question about that.
However, if that is not the case, i am not sure that this workflow is really more efficient.
Also, when the code is getting longer and longer and you have to change something month later,
you have to find it in the code to change it, it is much more clear where to find and change things later on, when using the menu of the Builder.
Also, writing all those proper BEM classes and targeting them inside your CSS takes also some time.
Not forget that stuff not always work, so it also takes time to troubleshooting your code.
I have seen enough videos, where people search for +20-30 seconds to find things in their CSS, in that time you easily have
open the menu and change the value there.
100% agreed !!! Maybe because I am not a CSS pro for now :p
Though it's still good to know in case you know there are some things you always want to do on your cards on every sites for example, then you can just copy/paste it in seconds from your docs and change values :)
Magnificent tutorial. I'm learning tons with you! Thanks!
Great work, more tutorials!💪
Thank you 🎉
Another great video🎉
This reinforces the idea of using an external stylesheet.
Also.. I didn't know you could have Advanced Themer and ACSS installed together! It seems like there would be some conflicts between the two, namely color palettes. Can you do a short on configuring the two?
AT provides a global option to prefix the classes and variables to avoid conflict.
Very interesting tutorial. I have often wondered about how to solve the “where did I put that value” problem in builders. I see the logic of picking a logical unit of elements, such as a card. What do you think about using the page as the location for CSS?
Yes, that's a good question. Is a similar problem then going to occur with CSS snippets all over the place, and us having to click a lot to look for snippets? Perhaps better to have them all in the one place? Or at least on the page level, as suggested above.
It can get quite tricky, depends on the situation. For components like a card, I prefer placing the CSS on the root level of the component. However, if I have a utility style, such as what color a text or button should be when placed on a dark background, I use an external code editor and label the snippet as 'utility styles' etc. It all depends on what works best especially when working with a team, there should be rules on how CSS is applied.
Your tutorials have been super helpful to me since I returned to WordPress from Webflow. Thanks a trillion times. I have a question: How do you design empty states and conditionally set it appear IF there are no posts? What I'm trying to achieve is that, I'd like to display styled content of a DIV if there are no posts. I can see that the query loop builder has a section at the bottom called NO RESULTS that allows you type a string of text to display of there are no posts, or perform a dynamic action. Not sure what exactly to do there because none of those action/functions really give me the desired direction.
What am I missing? Have you encountered this before?
Please ask in My Facebook group
Do you use wpcodebox to keep evrything together?
First, I like to say - You have a very good teaching style and I do enjoy and learn well from your videos. It's very good to see you in alliance with Kevin G. (Thank you!)
Question - Does Advance Themer and the "Plaster" the plug-in that became part of ACSS overlap? do you use both at the same time? or is the plaster turned off as you use Themer? Also, I no longer seem to see or experience the plaster since it was rolled into ACSS.
At this point, I am not sure what the Plaster integration it's supposed to look or act like. Would you consider doing a small re-introduction of this option so we can know if we are using it to its potential?
Both AT and ACSS contextual menu (Plaster) work well. To use the contextual menu, you have to turn it on in ACSS Dashboard under Options.
Nice tutorial. Thanks.
I didn't think about writing css like that, because I thought it's faster with the builder, especially with Advanced Themer (that's a nice plugin). Maybe will give it a try next time.
However, where do you place media queries in that case? Also in the same "Custom CSS" box?
Also, where Bricks put that CSS code? External file (if that's selected in Bricks settings), or inline like it currently does with some CSS (regardless of choosing external file)?
Media queries can be placed inside the same place, but that you only need to write min-width media queries because the Custom CSS respects breakpoints.
@@DesignwithCracka I guess this is a decent enough reason on its own for putting custom CSS code in as root per section.
Great tutorial! Question...I assume if you're using the Bricks parent theme and update it, these customizations would be wiped out? Is that correct? Using a child theme, however, they would be saved with any updates to Bricks?
Only customizations done inside the theme files is affected by updates. It doesn’t affect styles done anywhere else.
nice tutorial. rather see your beautiful face rather than this fake "james smith", just sayin
hahaha
Bad teacher...A lot of gibberish instead of clear communication.
A dull student will always blame the teacher… and they’re usually characterized by rudeness.
@@DesignwithCrackaMy friend, you are above me when it comes to your work and English language but that doesn't imply your teaching style is good. You have a long video for something that can be compacted and presented in a much clear language. Maybe I was rude or maybe not - you can call it the language barrier. However, you should hear and see your videos through the eyes of a beginner ;) and make the necessary changes. There could be lots of people that don't write to you about that and struggling to understand and you will never know. Best.
@@lucianpascu8445 not all my videos are meant for beginners, if you had difficulty understanding anything, you could have simply asked a question for more clarity. When I make a video for beginners, I take the time to explain basic concepts.
@@DesignwithCrackaMy point was that you can simplify your videos and gain more from that along with your viewers. I am not a begginer when it comes to CSS :) for example but I find BricksBuilder as not intuitive as it surely can and will surely be in time :) Working with classes in this builder is way harder than it should be. Of course I can test and/or read the docs for everything by myself and not look at others that already spent their time deschipering some functionalities not very cleverly implemented in the UI but sometimes is faster to do the latter. Not in this case so therefore my comments. You're doing a great job but why not doing it much better? :) At least for personal satisfaction if nothing else. Best.