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:
This leads to this page, where I selected the ‘Install themes’ tab:
From here I can now select upload, under the ‘Manage Themes’ and ‘Install Themes':
This leads to this screen where I upload the toolbox zipped theme folder:
After the theme has been uploaded press activate:
Your theme should now look like this, disgusting I know but that is the point:
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:
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:
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.):
To add this to your theme first add:
@import url(http://fonts.googleapis.com/css?family=Raleway:400,100,700,300);
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:
/* Headings
-------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
font-family: 'Raleway', sans-serif;
text-transform: uppercase;
font-weight: 300;
margin: 1em 0;
}
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:
#page {
display: block;
margin: 1em auto;
font-family: Georgia;
line-height: 25px;
}
In order to change the size of font depending on different headers add this code below the previous header code:
h1.entry-title{
font-size: 32px;
margin: 40px 0 0px;
}
h1.widget-title {
font-size: 16px;
margin: 30px 0 5px;
padding-bottom: 10px;
border-bottom: 1px solid black;
}
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:
h2 {
font-size: 30px;
}
3. Changing the links appearance
Firstly we must add this section of code to the under the font features previously mentioned above:
a{
color:#000000;
text-decoration: none;
}
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{
color: #CCCCCC;
}
p a{
border-bottom: 1px dotted;
}
‘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:
color: #ffffff;
to the section:
#access li:hover > a, #access ul ul :hover > a
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:
#access li:hover > a,
#access ul ul :hover > a {
color: #ffffff;
background: #dedede;
}
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:
Next upload your header:
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;
#site-title {
font-size: 2em;
font-weight: bold;
margin: .67em auto;
text-indent: -10000px;
}
Next add this new section of code below:
#site-title a{
display: block;
height: 228px;
width: 1000px;
margin: 0 auto;
background-image: url(/wp-content/uploads/2013/11/Header.png);
}
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:
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;’
#page {
width: 1000px;
display: block;
margin: 1em auto;
}
And I changed ‘p img’ to this to ensure images in blog posts do not overflow into the sidebar:
p img {
margin: 0.5em 0;
max-width: 720px;
height: auto;
}
I also changed the look of the “Posted on October 1st” by changing the .entry-meta to this:
.entry-meta {
font-size: 12px;
clear: both;
display: block;
padding: 10px 0px 20px;
}
That is it! You should now have a blog looking similar to the current one you are looking at yourself!
Before and 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!
The post Intro and #1 The Set-Up appeared first on The Fashion Technologist.