Style Your Website With CSS Hero

hi this is david mccann for webtng in this video taking a look at css hero this is a power tool that lets webmasters modify the design of their site using a front-end editor you can see the changes live as you make them and the changes you make are non-destructive which means that you can easily undo previous steps this makes css hero a good tool for new users ready to take more control of their site design css hero is a premium only tool which is available from the css euro website as you can see it's been tested with a large number of themes plugins and page builders there are theme demos plugin demos an option to try it out and a pretty extensive documentation area and for many of the docs there are videos that show how to use certain features i have a testing site here using the core 2016 theme and everyone knows that the core themes are very performant but they often don't have very many style options let's take a look at some of the things we want to try to address notice how the overall feel of the site is very stark it's generally black and white the site title is much smaller than the post title which is huge we have dots here for the lists in the blog archive we have the excerpt here before the featured image and then we have the full content of the blog post see title excerpt featured image full content so obviously in an archive we don't need an excerpt and the full content those are the kinds of things that i want to see if we can address using css hero if we take a look at the plugins you'll see that that's the only plugin installed okay now the 2016 theme actually has more features than pretty much any other core theme and the feature that has a bunch more color options usually it's just two and i'm going to use the customizer here since we have it that makes sense to use it and i'm going to change the main text color to a dark blue and then the background color here on the side kind of frame around the page i'm going to change that to a light gray okay this is kind of my first steps at doing away with some of the stark black and white nature of the site okay that's what we can do with the customizer now let's get started with css hero and you can launch it for individual posts and pages using the link here in the list of all the posts but i think the main way that it's launched is from the link on the admin bar so let's launch that when we do that we see that css hero puts the page into kind of a frame there's a bar across the top the left side and the bottom okay and notice as i'm moving the mouse around how things are being highlighted so css hero is picking up the styles the margins and padding and the layout of the page and it's making it easy for me to select things by just moving the mouse around i'm going to start with this header area and i'm just going to click on it and you see that then it does one thing it selects that element and we see that this header area here is called the masthead and if we wanted to we could just type code in right here if we typed code in here and we wanted to change it or we make some changes we don't like them you can click this trash can to clear the edits but notice when you click it it doesn't take this away that's because that's part of the theme and what shows here is just what you've had selected here it's not a change that you're making all right and now let's begin by looking at this panel here on the side this is the kind of thing you often see in like a page builder where you have style options you see their background topography borders border radius spacing transform filters list styles display extra measures position there are a lot of options just right here in this user interface so as we can see that has a huge amount of padding so let's start by going to spacing and you see here it's got 84 pixels on the top and 84 on the bottom padding okay and we can change that by clicking on that and getting a slider or you can click in here or you can click the up and down the plus and minus buttons or you can do the same here you can use these sliders or actually click into here and make a change or use the plus and minus buttons there so i'm going to start and at the top i'm going to make it 30 pixels at the bottom we'll make it 40 pixels notice now as i did that it put the changes right here so when you use the controls it automatically writes out the css this is a nice feature if you're trying to learn css you can see the syntax here and learn as you're going along okay so the next thing i want to do is i want to make this just a little bit larger so i'm going to go to topography and see here's the font size let's just look at this this is 28 pixels for the font size here if we look at the post title that's 48 pixels so it's a huge difference there so what i'm going to do here is i'm going to increase this okay so that's 34 and when we get to styling the blog posts here i'm going to make this the same size 34 pixels okay but anyway so that's just an example of how easy it is the next thing i want to do is let's put a line between the header here and the content so i'm going to click on this box and now i'm going to go to borders here you see the border width is 0 and you have no style you have solid dashed and dots and up here you have all four sides or you can pick the side you want so i want it to be bottom and i want it to be solid and let's make it let's see 4 pixels looks like a good width and now continuing with our desire to make it less stark let's add that light gray color that we used for the frame let's add it here now we can just paste it in here okay and there's that light gray but css hero has this cool feature if you click on the at sign you have the ability to save this as a variable that you can use again so i'm going to call this light gray and do set okay so i've saved now this variable and we'll be able to use this again without remembering or copying into the clipboard that hex code let's go to the sidebar now and see this margin at the top so i'm just going to set this to zero now see how it only did it on this one which is odd because i want it on all of them so i'm going to undo that and i'm going to go over here and instead of just clicking i'm going to right click and here now we have the option we can style only this one which is what we ended up doing by accident or we can have an alternative see here it says one that's because there's one of those but if we look at alternatives we see there's widget block and there's widget and if we look on the side here we have actually three widgets here and because we're using wordpress58 wordpress has changed some of these into blocks okay but let's just go ahead and select widgets which is all three you see okay let's change this to be zero pixels okay and let's go to background now i want to use as a background element i want to use our variable that gray so i'm clicking on the at sign and this time instead of set i'm going to go to get and click on the light gray and see it's added that automatically now we need to add some padding around that but before we do that let's look here css hero has the option to add a background image or a gradient or a mesh gradient and just to show you while we're here you can get free images directly from unsplash you know search for them get the image and add it directly from here or you can go to the media library or if you wanted a gradient you could do that or a mesh gradient so i just want to show you that css hero has those features now let's go to spacing let's make sure we are still on our widgets you see that it has padding on top but none on the sides let's go and add some to the right and left so let's try 10 pixels on the right and 10 pixels on the left okay that looks pretty good and i guess we could put a little bit on the bottom as well okay see how easy that is all right now let's get rid of these dots and because wordpress has changed this into blocks it's harder to do this just for widgets but i think what we need to do is go here meta nav uli let's try that and then we want to do list style none there's disk circle and decimal so you have a decimal list but there's no option for no list style so we're going to need to add it ourselves and i googled it and it's called list and notice how when i start typing we see what the syntax is we get some suggestions the one we need is list style type and there that takes care of that now we need to do the same thing for this and we're going to do list style type none oh look it only did the first one because when i selected it i actually only selected that first one so i need to change that and go here good okay so we've gotten rid of those dots there let's move on and make these post titles smaller let's go to topography font size and make it 34. all right so that looks a little better it's not so huge now the next thing is that we have the summary the excerpt and we have the full text so people don't really need both of those it's kind of an odd way to design and archive in my opinion so what i'm going to do is i'm going to click here and we see that see there's 16 paragraphs on the page that have that so we're not targeting just this one excerpt okay and i'm going to go to display and click on the x for none okay so we've hidden that so i'd like to do is just trim this and use a part of this that make it the same length for each one and so what i did is i googled it found an article about how to do it and i adapted it from that article so let's look at one of the longer ones here paste that in and you can see what it does now is it limits it to 10 lines maybe there's a way to do that with one of these here but i just wanted to show you that some advanced things like this you might not find a you know user interface element to do but you can use a selector feature to find what you want to apply your style to and you can use the editor to add your style and then preview it live there's an example of that okay i guess there's one more thing we can do let's see if we can select this all right see how it's kind of far apart these elements let's go to topography and the line height it says 21 pixels okay so that looks better to me and now let's do the same thing we did before and apply our gray color okay and now let's go to the spacing and let's add some padding to the top some padding to the bottom and some padding to the left i think i'll do a little more on the left okay so that looks pretty good to me and you know i'm happy with this page kind of how it looks so a i'm going to save it but it's generally a good idea when you make a lot of changes after you save and before you move on to check and see how your changes look on different device sizes so you don't make a whole lot of changes and then forget to check how it might look on mobile so css hero has this feature here where you can quickly switch between common device sizes right now we're on desktop and the way it works is anything you apply to a device size it applies to that device size and all the smaller ones so if we applied something here on tablet portrait it would apply to tablet portrait and the size is under that that's just how that works okay so let's look now at how it looks on landscape tablet that looks pretty good on tablet portrait that looks pretty good a mobile landscape and on mobile portrait all right so that's how easy it is to check on different device sizes and like i said if you wanted to make a change say to tablet portrait you could click here and any of the changes you made then would apply to tablet portrait and the sizes under that let's go now we want to go and actually look at one of these posts look at the individual post and when we click here that selects it here which is not what we want we want to navigate to there and css hero has this option here there are two modes there's edit mode and there's navigation mode so i'm toggling to navigation mode and now when i click i go actually to the single page so i just wanted to show you that and you see how easy that was and then we could click the edit mode to go back and make a change let's go to edit mode and let's apply our color here to the border and instead of this color we're going to go get our light gray variable okay other than that though i think that this looks good all right so now i'm going to go back to navigation mode and let's take a look at the sample page well one thing we can see here is that these block quotes the text is much larger than the other text on the page so that looks kind of funny let's see what size that text is that's 16 pixels and this text if we look at it it is 19 pixels that's much bigger we can see there are two of them see that little two there and the two up there the change we make here is going to apply to both of these so let's just make this the same then that looks pretty good okay so i'm going to save that what i've tried to do here is kind of show you some of the typical workflow of how you would make changes and see how it shows that there's one change here on this page okay there's one there's one change applied here and here we have like some breadcrumbs we looked at a couple of these i just want to show you i don't there's nothing really we need to do with them but i just want to show you you have some options here for transforms to rotate and skew you have some filters here you'd apply these to images but you have these filters you have box shadows then you have measures which is a advanced feature and they suggest that it's kind of for experts and the same with position okay so you can set the position of an element and that's the way you would actually float like an image or a blob or something like that a design where you'd float one thing over the other and that's a little tricky also those are some of the advanced features in these panels here if we look up here you notice there's this other tab okay this is showing us here then all the changes we made and then over here f next to the edit and navigate mode we have undo redo and then this little clock icon opens a history panel where you could go back say you realized that you made a mistake you could go back and make changes there's a projects tab if you click on that you see our variables here and you can add your own like if you want to add your own color palette you can just add that in there there the edits browser here we see these are the things we've added changes to this is kind of like the inspector but it's showing you the element name instead of the code there's media query settings remember how we have all and then these options you can reorder these but you can also add your own min width max width and so if you need a particular device size then you can add your own and place it where in the hierarchy you want to have it there's something called checkpoints and this is kind of like the history except you can save a bunch of edits and create a checkpoint and then come back to it later and then in this reset edits this would undo everything we've done so be careful with that one and then tools there's the option to style the login page the wordpress login you can view the page as someone who's logged out you can show hovers yeah you're probably wondering like for buttons how you do hovers so you could show the hovers and you can go to documentation so i think we actually saw on let's see on an individual page yeah so like here's a button and and then over here you could change it to hover okay if you want to style the hover colors or what it looks like when the mouse is over it this button here is to exit when you're done closes the editor we've seen that this is how you switch to hover and now when you have like right now we have the comment form submit button selected if you didn't want to use this selector and you wanted to add your own you could click this button here to add your own custom selector now if we look at the bottom of the screen we'll see that this is where you can add your own javascript if you have a javascript snippet that you want to add you can save that these are videos that you can use for video backgrounds see it says video background and they have some free ones from this site that you could use if you can find ones that you like here this page inspector see here we have all the code the html code for the page and over here you see the styles that have been applied in the style sheet okay then over here this is how you can generate a qr code like you can you can copy this in your phone you hold your phone up to it and take a picture and go and then preview this page on your mobile phone so that's kind of cool here's a site browser feature where you can see a lot of the pages on your site so you can get an idea if there's something you missed that you need to go and style and here are your preferences this is where you can make changes to the css hero interface itself you can change the theme for example you can change the font size for the code things like that and then this is an important feature here you can leave css hero the plugin enabled on your site and anytime you need to then you could come in and use it to make tweaks but at some point you may decide i don't need to make any more changes and there's no lock in you don't have to keep css hero installed once you've done your design you can come over to this export button and here you can export these are all the changes we've made you can export them as less as a mimified style you can export the js if you added some but if you want to you can export the css all of this here by clicking copy css and see it copies it to the clipboard and then you could go into the theme customizer to the css panel in the theme customizer and paste that css in and after you do that then you can disable this css hero plugin and remove it from your site if you didn't need it anymore so that's how you can get a copy of all of your changes all of your styles to save so you don't lose them this cancel button undos all the changes since the last save which is a little different from the reset button which resets all of them and then there's a save button here for saving all right so that's our kind of walk through and tour of the css editor let's now have a little summary and discussion css hero is a popular option for styling wordpress sites as we've seen it has a large number of features enabling you to make all the basic and many of the advanced types of css changes using a point and click interface it also has a number of advanced tools like variables the ability to style the wordpress login page add javascript background images and videos checkpoints and more css hero will probably appeal to users who don't know css very well and are learning some things to keep in mind is that the plugin is a css editor and it's not an html editor even though we're able to see the html on the site you can't actually change the html and php files for people who know css you can use the developer tools that come with your web browser and when you do that then you're manually testing and adding the code looking up the syntax online to see what the proper syntax is you know you could do it all manually without using a plugin and as we saw in the examples and walkthrough there was that advanced usage for limiting the excerpt link where i searched online for the css and then added it using the css code editor so i wanted to point that out that all of the possible and unusual styling options may not be available via the graphical user interface however css hero is a time saving convenience because it allows you to test and apply styling from within wordpress and it makes all the common types of css options available in that side panel so you don't have to memorize the syntax the css hero team continues to improve and add new features version 5 is just coming out and css hero has a lifetime purchase option also and that will appeal to a lot of site owners so that's the walkthrough and look at css hero i hope this video helps you decide if this is a tool that will be useful for you in your site building there's a text version of the video available on the web tng website along with other walkthroughs reviews and resources thank you for watching

Channel: David McCan

Views: 634

Keywords: css hero, wordpress css plugin, css hero tutorial, wordpress change css, visual css style editor wordpress plugin, css hero 5, webtng, how to add custom css in wordpress

Id: qEIopc_XNZI

Length: 28min 6sec (1686 seconds)

Published: Sat Oct 02 2021