Code HTML+CSS Website In WordPress Styling [w/ subs]



00:00:00 – right so in this lesson we'll be adding
00:00:06 – these styles from our static site into
00:00:08 – our wordpress page so what's just
00:00:15 – checking out our own website right now
00:00:17 – closing the files that we don't need
00:00:20 – let's start by copying all the static
00:00:25 – site CSS so that's in the style dot CSS
00:00:30 – folder i mean sorry not folder but file
00:00:33 – and paste it into our WordPress users
00:00:38 – styles so that's the my style dot CSS
00:00:42 – and then let's save that and check out
00:00:45 – the results so our wordpress site is now
00:00:50 – beautiful so that's pretty much all of
00:00:55 – the styling that we need for wordpress
00:00:57 – but of course there's always our the
00:01:00 – issues like the header right there so
00:01:02 – let's fix those issues on that's where
00:01:05 – Heather we will target it correctly
00:01:34 – so next we'll be fixing most of our blog
00:01:37 – elements which are not targeted
00:01:40 – correctly
00:02:06 – here you go so in our static site we're
00:02:08 – using the main contact class while this
00:02:11 – class doesn't exist in WordPress so let
00:02:13 – me show you what I mean I inspect
00:02:15 – element right here so in our wordpress
00:02:22 – page you do that as well it's not on
00:02:26 – here
00:02:28 – since wordpress is using ID main so
00:02:34 – unlike the static site that we had right
00:02:39 – there so it's post has the class post
00:02:49 – okay so take note of that
00:02:53 – inspecting the static site as well to
00:02:58 – compare you know just to compare the
00:03:00 – difference and to know what we'll need
00:03:02 – to update or what's missing to complete
00:03:05 – all the CSS so checking it out right
00:03:09 – here so let's replace our class main
00:03:15 – content class post to ID main tag
00:03:19 – article
00:03:20 – ok so that's over here the main content
00:03:23 – post so we're going to replace that with
00:03:30 – main article
00:03:47 – and we're also going to replace the main
00:03:53 – content to content so it doesn't have
00:03:57 – much noticeable changes as you can see
00:04:00 – right here okay next is our blog heather
00:04:12 – will remove it its border and I'm
00:04:15 – padding
00:04:23 – so what we're going to do is go back to
00:04:25 – the my style.css put Paige Heather set
00:04:29 – the border to none and set the padding
00:04:31 – 20
00:04:43 – alright so as well as the
00:04:46 – article padding as well just what i had
00:04:48 – been removed that ok so checking it out
00:04:54 – checking the blog page seeing everything
00:04:56 – looks good so next is the paragraph lead
00:05:00 – we don't have that in our design if you
00:05:04 – remember so inspecting its element
00:05:07 – putting lead and then font style to 15
00:05:14 – pixels
00:05:34 – ok checking out how it looks so let's
00:05:45 – change the font size actually not
00:05:47 – font.style sorry about that okay
00:05:55 – clicking the blog post so seeing an hour
00:05:57 – check out the blog single page or the
00:06:00 – blog post page
00:06:01 – ok going back to the text editor next is
00:06:10 – our single post again it's targeting a
00:06:12 – class that does not exist will replace
00:06:15 – that with the correct class or I ID and
00:06:18 – which will fix our single post paragraph
00:06:21 – font size
00:06:24 – ok will replace replacing right now you
00:06:30 – can see
00:06:44 – remove the content and just put that
00:06:48 – single main ok reviewing the blog single
00:06:57 – page now head back to home and next
00:07:03 – would be our footer as you see it has a
00:07:04 – great background instead of white that
00:07:07 – we want so again let's fix the element
00:07:09 – targeting search the footer and change
00:07:15 – that into sight dash footer and home
00:07:20 – footer
00:07:33 – change that as well so let's check it
00:07:40 – out reload and there you go let's go
00:07:46 – back to the blog page so next the large
00:07:51 – white space above this is actually costs
00:07:53 – by WP bootstrap style
00:07:56 – ok so we're just going to put padding
00:08:00 – top in 20 and 30 body reload and there
00:08:06 – you go it's back up on top that bar is
00:08:08 – perfect and while we're here let's fix
00:08:10 – our blog title for it was not targeted
00:08:12 – correctly
00:08:17 – ok adding the a's between the Heather's
00:08:21 – something changed over here in bham page
00:08:33 – title so next would be the sidebar
00:08:36 – elements so I'm just going to suspect
00:08:37 – that real quick check out the different
00:08:41 – codes for d sidebar widget
00:08:52 – so I searched up widget and the mountain
00:08:55 – to the widgetbox and i'm going to
00:08:58 – replace it with just widget
00:09:09 – inspecting it again
00:09:16 – and I just went ahead and remove
00:09:18 – the widget searched ok update that as
00:09:24 – well so reloading singing the changes we
00:09:30 – still need to continue to modify this
00:09:32 – perfection
00:09:45 – ok that change right there
00:09:48 – inspect the button for d search icon or
00:09:51 – the search button search bar
00:10:10 – so it's this one right here just remove
00:10:13 – that widget from search group or form
00:10:16 – group and looking good so
00:10:24 – actually the recent post
00:10:34 – change it to widget title
00:10:44 – let's go back to the portfolio page and
00:10:47 – we'll fix most of our portfolio elements
00:10:50 – that are working great
00:10:52 – right there with you mix it up
00:10:57 – so we're going to search a portfolio
00:10:59 – items
00:11:05 – ok this adding the BTN or button
00:11:30 – seeing changes in the portfolio filter
00:11:33 – buttons already so i made into
00:11:35 – transparent so it looks better
00:11:37 – there you go
00:11:50 – now we're putting the nav pills i hope
00:11:53 – you remember that in our previous lesson
00:11:55 – on what that is all about so setting the
00:11:58 – brown color and the box shadow to none
00:12:12 – ok this is for the active state on which
00:12:16 – button or shelter where clicking as
00:12:28 – single portfolio page as well we'll need
00:12:31 – to make a couple of a few modifications
00:12:48 – inspect element check this out all right
00:13:00 – looking good
00:13:02 – see we're going to change
00:13:13 – copy that over here
00:13:19 – ok
00:13:40 – so make sure you just follow
00:13:42 – decoding in the video so once again if
00:13:45 – it's too fast just posit rewind it and
00:13:48 – you know i'm sure you'll do fine
00:14:14 – so one thing I've noticed is the contact
00:14:17 – form button and alignment
00:14:18 – this is due to improper markup so let's
00:14:21 – go ahead and fix that in our contact
00:14:23 – form 7 plugin to go back to contact
00:14:28 – forms and click the compact four main so
00:14:32 – let's check out the and some add this
00:14:35 – class button and button primary and a
00:14:40 – div class of row
00:14:55 – add this as well for spacing ok so let's
00:15:03 – check out if there was any changes
00:15:06 – okay good inspect the send button and
00:15:10 – seeing what else we need to update
00:15:19 – we're going to generate a tag for d
00:15:24 – submit button so it's going to label it
00:15:26 – as sent message
00:15:34 – I'm just going to paste that right here
00:15:39 – save and let's see all right so that
00:15:43 – fixes it
00:15:45 – looking good looking good
00:15:55 – alright so now that we're done
00:15:59 – correcting our CSS we will now work on
00:16:02 – our comment form this is currently our
00:16:08 – comment form it's pretty basic
00:16:12 – so we will replace that with the discuss
00:16:15 – common system so let's download their
00:16:19 – plug-in disqus or discuss not quite sure
00:16:28 – what the right pronunciation is but i've
00:16:33 – heard people saying this costs own since
00:16:35 – go with the flow on that one so it's
00:16:37 – discussed common system as you see right
00:16:39 – there
00:16:40 – install the plugin and activate there
00:16:47 – you go just loading a bit ok so plug-in
00:16:53 – activated now we go back to UM settings
00:17:02 – and go to actually let's go inside our
00:17:05 – plug-in and feel some details in so
00:17:08 – there you go which is gonna upgrade and
00:17:11 – you can create a free account if you
00:17:13 – don't have 1i already have mine to all
00:17:16 – use that a user name and the password
00:17:19 – ok go forward and then select a website
00:17:26 – that we want to install this plugin for
00:17:29 – so it's now set up correctly so let's
00:17:34 – check it out in action
00:17:36 – you going to the blog page and the blog
00:17:38 – single it should now have replaced the
00:17:41 – default comment form in to discuss right
00:17:45 – there so it looks good
00:17:51 – ok so to wrap up this section and
00:17:54 – converting wordpress we will review what
00:17:57 – we made so starting at the front page we
00:17:59 – learned how to work with dynamic heather
00:18:02 – with the use of condition statements how
00:18:04 – we display the hero in the front page
00:18:06 – only and how we added dynamic latest
00:18:13 – work section and how we worked on our
00:18:21 – dynamic footer as well so we also
00:18:25 – learned how to create page templates and
00:18:28 – small screeching the dynamic page title
00:18:30 – so in our portfolio we learned how to
00:18:33 – display post from a specific category
00:18:36 – and how the filter system you know is
00:18:39 – using a jquery plugin and learn how to
00:18:42 – create the post template using a neat
00:18:44 – and cool plugin that we saw in the
00:18:48 – previous lesson so going to the blog
00:18:51 – page with the blog single page we also
00:18:55 – learned how to work with the disgust
00:18:57 – comment system on the contact form paint
00:19:02 – you learn how to create our static
00:19:04 – sidebar and trade our contact form using
00:19:07 – the contact form 7 plugin so i hope you
00:19:10 – enjoyed this tutorial and converting
00:19:11 – static sites into wordpress great job
00:19:13 – guys


Video Url:
http://youtu.be/nF8ZtrKPOg0

Comments

comments