Intro and #1 The Set-Up

Amy Marsh Is A Fashion Technologist In Training

30 days of coding

 

Technology is exploding, everywhere we look things are getting faster, more accessible and impressive. Considering we are in the “Digital Revolution” this hardly comes as much of a surprise. It would be fair to say the fashion industry was a little hesitant to get involved straight away, with many actually ridiculing Natalie Massenet’s (Founder of Net-A-Porter) idea of buying clothes online (who’s laughing now?!).

 

Times have changed and year on year technology is embraced more, we now have apps that can let us buy products by simply taking a picture of an item with our phone, virtual fitting rooms helping us ensure we get the right size when shopping online, and of course you will never miss a moment of fashion week nowadays thanks to social media and live streaming.

 

However, all these companies that are creating and developing these amazing pieces of software have a strong team of coding genius’ behind them to help along the way. What if you wanted to get involved and experience what coding is all about? Wouldn’t it be amazing if you could join the ranks of these said genius’ and be a part of creating the technology that is embracing the fashion industry?

 

Bloggers for example, will need to know code as the blogosphere continues to grow and competition gets fiercer. The fashion industry especially have a lot of respect for them, their advertising alone is now rivalling glossy magazines! Unfortunately for some of them, place a section of code underneath their nose and a confused, intimidated look is likely to appear and that is the case for many people not just bloggers!

 

Now do not get me wrong they can pay out and get a lovely company like chloédigital (who offer great services and have expertise with blogs ;) ) to help them along their way to building an amazing blog, that causes other bloggers to stare and long for. Alternatively, they could pick up a few tips here, from me, Amy, a fellow fashion lover, active fashion blog reader and most importantly intern of the fashion technologist’s chloédigital – who is still learning too!

 

For the 30 days of November, each day this blog will change, whether it is a new section of code added, a new plugin installed and edited or a simple feature to ensure engagement is employed the best way possible, ultimately transforming it into a masterpiece. Make sure to tune in each day and see how the blog develops and learn a thing or two about coding along the way! Whether you have a blog you want to update or simply would like to learn about coding make sure you check out this blog each day! I promise you it is not as intimidating as it first looks!

 

Follow these few simple steps and see your blog transform.

 

1. Downloading the theme

To start this journey off I downloaded toolbox a very basic and clean theme that is easy to add to and update. You can download it here. The theme will download in a zip file, do not un-zip it as you will need to upload it to WordPress as a zipped file.

 

To upload the theme I selected ‘Appearance’ in the left hand column sidebar and then ‘Theme’, like shown below:

 

Screen Shot

 

This leads to this page, where I selected the ‘Install themes’ tab:

 

Screen Shot

From here I can now select upload, under the ‘Manage Themes’ and ‘Install Themes':

 

Screen Shot

 

This leads to this screen where I upload the toolbox zipped theme folder:

 

Screen Shot

 

After the theme has been uploaded press activate:

 

Screen Shot

 

Your theme should now look like this, disgusting I know but that is the point:

 

Screen Shot

2. Changing the font

Now we can start designing this theme! To start with I will show you how to change the font, but first we have to pick the font we want! To do this go on to the Google Fonts Website. Here you scroll through an array of fonts, select the fonts you want to use on your website by adding them to your collection:

 

Screen Shot

 

You may want to use more than one font from Google Fonts on you blog you can do this by selecting more than one.

 

Below I then chose which font I wish to include on my blog:

 

 

Screen Shot

 

Scrolling down on this page it will give you two sets of code you need to include on your site, (NB in section ‘3.Add this code to your website’ make sure you select the ‘@import’ tab as this is the piece of code we will be using in this example.):

 

Screen Shot

 

To add this to your theme first add:

 

 

to the very top of your style.css code. You will find your style.css file (and others for your theme) by selecting Appearance in the left hand side bar and then Editor.

 

In order to set each title to Raleway font create a new section in your style css and add:

 

 

I have made the text be all uppercase by adding ‘text-transform:uppercase;’ and the font light by adding the ‘font-weight:300;’

 

To change the main text add a font-family (and I have decided to add a line-height) to the #page section the code should be the same as below, I have chosen to use Georgia which is a web font therefore I do not need to import it to the css like above, I can just enter Georgia. A list of web fonts can be found here:

 

 

In order to change the size of font depending on different headers add this code below the previous header code:

 

 

The h1.entry-title code is for the blog posts title and the h1.widget-title are for the sidebar titles.

 

You can continue on giving header styles up to 6 if you wish, I have given my header 2 this style:

 

 

3. Changing the links appearance

Firstly we must add this section of code to the under the font features previously mentioned above:

 

 

This will remove the horrible standard blue blue links colour and change it to black as well as remove the underlines. Next I have added this piece of code underneath:

 

 

‘a:hover’ allows for the link to change when the mouse is hovering over it, in this case I am changing the colour of the text to a grey.

 

‘p a’ allows the link to have a dotted underlined when in the paragraphs of the blog post so they standard out more. If you wish for a solid line simply enter ‘solid’ instead of dotted in the code above.

 

I have also added this piece of css:

 

 

to the section:

 

 

Which is already present in the code as otherwise due to the current changes I have made you are not able to see the navigation link as easily when you scroll over the link. The section should now look like this:

 

 

 

 

4. Header Image

Adding a header image is a simple task, first select ‘Media’ and then ‘Add New’ in the left hand side WordPress side bar:

 

Screen Shot

 

 

Next upload your header:

 

Screen Shot

 

Now you can add the code to your css, first finder the section ‘#site-title’ in the css and add ‘text-indent:-10000px;’ and this will remove the Blog title text;

 

 

Next add this new section of code below:

 

 

The height, width and background-image will all be specific to your header. In order to get the correct URL for the background-image, go back to your previously uploaded header and select edit on the image, this will take you to this screen:

 

Screen Shot

 

Copy the file URL:

http://thefashiontechnologist.com/wp-content/uploads/2013/11/header.jpg

and ONLY insert the pink highlighted section above in the url brackets, like so:

background-image: url(/wp-content/uploads/2013/11/header.jpg);

And your header image should appear.

 

5. Extra features

Finally I added some small bits of code improve the design slightly, give the #page section a width of 1000px and made sure it sat in the centre by adding ‘margin: 1em auto;’

 

 

And I changed ‘p img’ to this to ensure images in blog posts do not overflow into the sidebar:

 

 

I also changed the look of the “Posted on October 1st” by changing the .entry-meta to this:

 

 

That is it! You should now have a blog looking similar to the current one you are looking at yourself!

 

Before and After

Screen Shot

After

 

Day 1 complete!

Leave a comment with any questions or to submit your progress and make sure to check out the blog tomorrow and see what has changed!

 

 

 

 

 

 

 

Stay Updated

If you enjoyed this post, subscribe to the Fashion Technologist for updates

What are you interested in?

Discover more:
email course
(blog)Random Banner Ad Featured Image
Screen Shot 2014-06-10 at 17.43.10
two ways to make your site more secure
(feat) theFEED Profiles- RooftopAntics.com
How to change the default media linking option in wordpress
Why I do not like blog posts being By Admin
how to create a wordpress plugin

One thought on “Intro and #1 The Set-Up

  1. Pingback: #2 Pop-up | The Fashion Technologist

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">