Ethio 24/7 - Entertainment Videos, Music, News, Drama, Television Shows, Blog, Discussions

I recently stumbled on YouGrid template while trying to find a good template that’s customizable enough to look like it was developed from the ground up. I have used the JA Purity template (T3 Framework) and I have enjoyed it. I just wanted to try other templates and I read an article about best Template frameworks that allow you to do major tweaks on the template so that you can make something a lot different from the original template. Anyways, YouGrid template has lots and lots of module positions and I wanted to use the 5 positions to show introduction to some articles. Basically, I just made them look like this.



I searched and searched trying to find out where the css code for these 5 positions is and I couldn’t find it for 2 days. At last while I was looking at other stuff, I found a commented code that shows how to change the individual css code of these module positions. These module positions are User11, User12. User13, User14 and User15 respectively. So, for those of you who want to have your own image, text color, background color or other stuff on the module positions User 11 – User 15, go to Line 170 of the document Layout.css.
Layout.css is found in the Directory for your website\ templates\yougrids\css.  On my computer I use Xampp so it is located in C:\xampp\htdocs\MyWebsite\templates\yougrids\css
Go to line 170 or find #yjsg1 #top5
YouGrid template is made up of grids and each grid contains module positions. Module positions User 11 – User 15 are in the #yjsg5.
Customizing each one of them taking user11 as an example would look something like this

#yjsg5 #User 11 {
 Write any customization you like here.
}

So Old Code
#yjsg1 #top5 {
/*background:none;*/
}

My New Code (You should write your own code)

#yjsg1 #top5 {
/*background:none;*/
}
#yjsg5 #user11 {
background:url(../images/metal/User11.png) no-repeat;
color:black;
}

#yjsg5 #user12 {
background:url(../images/metal/User12.png) no-repeat;
color:yellow;
}

#yjsg5 #user13 {
background:url(../images/metal/User13.png) no-repeat;
color:black;
}

#yjsg5 #user14 {
background:url(../images/metal/User14.png) no-repeat;
color:black;
}

#yjsg5 #user15 {
background:url(../images/metal/User15.png) no-repeat;
color:black;
}