First Dynamic View Template : Elite Classic

Elite Classic Dynamic View Template

Presenting the First Ever Blogger Dynamic View Template on the Web named Elite Classic. Well its a very interesting thing that even though it has been possible to create Dynamic View Templates for a while now yet no one has created it. Coming to the core functionalities of this template ,it is based on the Classic Dynamic View and Supports the Template Designer fully. The modifications done are all CSS based. The reason for its creation was the monotonous look of the Dynamic Views and no real choice of a different style to choose from in being present.


Demo


Download

Screenshot

Elite Classic

Complete List of Features

-Responsive Design
-Attractive Post Title
-Sticky Sidebar and Menu
-Stylish commenting system design
-CSS3 Gradients powered Header design
-Full support for Template Designer
-Threaded Reply feature 
-90%+ Google Page Speed score 
-AJAX Search Box
-Cross browser compatibility except Opera
-Custom Gadget Dock Design
-Attractive web fonts like HomeMade Apple and SunShiney


How to Upload Elite Classic Template ?

In case you are using Standard Template , then firstly Back Up your template.


For Old Interface Users

- Go to Design > Template Designer and Under Template sub-heading select the First template under the Dynamic Views Category

Blogger Template Designer

- Now go back to Edit HTML

- Click on Choose File button

- Select the .XML template file Extracted from Zip and click Open button

- Click On Upload button

- In the Keep Widgets Option, Click on DELETE WIDGETS Button

- You are Done!!


For New Interface Users

- Go to Template > Customise and Under Template sub-heading select the First template under the Dynamic Views Category

- Now go back to Template and Click the Backup/Restore button in the Top Right

Backup/Restore button

- Click on Choose File button

- Select the .XML template file Extracted from Zip and click Open button

- Click On Upload button

- You are Done!!


How to Change Fonts and lots of Other things ?

Since this template is Support Blogger Template Designer, so

Go to Design > Template Designer tab (New Interface users go to Template > Customise )

You will find Background Option and Advanced Options.

Play around to get your own unique color Scheme.


Note: In case both these methods don't work , then simply copy the following CSS in the Advanced > Add CSS Section of the Template Designer  of your Dynamic Template:

#gadget-dock {right:0px !important;}
.title a:hover {text-decoration:none !important; }

.header-bar{/* IE10 */ 
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #C6AEC7 100%) !important;

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #C6AEC7 100%) !important;

/* Opera */ 
background-image: -o-linear-gradient(top, #FFFFFF 0%, #C6AEC7 100%) !important;

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #C6AEC7)) !important;

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #C6AEC7 100%) !important;

/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #FFFFFF 0%, #C6AEC7 100%) !important;
-moz-box-shadow: 0 0 0px 0px transparent !important;
-ms-box-shadow: 0 0 0px 0px transparent !important;
-o-box-shadow: 0 0 0px 0px transparent !important;
-webkit-box-shadow: 0 0 0px 0px transparent !important;
box-shadow: 0 0 0px 0px transparent !important;}

#header .header-drawer.sticky {top:65px !important;}

#header .header-drawer {-moz-box-shadow: 0 0 0px transparent !important;
-ms-box-shadow: 0 0 0px transparent !important;
-o-box-shadow: 0 0 0px transparent !important;
-webkit-box-shadow: 0 0 0px transparent !important;
box-shadow: 0 0 0px transparent !important;}

.viewitem-panel {border-top: solid 0px transparent !important; }

