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't look anything like a sidebar. This is because we have not defined any container to our theme and even if it floats left, it takes the left reference from the body section which again is still undefined. Now we will define an outer section to enclose the main and the side bar.

#container
{
padding: 20px;
width: 1020px;
margin: auto;;

}

Padding so that the content appears fine and margin: auto to align the content in the center of the screen.
Now we need to define our main as well.
#main {
float: left;
width: 70%;

}

Now if you have added content to your footer, you theme would break. To fix that we need to define our footer as well.
#footer
{
width: 100%;
float: left;

}

Now this float:left is important. I might revisit this to align the footer contents to the center. But it still works for now.

Comments

Unity Mobile Game Optimization Checklist

- On Image and Text components that aren’t interacted with you can uncheck “Raycast Target” on it, as it will remove them from any Raycast calculus. - Click on your textures in your “Project” window. Click on the “Advanced” arrow, and now check “Generate Mip Maps”, Unity especially recommends it for faster texture loading time and a lower rendering time. - Set the “Shadow Cascades” to “No Cascades” (Quality settings) - If you have dynamic UI elements like a Scroll Rect with a lot of elements to visualize, a good practice is to turn off the pixel perfect check box on the canvas that contains the list and disable the items that aren’t visible on the screen. - Set all non moving objects to "Static" - Above Unity3d 2017.2 you should turn off "autoSyncTransforms" on the Physics tab - Always use Crunch Compression Low on textures - Try to keep the “Collision Detection Mode” on “Discrete” if possible, as “Dynamic” demands more performance. - You can go to the TimeManager w...

How to make RPC in Unreal Engine Steam Online Subsystem and EOS

Remote Procedure Calls, also known as RPCs, are a way to call something on any other instance. In the Unreal Engine, RPCs are used to ship events from the patron to the server, the server to the customer, or from the server to a specific group. It's important to word that RPCs cannot have a return cost. If you want to return something, you'll ought to use a seconds RPC within the contrary path. There are precise policies that RPCs observe, which are unique in the official Documentation. Some of these regulations encompass wherein the RPC must be run, such as the server instance of an Actor, on the owner of the Actor, or on all instances of the Actor. There are some necessities for RPCs. First, they must be referred to as on Actors or replicated Subobjects. The Actor (and component) have to additionally be replicated. If the server is looking an RPC to be executed on a customer, handiest the patron who owns that Actor will execute the function. Similarly, if a client is calling...

How to drag and drop item in Unity3D

For dragging and dropping to work we will need to first grab the Game Object and ensure while the Game Object remains grabbed it's position reciprocates the mouse position. This will work fine for not only PC bug mobile devices as well. First define GameObject which we will be dragging. public GameObject selectedPiece; Now inside Update method we will give reference to touched/clicked object and while there is a reference available to an game object(selectedPiece;) we will move that object to mouse position. When the reference is remove, object won't move therefore dropped. void Update(){ RaycastHit2D hit = Physics2D.Raycast(Camera.main.ScreenToWorldPoint(Input.mousePosition), Vector2.zero); if (Input.GetMouseButtonDown(0)){ if(hit.transform != null) { if (hit.transform.CompareTag("PIECE")) { ...

Shift Escape

Search This Blog