What's New at XtGem Know XtGem's updates - even the small ones - in a way explained loong. Psst, this is not the official Xtgem Blog
What's NewAboutXtToolsForumContactGallery

Force Modify XtBlog CSS

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

Tutorial's Difficulty

This should be moderate for most users, easy for expert or experienced CSS coder or browser inspector.

Element Inspection

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.

Making CSS

.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?

Check your Blog

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.

TIPS

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.

Leave a respond on this tips on the forums!
Content last updated on:3rd May 2014 1:55pm GMT

BackBack to top
Rate this siteGuestbook
Online 1 • 1 views today • 543 views
Terms of Service | Privacy

Links you might want to visit

XtGem Official BlogXtGem's Knowledge BaseXtGem Official ForumXtBoardTrainerPlus - an in-depth site to understand XtGemTutor Lewat HP (Indonesia)Extras!
U 1 | D 1 | W 1 | M 4 | T 543
powered-by-xtgem

whatsnewat.xtgem.com is handled by GreenWap for XtGem