Cornerstone Design Systems
26:50
7 ай бұрын
Пікірлер
@tomuch4078
@tomuch4078 4 күн бұрын
Amazing. Love this video! So useful!! For the portal login, is it possible to have a field for username and password, so that when logged in, one can have access to their specific individual information?
@yourthemeco
@yourthemeco 5 сағат бұрын
You can definitely display username and other user info. However passwords are encrypted and you cannot display that on a user portal.
@staceymarler7746
@staceymarler7746 5 күн бұрын
Great stuff! I would love to see a quick tip on showing uploaded files on a single layout by using the ACF File Array option. The user would be ableo to click on the files to view or download.
@yourthemeco
@yourthemeco 5 күн бұрын
Thanks Stacey! Could you give a little more context or example of what you’re trying to achieve?
@staceymarler7746
@staceymarler7746 4 күн бұрын
@@yourthemeco I've been working on a custom post type and needing to include unique files for each post that the viewer can download. So, say you have a custom post type "Services" for posting all of your services of your company. I would enter all the details about the services and then would like to upload multiple files that can be download by the viewer to learn more. Examples of those files could be a pdf of a flyer for that service, how to guides, part specs, etc. Then on the service page would be a file download page that shows the title of each file uploaded and link to download. I've been trying to do the file array option to get the title and url of the file on the output but have struggled to make it happen. I was able to get the output to show the complete array but unable to pull out the information I needed such as "title" and "url". I went ahead and used the output type of the repeater to "URL" instead of "Array" so I can use the url to hyperlink text of "download file". A bonus tip would be, how to turn off the dowload section if there isn't any files uploaded. I hope that makes sense!
@yourthemeco
@yourthemeco 5 сағат бұрын
If you have the output as "File Array", you can use looper field dynamic content. It would be {{dc:looper:field key="url"}} and {{dc:looper:field key="title"}} respectively. You can use a condition if the ACF field is empty + Twig. This {{ acf.post_field({"field":"files"}) | length }} would be 0 if your ACF field is empty.
@jonathanwaddell4127
@jonathanwaddell4127 5 күн бұрын
Great explanation Josh, thank you
@rockin4840
@rockin4840 6 күн бұрын
If you had categories of products, how could a similar thing be done to display categories on this page and clicking on each category would take you to only the products in that category? I don't see any dc for categories at all
@yourthemeco
@yourthemeco 5 күн бұрын
A member of the team would be happy to help in our support forum.
@LasstUnsSpielen
@LasstUnsSpielen 6 күн бұрын
Its so cool to look back at older videos and realize: Most of the things are now possible without any custom css. Everything can be achieved by the builder now.
@yourthemeco
@yourthemeco 5 күн бұрын
Like a fine wine :)
@hendrikhellmich124
@hendrikhellmich124 6 күн бұрын
Thx fr this Content. I almost work 9 Years in a lot of projects with your theme but with this type of Videos i learn always something I didn't know before. Please more of this content ;)
@yourthemeco
@yourthemeco 5 күн бұрын
Love hearing that, Hendrik. More on the way!
@hendrikhellmich124
@hendrikhellmich124 7 күн бұрын
Thx you! Cool Video!
@yourthemeco
@yourthemeco 6 күн бұрын
Very welcome!
@prezzo19
@prezzo19 7 күн бұрын
How can you change the names of the navigation (home,work,shop,about,contact) to something else?
@yourthemeco
@yourthemeco 7 күн бұрын
They are managed from menus in the WordPress backend. Check out this article: theme.co/docs/how-to-set-up-navigation
@mr_clean575
@mr_clean575 13 күн бұрын
How does ThemeCo handle caching with the API requests?
@yourthemeco
@yourthemeco 12 күн бұрын
There are a variety of choices ranging from "Once,” "Never,” or a specific time frame. It is cached based on the parameters you are sending to the API. More information can be found here: theme.co/docs/external-api-integration#cache
@mr_clean575
@mr_clean575 11 күн бұрын
@yourthemeco Gotcha, that makes sense. What about images? If there was an api call returned with an image url, will it cache the url call to the image? Can you connect these calls through a CDN that stores all the images?
@yourthemeco
@yourthemeco 5 сағат бұрын
The image would be cached on a users page and not served from your site. If a CDN had an API where you could pass it a URL and it would give you back a URL to display on your page that would work. However the API you are using is probably already using a CDN and serving the images it sends you directly is probably fine.
@LasstUnsSpielen
@LasstUnsSpielen 13 күн бұрын
I love you <3
@yourthemeco
@yourthemeco 13 күн бұрын
Right back atcha!
@slypandadesign
@slypandadesign 17 күн бұрын
Thanks Josh. Another great tip.
@lolypop185
@lolypop185 17 күн бұрын
Nice solution! I've used this in tons of layouts through different methods, but I'll be trying this on my next build. Usually I use a div in a column and the width set to calc((100vw - 1200px) / 2 + 600px) which is the same thing but just an extra DOM element I suppose. Keep up the great content Josh!
@natesheridan6584
@natesheridan6584 18 күн бұрын
🤔 but what if you want to put text over the full width image? My method: create a div element in the section (above the row), set position to absolute and height to 100%. Set the with match the column and then put 0 on ether left or right position. Add a background image to the div and it will sit behind the column. This vid is very useful though. Thanks!
@yourthemeco
@yourthemeco 18 күн бұрын
Our pleasure! Love hearing other people's approach as well. One of the many super powers of Cornerstone is allowing multiple paths to get to a similar outcome.
@mattjenkins81
@mattjenkins81 18 күн бұрын
Great tip, thank you. Would love to see more of these type of tips, especially liked this leveraging just native pro elements; keeps it simple for the more 'hobbyist' users of Pro like myself.
@yourthemeco
@yourthemeco 18 күн бұрын
Most welcome, more to come!
@davidsilvester7618
@davidsilvester7618 19 күн бұрын
Wow, we were just trying to figure out the best way to do this a few days ago. Our initial solution used nested grids but this way is so much cleaner. Nice one team!
@yourthemeco
@yourthemeco 19 күн бұрын
Fantastic, happy to hear it!
@RalphVogel
@RalphVogel 19 күн бұрын
Very Nice: now the filter functions with woocommerce
@yourthemeco
@yourthemeco 19 күн бұрын
Thanks! Are you asking about a video on filtering in WooCommerce?
@RalphVogel
@RalphVogel 19 күн бұрын
100%! And that with Some smart functions of cornerstone, (pro) and build it from scratch! Filtering some products based on tags and price or something. And yes! Im asking! Haha
@yourthemeco
@yourthemeco 19 күн бұрын
Will definitely keep in mind. Just recently launched a WooCommerce Tips category for this series: theme.co/blog/woocommerce-tips
@carelvanderwyck
@carelvanderwyck 21 күн бұрын
Josh shows with some header css how to change the backgound color when triggered but how to show, hide or change the logo image and change the menu font color when triggered? Can you help with this CSS? /*Sticky state*/ .x-bar.x-bar-top.x-bar-h.x-bar-is-sticky.x-bar-fixed { background-color: pink !important; )
@yourthemeco
@yourthemeco 21 күн бұрын
Hi There, a member of the team would be happy to help with custom code via our One service: theme.co/one
@rockin4840
@rockin4840 25 күн бұрын
Josh, when I created the product page using WooCommerce single, it immediately put THE SHOP at the top of the page on the left. It is not an element I can access at all, so wondering how to get rid of that section. Great video again mate
@yourthemeco
@yourthemeco 25 күн бұрын
We're not sure how you are seeing that just from your comment. Feel free to jump into our forum, and we'll get you squared away.
@rockin4840
@rockin4840 6 күн бұрын
That happens stock standard as soon as you create a WooCommerce Archive. If you turn off header, this disappears
@yourthemeco
@yourthemeco 5 күн бұрын
Check the Shop settings in Theme Options, then if you need anything further a member of the team would be happy to take a look in the forum.
@Sweetchilli.design
@Sweetchilli.design 26 күн бұрын
Thanks for this very informative video. I had a question about the shrink amount - I want to shrink the size of my header to about 60% of it's current height, but I would also like the logo to shrink a bit in size when I start to scroll down, but when I scroll back to the top it should return to 100% size along with the header. How can I do that effectively?
@yourthemeco
@yourthemeco 25 күн бұрын
"x-bar-fixed" is a class that is added to the Header when it is fixed and shrunk. Using that you can shrink your logo when the header is fixed via ".x-bar-fixed $el { ... }" via Custom CSS in the Customize tab. We'd be happy to help with this custom coding via our One program (theme.co/one).
@rockin4840
@rockin4840 26 күн бұрын
What version do you need of Pro for this? I have 6.3.7 and don't see Gap as an option in Flexbox
@yourthemeco
@yourthemeco 26 күн бұрын
6.5.0+
@visualmodo
@visualmodo 29 күн бұрын
Really good content!
@yourthemeco
@yourthemeco 29 күн бұрын
Many thanks!
@marchydecreative
@marchydecreative Ай бұрын
How do we make the "hover color" stay on when that slide is selected? So that if you're looking at slide 3, slide 3's trigger has the background color shown
@yourthemeco
@yourthemeco Ай бұрын
This is possible with our Slider API (theme.co/docs/slider-api) checking the current slide on the slider and adding the class "x-active" if it is the current slide is also the goto trigger. We're considering adding this as the default behavior to our sliders as well. If you use the Element "Slider Pagination" this could possibly achieve what you are trying to do. Thanks for the feedback.
@SeanHart-y7e
@SeanHart-y7e Ай бұрын
Is there a way to change the default state of the element a user clicks on? for the sake of better accessibility.
@yourthemeco
@yourthemeco Ай бұрын
We have color controls called "Interaction" that handle the hover look and feel. We place the class x-active on any toggleable Element that is currently active. Besides that I think you can target the styling through $el:active {} in custom css. Is that what you were referring to?
@Schauk
@Schauk Ай бұрын
Thank you Josh!
@jonathanwaddell4127
@jonathanwaddell4127 Ай бұрын
Awesome work as always Josh - Thank you for your efforts
@yourthemeco
@yourthemeco Ай бұрын
Most welcome!
@PantheraPhotoSafaris
@PantheraPhotoSafaris Ай бұрын
This question has been doing my head in.... Can you apply conditional Logic to a button on the page? Row of buttons on the top, only the info for the selected button showing on page?
@yourthemeco
@yourthemeco Ай бұрын
Were not 100% sure what you are trying to do here. You can use String expressions and use the Dynamic Content {{dc:url:path}} to do conditions based on a website URL. So that a button is only showing on certain pages. Feel free to hop into our forum for additional help as well.
@PantheraPhotoSafaris
@PantheraPhotoSafaris Ай бұрын
@@yourthemeco got it sorted, thanks so much tho!
@Schauk
@Schauk Ай бұрын
Another great video, thanks Josh.
@yourthemeco
@yourthemeco Ай бұрын
Glad you enjoyed it!
@michaelpiercy
@michaelpiercy Ай бұрын
Would love more in-depth exploration around that last part - edting Personify parameters for use cases where more control is needed. Seems eve so slightly different than normal parameter management.
@yourthemeco
@yourthemeco Ай бұрын
We have had a lot of questions / requests related to parameters on Personify Components. This would be a great video for us to do, exploring advanced Parameters. We'll certainly keep in mind for the future. Thanks for your feedback.
@michaelpiercy
@michaelpiercy Ай бұрын
I noticed that for atoms being used on a page, the effects & customize tabs are not available. Any advice on best way to implement specific updates that would normally go in these tabs? For example, adding a class to a specific instance of that atom on the page? (as opposed to adding the class to all instances across the site).
@yourthemeco
@yourthemeco Ай бұрын
The Customize Tab can be enabled through the Element Manager popup, "Enable Customization" button. For effects, your best bet is to add Parameters on specific things you'd like to be different per usage of a Component. Be sure to check out the Component Builder and Parameter docs if you haven't already.
@moneybernd2003
@moneybernd2003 Ай бұрын
wonderfully done josh! very helpful for future projects.
@Mellenology
@Mellenology Ай бұрын
Josh, thoughts on how to make it hover on desktop and tablets, but click activated on mobile? The hover doesnt work if they scroll
@yourthemeco
@yourthemeco Ай бұрын
Currently the trigger is setup only for one event, but we can set up a special event trigger for touch devices.
@TheUtubitus
@TheUtubitus Ай бұрын
Wow, this is the exact sam tool and approach I created in Google Sheets for my builds. As an extra, I use Global Parameters to easily update the typography values in the Root for new installs.
@Schauk
@Schauk Ай бұрын
wow
@bogometanftmetaverse6733
@bogometanftmetaverse6733 Ай бұрын
Thank you 🎉
@yourthemeco
@yourthemeco Ай бұрын
Our pleasure!
@chrisk9667
@chrisk9667 Ай бұрын
As always, Thanks Josh. Very much appreciated 😊
@yourthemeco
@yourthemeco Ай бұрын
Most welcome!
@dlukefinch
@dlukefinch Ай бұрын
This is very cool. Thanks Josh!
@yourthemeco
@yourthemeco Ай бұрын
You bet!
@bill-hodgson
@bill-hodgson Ай бұрын
So useful
@larrybradshaw992
@larrybradshaw992 Ай бұрын
Thank you! Very useful!!!
@yourthemeco
@yourthemeco Ай бұрын
Glad it was helpful!
@michaelpiercy
@michaelpiercy Ай бұрын
Really useful! Keep 'em coming! ❤
@yourthemeco
@yourthemeco Ай бұрын
Thank-you Michael and will do!
@fullcirclegla
@fullcirclegla 2 ай бұрын
Do you think this would be a possibility for events using Modern Events Calendar?
@yourthemeco
@yourthemeco Ай бұрын
In Pro 6.6. we are adding in the ability to use the layout editor for MEC post types. Stay tuned!
@donovansmith7310
@donovansmith7310 2 ай бұрын
As always, the best Themeco videos. I ran into an issue where the Looper Index is not an option. Just items.
@yourthemeco
@yourthemeco 2 ай бұрын
Thanks for the kind words! You really don't see the "Index" choices when you search for "Looper" in the Dynamic Content UI? Hop into the forum and we can help you there.
@ZA_Vault
@ZA_Vault 2 ай бұрын
Hi there - absolutely great tutorial - I was wondering if you can give me a tip on how to sort the archive layout - for example - off the bat, the default layout is alphabetical - how would I customize the layout to be by popularity for example or 1 category then a second etc
@yourthemeco
@yourthemeco 2 ай бұрын
Many thanks! For sorting by popular posts, you can find a plugin that will keep track of page views and then sort them through that (will most likely store the data in a post meta field). For displaying a specific category, you could display a specific category first in Cornerstone then exclude that category from the normal blog list.
@SeanHart-y7e
@SeanHart-y7e 2 ай бұрын
Hey great Tutorial. Mind explaining how to make the card pop-up animation work when clicking the accordion tabs?
@yourthemeco
@yourthemeco 2 ай бұрын
Thanks for the kind words! We're not sure what you mean here by pop-up animation. Could you elaborate?
@SeanHart-y7e
@SeanHart-y7e 2 ай бұрын
@@yourthemeco At the start of the tutorial, when your clicking on the accordion tabs, the slide on the right pops up from the bottom. How do you create this effect?
@yourthemeco
@yourthemeco Ай бұрын
On the Slide Element, look for the "Effects" tab and change the "Scroll" animation. Cheers!
@followtheboat
@followtheboat 2 ай бұрын
At 08:40 your set-up shows 20 Starter Templates. I do not see these. After selecting 'use template', my Library Tab is empty and my Themeco tab shows 4 single layouts, none of which I want to use. How do I access the 20 starter templates? Thanks.
@yourthemeco
@yourthemeco 2 ай бұрын
This is something we are looking to add back into Pro 6. Stay tuned.
@moneybernd2003
@moneybernd2003 2 ай бұрын
oh this is wonderful! thanks for sharing this
@linnmarketing
@linnmarketing 2 ай бұрын
Nice Info - but how to do this responsive? In a 3 column layout, 9 is great. In a 2 column layout, probably 8 is better. And so on ... Wouldn't it be great not to have to write custom code, but having a field for "posts per page" in the query builder? So much more intuitive ...
@yourthemeco
@yourthemeco 2 ай бұрын
We are not using the Looper Query Builder in this video, but the default items WordPress provides us. Using the QB there are settings for number of posts and you could controls all this in the archive layout if you wanted to. Having settings to control the default query WordPress uses in the Archive Layout settings would be nice.
@sanojen
@sanojen 2 ай бұрын
Great video! Will definitely use this in the future. But one thought - it would be nice if there was a preset or similar that makes it easier to avoid entering the variable text every time?
@yourthemeco
@yourthemeco 2 ай бұрын
Yep, the next steps if you would like to go with this approach would be to create a Component for each text size or a Preset.
@bill-hodgson
@bill-hodgson 2 ай бұрын
I really think this video should explain how the Font sizes in the Theme Options works, and then explain why use custom CSS and ignore theme options all together? It tends to suggest that the Theme Options approach is redundant, which will confuse the enthusiastic non-coders. We need to understand both approaches to make sense of this video IMO. Bill.
@yourthemeco
@yourthemeco 2 ай бұрын
For many, the native typography settings in Theme Options will be just fine. We give a lot of optionality out of the box for things like root font sizes, heading settings, native stepped and scaling, etc without having to get into custom CSS. This is covered in detail in the docs: theme.co/docs/typography. The purpose of this tutorial is to show an implementation for those who want a 100% fluid approach. One isn’t better or worse, they’re simply different.
@KenWilsonHQ
@KenWilsonHQ 2 ай бұрын
@@yourthemeco What would be an easy way to combine the CSS and template styles? It would be better to select H1, H2, etc and have the font automatically be the default color, font-family and size (with the css size name already there). If we then want to customise based on the content, we can dive into the settings.
@yourthemeco
@yourthemeco 2 ай бұрын
Based on what you said, it sounds like you want to use Components or Presets along with this approach. I'm not 100% sure, but let us know if this info helps.
@DiegoLapetina
@DiegoLapetina 2 ай бұрын
So much easier
@accidentalgenius2051
@accidentalgenius2051 2 ай бұрын
I already use themco, but I'm not good at it. So I'm literally going to watch all your 167 videos on youtube to learn as much as possible.
@yourthemeco
@yourthemeco 2 ай бұрын
Good plan! Start with the most recent ones and especially our Getting Started Series: theme.co/blog/getting-started-with-cornerstone
@accidentalgenius2051
@accidentalgenius2051 2 ай бұрын
@@yourthemeco thanks 👍