Shift Escape

Posts

Showing posts with the label CSS

HTML and CSS in a nutshell | Learn HTML and CSS

If you are new to the programming world HTML is something you should start from. HTML is not really a programming language though but getting to know it is a must have for anyone who wishes to make web applications. This (not so)little guide/tutorial will cover most of the HTML and CSS and a little bit of HTML5 which would be more than enough to get you started with web development. Lets start with complete basics. HTML stands for Hyper Text Markup Language. HTML is not a programming language, it's a mark-up language meant for defining and formatting web pages. HTML can be combined with many different programming languages to achieve anything, literally. CSS stands for Cascading Style Sheet. CSS is used for defining the style of a webpage. Let's skip the theory and move to practical. Overview: Part I: Making a Simple HTML Page. Part II: Learning various HTML tags. Part III: Basic CSS. Part I: Making a simple HTML page. <html> <h...

Finishing up our First Blogger theme

I used this for my sidebar. .sidebar li { text-transform: uppercase; list-style: none; line-heigth: 1.4px; } .sidebar h2 { font-size: 14px; font-weight: 400; text-transform: uppercase; margin-left: 30px; margin-top: 30px; } .sidebar .widget { font-size: 12px; } Of course you are free to play around with whatever you like. Also I have added CSS to make a read more button at the home page as follows. .readmore a { padding: 8px 15px; text-transform: uppercase; background: #333; color: #fff; } .readmore a:hover { color: #FFFFFF; text-decoration: none; } Then I defined a little CSS as .post-footer{ padding: 18px 22px 10px 22px; background-color: #f5f4f4; } .primary h3 { font-size: 2em; } Now the post-footer part is the one where "Posted by eff on 12/12/16 ..etc" is written. This is done to disting...

Making the homepage more attractive and simple

Uptill now we have a responsive design which has little to no design CSS added to it. This time we are going to add a little bit to the design. We are going to make post summary and post images to appear on the homepage as or like featured content. In short we are going to make post thumbnails, and summary for our home page. To do this I took help from this post. To do this we use a Javascript that uses the first image in a post and creates an excerpt which then is shown. To do this search for <data:post.body/> There are only 2 occurrences of this in our theme. Replace the 2nd occurrence with <b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","...

Making the theme responsive

Uptil the previous post we had completed a theme wtih a sidebar and a footer. Now if you might not have noticed that our theme's images and sidebar breaks in the smaller screens. So here we are going to make our theme responsive. To do so we will use @media (min-width: 1200px) .container { width: 1040px; } This is used for the browser to distinguish which CSS is to be used. We will simply add @media (min-width: 1200px) to our container, body, main, sidebar and if you are using my version primary and secondary tags instead of main and sidebar respectively. I used this @media all and (min-width: 1020px) and (max-width: 4080px){ .container { width: 1020px; margin: auto; } .primary{ width: 70%; float: left; } .secondary{ float: left; width:30%; } }/* media all and (min-width: 800px) and (max-width: 1020px) */ @media all and (min-width: 800px) and (max-width: 1020px){ .container { width: 800px; margin: auto; } .primary{ width: 70%; float: left; } .secondary{ ...

Adding a sidebar to Blogger theme

Now that we have a template that shows posts properly, we need to setup the sidebar. Also we are making a responsive design here we will be ensuring that page doesn't breaks on different browsers and devices. In previous versions of the Blank template you must have noticed that we added a footer and sidebar module to our theme. And you would have probably noticed that you can add the widgets to this area. Now all we have to do is to take this module and show it to the right of our theme so that it appears like a sidebar. Now if you look back to our code, the module was <b:section class='sidebar' id='sidebar' showaddelement='yes'> I removed other parts since this is our concerns with. This part has the class 'sidebar' being used. So we are going to define this sidebar in the CSS section. To do so add this. #sidebar { float: left; width: 30%; } Now our sidebar is ready. But this doesn't really do anything and our sidebar doesn'...

Applying a font and changing font color

Previously we had made a blank blogger template which can show the images in the post properly in any device, we fixed the head section not showing the page title in the tab. Now we are going to change the font and font colors for our little theme. For this we will add the font in body section in CSS. body { font-family: Roboto,sans-serif; font-size: 14px; line-height: 1.4; } Of course you can use any font as you like. Just make sure it is supported everywhere or there is no use of defining it. Now we need to set a particular color for our links. So that it doesn't look low quality with visited and not-visited links in your blog. For this we will add this: a, a:hover { color: #000000; text-decoration: none; } a:focus, a:hover { text-decoration: none; } again you are free to mess around with. You can download the blank template from below. Download link: https://drive.google.com/open?id=0B8Qb2-H0P8xIRnpmUllpRXViTFU

Blank template Update One HEAD section fixed

So this is the round up of this session for now. I will get back to this after some hours and a game or two of DOTA. In previous to previos post the theme we made had no title defined in its head section. Download this version for the HEAD section fix and images width defined. Download link: https://drive.google.com/open?id=0B8Qb2-H0P8xIclhuOFZkOFhWRlE

Setting up a logo and images size

In previous post we created our demo template which had no CSS design defined. Also the images I used in the post were considerable big which I did on purpose. Now when the screen size is reduced the image size remains same. This way the image overflows the view area on device. Which is not acceptable when making responsive designs. So we are going to make the images in our blog fit the view area of visitors. To do so we simply define the image size to be 100% by default. That is add .post-body img { max-width: 100%; max-height: auto; display: block; margin: auto; } to the CSS of out theme. This will not only apply to the images in the post.