.comment-content{white-space: pre-wrap;width: 95%;word-wrap: break-word;}
.comments .comments-content .comment {background: white;position: relative;-webkit-border-radius: 0px 100px 120px;-moz-border-radius: 0px 100px 120px;-o-border-radius: 0px 100px 120px;border-radius: 0px 100px 120px;padding:5px;}
.blogger-comments .comments-content  {background:White !important;}
span.comment-actions, .continue {width:120px;background: #F1F1F1;border-radius: 20px 20px;-moz-border-radius: 20px 20px;-webkit-border-radius: 20px 20px;-o-border-radius: 20px 20px;text-align:center;font-weight:bold;text-decoration:none !important;}
span.comment-actions:hover, .continue:hover {background: #EBDDE2;text-decoration:none !important;}
.secondary-text{padding: 6px 12px 6px;text-decoration:none !important;}
.comments .comment .comment-actions a:hover{text-decoration:none !important;}
.comment-replies span div ol div li span {display:none !important;}
.comments .thread-toggle {background: #F3F3F3;border-radius: 20px;-webkit-border-radius: 20px;-moz-border-radius: 20px;-o-border-radius: 20px;padding: 6px 12px 6px;font-weight: bold;}
.comments .thread-toggle:hover {background: #EBDDE2;}
.comments .comment-block {padding: 11px !important;margin-left: 48px;position: relative;left: 60px;background:#F1F1F1;border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;-o-border-radius: 10px;width: 400px;}
.comments .avatar-image-container img , .comments .avatar-image-container img {overflow:visible !important;width:40px !important;max-width:40px !important;}
.blogger-comments .comments-content .comment-replies {background:white !important;}
.comments .avatar-image-container {width:40px !important;background: #F1F1F1;padding: 5px;border-radius: 100px;}
.avatar-image-container img,.avatar-image-container a img, .avatar-image-container {border-radius:20px;position:relative;height:40px;width:40px;background-clip:padding-box;}
#gadget-dock {right:0px !important;}
#header .header-drawer.sticky {top:65px !important;}
.blogger-comments .comments-content .comment {border-bottom: 1px solid White;!important;}
.comments .avatar-image-container {max-height:50px !important;}
.comments .comments-content .comment-header {width: 450px;background:#F1F1F1;position: relative;left: -73px;}
.comments .comments-content .user {font-style: normal;font-weight: bold;position: relative;left: 80px;}
.comments .comments-content .datetime {position: absolute;left: 270px;}
.comment-thread ol div.continue {display:none !important;}

 .viewitem-content { background-color: #EBDDE2!important;
border-radius:120px !important;-webkit-border-image:url('http://www.blogger.com/img/blank.gif') !important;border-image:url('http://www.blogger.com/img/blank.gif') !important;-moz-border-image:url('http://www.blogger.com/img/blank.gif') !important;-o-border-image:url('http://www.blogger.com/img/blank.gif') !important;-ms-border-image:url('http://www.blogger.com/img/blank.gif') !important;}
.article .article-header .title {background-color: #EBDDE2!important;font-size: 30px !important;}
.article .article-content img:not(.deferred)  {border: 8px solid transparent;
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
-webkit-background-clip:  padding-box;-webkit-border-image:url('http://www.blogger.com/img/blank.gif') !important;border-image:url('http://www.blogger.com/img/blank.gif') !important;-moz-border-image:url('http://www.blogger.com/img/blank.gif') !important;-o-border-image:url('http://www.blogger.com/img/blank.gif') !important;-ms-border-image:url('http://www.blogger.com/img/blank.gif') !important;
-moz-background-clip: padding-box;
background-clip: padding-box;}


.gadget-icons {background-color:salmon !important;}
#gadget-dock {background-color: transparent !important;}
.gadget-title {background-color: gold !important;}

.gadget-selected .gadget-title {
background-color: gold !important;
border-radius: 0px 0px 1000px 1000px !important;
text-align: center !important;
}

.gadget-selected .gadget-icons ,.gadget-content ,.gadget-container, .gadget-selected.gadget-dock-overflow-bottom .gadget-container    {
background-color: yellowGreen !important;
}



li.item {
background-color: #EBDDE2!important;
-moz-border-image: url('http://www.blogger.com/img/blank.gif') 2 2 2 2 / 2px 2px 2px 2px repeat !important;
border-radius:120px !important;-webkit-border-image: url('http://www.blogger.com/img/blank.gif') !important;border-image: url('http://www.blogger.com/img/blank.gif') !important;-o-border-image: url('http://www.blogger.com/img/blank.gif') !important;-ms-border-image: url('http://www.blogger.com/img/blank.gif') !important;
}
#header .header-drawer {background-color: #C6AEC7 !important;border-radius: 0px 0px 20px 20px !important;} 
.ss,.blogger-gear , .feedback , .Flipcard, .Magazine, .Mosaic, .Sidebar, .Snapshot, .Timeslide, .Classic, #views {display: none !important;}
#header #pages::before {
border-left: solid 1px transparent !important;}


#header .tabs li {font-size:20px;}

.entry-title {  word-wrap: break-word !important;

 padding: 0 25px;
 height: 40px;
 
 color: #301607;
 
 background-color: #c94700;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#c94700), to(#b84100)); 
    background-image: -webkit-linear-gradient(top, #c94700, #b84100); 
    background-image:    -moz-linear-gradient(top, #c94700, #b84100); 
    background-image:     -ms-linear-gradient(top, #c94700, #b84100); 
    background-image:      -o-linear-gradient(top, #c94700, #b84100); 
    background-image:         linear-gradient(top, #c94700, #b84100);
 
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        
 position: relative;
 float: left;
 clear: left;
 
 font-size: 32px;   
 line-height: 40px;
 text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
    
    border-bottom-right-radius: 20px 5px;
 }
 
.entry-title:after {
 content: ""; 
 display: block;
 width: 40px;
 height: 0px;
 
 position: absolute;
    right: 0;
    bottom: 4px;
    z-index: 20;
 
 border-bottom: 80px solid #de6625;
 border-right: 80px solid transparent;
 
 -webkit-transform: rotate(90deg);
    -webkit-transform-origin: right bottom;
    -moz-transform: rotate(90deg);
    -moz-transform-origin: right bottom;
    -o-transform: rotate(90deg);
    -o-transform-origin: right bottom;
    -ms-transform: rotate(90deg);
    -ms-transform-origin: right bottom;
    transform: rotate(90deg);
    transform-origin: right bottom;
 } 
 
.entry-title:before {
 content: ""; 
 display: block;
 width: 20px;
 height: 0px;
 
 position: absolute;
    right: 0;
    bottom: 4px;
    z-index: 10;
 
    border-bottom: 80px solid rgba(0, 0, 0, 0.3);
 border-right: 80px solid transparent;
 
 -webkit-transform: rotate(80deg);
    -webkit-transform-origin: right bottom;
    -moz-transform: rotate(80deg);
    -moz-transform-origin: right bottom;
    -o-transform: rotate(80deg);
    -o-transform-origin: right bottom;
    -ms-transform: rotate(80deg);
    -ms-transform-origin: right bottom;
    transform: rotate(80deg);
    transform-origin: right bottom;
 }

.entry-title:after { 
 width: 0px;
 height: 40px;
 
 position: absolute;
    right: -160px;
 
 border-left: 80px solid #de6625;
 border-bottom: 80px solid transparent;
 
 -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none;
    transform: none;
 }
.hfeed {margin-top:50px;} 
#header .header-bar .title h1 {font-size:39px !important;}

.article .article-content ,  .viewitem-panel .article  {background-color: #EBDDE2 !important}




Feel free to share your opinion about this template and any problems that you face while implementing it

Demo


Download

Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox

Post a Comment

WOW... Very Cool ^_^

aimanayie said...

wauuu. great!!

very nice!

Pradeep said...

You genius, did the impossible!
:)

Fantastic. Rare to find. Thank You with admiration.

Unknown said...

awesone

enzo said...

This one looks really nice. I'll try this in my next blog.

Firstly thanks , it was possible but no one created it till now

Thanks for the appreciation

Thank you

Thanks for liking the work ^_^

Tatose said...

Classic! Looks so beautiful. Is it support for adsense? by Jedidiah Crown

Thanks ,Yes AdSense now inherently supported in all Dynamic Views Templates including this

tess said...

I like the color of the template.For me it is more of a feminine template.You are a good designer .I am sure there will be some of us who will use this template.

thanks for this! though I'm not yet confident to change or adjust my template to a different one. I'm afraid it wouldn't turn out right or how I expect it to be.

I'm planning to make another blog using one of these latest templates.
Thanks for this information.

Thanks for appreciating the Color Scheme :)

Hi Prayag,
This template seems to be a pro but is it fluid width or fixed width ?

Firstly Thanks

and its a Fluid width template

Nice theme you got here! How i wish I know how to make themes too with the codes and all! Kudos to you! :)

Thanks for liking the work, Making templates isn't that difficult as you think , just dig in and you will see the simplicity of it

dude its amazing !!

Thanks Kapil

nodi said...

hi! great template, great work!
i see it as tutorial but i cant find the way to make the ''attractive post title''.. i can't figure the way in the ccs code! i set my image as background in article header tltle or in article header but always there is some problem.
could you help me how to solve it?

sry about my bad english.

Unknown said...

First, I love the look of this template! Perfect for what I am trying to accomplish.
I'm having a few issues with the customization:
In Template Designer, it won't allow me to make changes to the layout. It is grayed out and says, "not applicable for this template"
I make adjustments to the width, save it and it gives the message that it saved but, there is no change when I view my blog.
I have added pages in dashboard but they do not show up on my blog. When I go to that section of the dashboard, it says "don't show" pages. I manually change to "top tabs" and save, then it changes to "side tabs"
I'm not sure how to fix this - I have a friend who uses the same template and all her pages show up on her blog. If I need to start over, I guess I can do that but, I'd like to know if there might be something simple I'm missing.

Thanks!!

A. said...

Vowww...Your blog looks super fantastic! I could not take my eyes of it and read your content:) Do you also design and sell custom made original templates?

A. said...

Salsa font and wooden texture look somehow amazing together!

A. said...

I tried to download the template but I received following xml error:SyntaxError) : Unexpected token < Any Idea?
By the way, I could hardly find your demo and download buttons, they look so white and so invisible...Anyway, I think you are not a wannabe, already a designer and a very good one.

Evee said...

Hi Prayag,

Actually I love this template, but unfortunately I can't get the beautiful color as your template demo, only black and white. Could you give me advice for this matter ?
Hope you answer my message because I need your help to make up my blog.

Thank you before Prayag.

Regards,

Evee said...

Note : I have added the code to CSS section, but still not works.

Anonymous said...

i use this template (Elite Classic) but not work ...
my template still black white ....
and added the css, but same still black white ...
please help me

artmag said...

Thank so mutch