The XtBlog is one heck of a powerful block isn't it? XtBlog is known to actually gives you the ability to blog stuffs, which outstandingly elevates XtGem's mobile friendliness!
The XtBlog CSS cannot be customised the native way at all. Even the templates XtGem provides does not change the look of the blog completely - whereas they only change the links colours and text decorations and not all of it.
In order to successfully modify your blog's CSS, you need to know the basics of CSS. Prior to this point, I can't help you on how to code CSS. Also, this trick requires global_stylesheet.css. It should be created automatically, or if it is not, don't worry, just create a new plaintext file and rename it into global_stylesheet.css. Changing the styles from other CSS files that you made your own are also possible, however, don't ever modify the content within xtgem_templates.css
This should be moderate for most users, easy for expert or experienced CSS coder or browser inspector.
First, you need a browser of your choice. In this example I will use Mozilla Firefox. The purpose of the browser is to inspect the source of the page that contains your blog. To inspect your Blog, go to your website containing the blog and then right click element within it. Then choose "Inspect Element".
Afterwards,you can select the outermost container of the blog. We found it is .xt_blog_parent for the main container. [View Image 720p] Using that element you can open your global_stylesheet.css and edit the following as per to what you want. As of this example, I'll make the blog to have a red border.
.xt_blog_parent
{
border: 1px solid #700000 !important;
}
Notice the "important" in the code. The reason here is to elevate your given style to highest ever priority, which eventually may override XtGem's "border: none" or "border: 0" in any means! This will make the blog have a red border. It is completely optional to put the "!important" value. If any of your styles works without such value, you may continue but putting "!important" doesn't hurt the XtGem builder at all.
Now, you should do the same thing all over again for other elements. With the same method, you can change the CSS of your blog into your own creativity, besides, you deserves the power isn't it?
Now, after saving your CSS, check your blog. And see if you satisfies with it. If not, change the style again.. If you do, you can commit another changes for another style. Just remember to inspect anything the XtBlog displays itself, so you can view the styles and modify it.
By using the inspector of your browser, you can change the CSS on-the-fly without having to submit multiple changes on XtGem. However, the scope of this tutorial is not to teach you how to use the inspector tool, so take your time to learn it! After you satisfy with the mods you made via the inspector, you may copy your CSS from the inspector into the CSS file on your XtGem's file storage.
