I really like this Choco theme by mayo. It really seems chocolaty to me. Its astonishing design gives your site a new and glamorous look. So, if you have purchased css upgrade or using Choco theme for your blog or website then the following CSS Style sheet modification will be a great help for you.
Here, I have shown how to modify or edit Header Site Title, Description, Post title, blog content, Right side bar, navigation menu, post meta’s Font type, font color, size and text alignment. Also if you don’t want to show or hide Site Title, navigation menu, footer link and RSS link then also you can get a guide from the modification below.
** If you need any help Regarding CSS , feel free to ask me by using the Comment Box.
Download Choco Theme
Demo of Choco theme
(1) If you want to remove total Header Portion (Site title, Site Description with Navigation menu) from your blog
#header {
display: none;
padding-bottom: 30px;
padding-left: 0;
padding-right: 0;
padding-top: 30px;
position: relative;
z-index: 100;
}
(2) If you want to change Site Title’s Font type, font color and Font size
#logo a {
color: white;
font-family: times New Roman;
font-size: 35px;
}
(3) If you don’t want to show or hide site Title in choco theme
#logo a {
color: #FFFFFF;
display: none;
}
(4) If you don’t want to show Site Description
#header .description {
color: #848282;
display: none;
}
(5) If you want to change Site Description’s Font clor, font size and Font type
#header .description {
color: white;
font-family: times New Roman;
font-size: 18px;
}
(6) If you don’t want to show or hide only navigation menus
#nav {
display: none;
float: right;
font-size: 12px;
font-weight: bold;
line-height: 15px;
margin-top: 20px;
text-transform: uppercase;
}
(7) If you change the font color of Navigation menus
#nav ul li a {
color: red;
float: left;
padding-bottom: 0;
padding-left: 10px;
padding-right: 10px;
padding-top: 0;
position: relative;
text-decoration: none;
z-index: 10;
}
(8) If you want to change blog post title’s font, font color, font size
.post-title a {
color: red;
font-family: times New Roman;
font-size: 34px;
text-decoration: none;
}
(9) If you want to change Blog Post Date’s font color, font type and font size
.post .date span.day {
color: black;
font-family: times New Roman;
font-size: 25px;
}
.post .date span {
color: black;
font-family: times New Roman;
font-size: 20px;
}
(10) If you want to change your Blog Post contents font type, font size, text alignment
.post .entry {
font-family: times New Roman;
font-size: 16px;
overflow-x: hidden;
overflow-y: hidden;
text-align: justify;
}
(11) If you want to change Right Sidebar’s Header font type, font color, font size
#sidebar h4 {
background-image: url(“images/widgettitle.jpg”);
color: red;
font-family: times New Roman;
font-size: 18px;
text-shadow: 0 1px 1px #222222;
}
(12) If you don’t want to show footer tags
p.tags {
display: none;
font-size: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
}
(13) If you want to change post meta font type, font size and color
.post .meta {
color: #444444;
font-family: Verdana,Tahoma,Arial,Sans-Serif;
font-size: 10px;
}
(14) If you don’t want to show post meta (author’s info and date)
.post .meta {
color: #444444;
display: none;
font-family: Verdana,Tahoma,Arial,Sans-Serif;
font-size: 10px;
}
(14) If you don’t want to show RSS link in the top side
#rss-link {
display: none;
position: absolute;
right: -12px;
top: -12px;
}
(15)If you want to change the Comments Font of Theme: Choco by .css{mayo}
#comments {
font-family: cursive;
}
(16)If you don’t want to show or hide the comments + Leave a reply in Choco Theme
#comments {
display: none;
}
(17) If you want to change Blog Post Contents Background Color
.post .entry {
background-color: green;
overflow-x: hidden;
overflow-y: hidden;
}
(18) If you want to change Blog Post Title’s Background Color
#content .post-title {
background-color: red;
font-size: 27px;
margin-bottom: 21px;
}
(19) If you don’t want to show right side bar
#sidebar {
display: none;
float: right;
margin-top: 80px;
width: 204px;
word-wrap: break-word;
}
(20)If you want to use your own image instead of Site Title or Blog Name
#logo a {
background-image: url(“https://allaboutbasic.files.wordpress.com/2011/03/neutra.png”); //Use the address of your image in URL box
color: transparent;
display: block;
}
You can take my personal help in skype : om2000_cuet
All About Basic 
Any codes for Picture Hover effects?
LikeLike
Hi Andres
Check the following code and save it as name.html. Hope It will give you the basic Idea about How to add Hover Effect in the Image for WordPress.com blog or any other website .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style type="text/css"> .Fadein{ filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; border:0; background-color:red; border:15px; } .Fadein:hover{ filter:alpha(opacity=50); -moz-opacity: 0.30; opacity: 0.30; border:0; } </style> </head> <body> <a href="https://allaboutbasic.files.wordpress.com/2011/03/theme-beach-1.png" style="margin-left:margin-left: 1em; margin-right: 1em;"> <img class="Fadein" border="0" src="https://allaboutbasic.files.wordpress.com/2011/03/theme-beach-1.png" alt="Theme Beach by Gibbo CSS " title="theme-beach-1" width="630" height="348" class="aligncenter size-full wp-image-1401" /> </a> </body> </html>LikeLike
This is gonna be useful for me,
I would like to change my theme and I need to have some personnal changes in Choco theme, it’s a good way to do it with your informations when, like me, we’re noob ^_^ So thank you !
Just a question, is it possible to have a graphic header on it ?
LikeLike
Yes… You can do it…
LikeLike
On wordpress.com (not .org) with css option activated ?
Sound’s great :-])
Can you tell me please what is the css line I have to change ?
The first one ?
(#header {
display: none;
padding-bottom: 30px;
padding-left: 0;
padding-right: 0;
padding-top: 30px;
position: relative;
z-index: 100;
})
LikeLike
THe code should be like that
#header {
background-image: url(“http://xpozkam.files.wordpress.com/2011/06/wpbann.png”);
background-repeat: no-repeat;
padding-bottom: 30px;
padding-left: 0;
padding-right: 0;
padding-top: 49px;
position: relative;
z-index: 100;
}
But your site needs some more modification as your sidebar misaligned to the downside and also.. some components are not properly aligned.
One thing.. are you using wordpress.com self hosted site or another company hosting?
LikeLike
Thanks again for your help,
I using it in wordpress.com theme.
So I’ve made the jump now ^^ Exit my old theme.
I erase all the CSS I used before just to have the proper set, good like this to be aligned ?
Also ? Is there a way to get off the boutons near the header (coz I have them on the vertical menu) ?
LikeLike
HI Kam…
Yes..YOur site is looking fine now…
Dont mind..which buttons you are talking about?
LikeLike
Great ^^
I mean, these buttons : http://xpozkam.files.wordpress.com/2011/06/presse-papiers-3.jpg
LikeLike
Kam
Would you mind to try the following code?
#nav {
display: none;
float: right;
font-size: 12px;
font-weight: bold;
line-height: 15px;
margin-top: 20px;
text-transform: uppercase;
}
LikeLike
Yes allaboutbasic !!! It work’s perfectly :-]=)
When i restart with this new theme, on the CSS windows I just have this :
/* Welcome to Custom CSS!
If you are familiar with CSS or you have a stylesheet ready to paste, you may delete these comments and get started.
CSS (Cascading Style Sheets) is a kind of code that tells the browser how to render a web page. Here’s an example:
img { border: 1px solid red; }
That line basically means “give images a red border one pixel thick.”
CSS is not very hard to learn. If you already know a little HTML it will be fun to move things around on the web page by changing your stylesheet. There are many free references to help you get started. You can find helpful links, starter stylesheets and knowledgable people in the forum:
http://en.forums.wordpress.com/forum/css-customization
We hope you enjoy developing your custom CSS. Here are a few things to keep in mind:
You can not edit the stylesheets of your theme. Your stylesheet will be loaded after the theme stylesheets, which means that your rules can take precedence and override the theme CSS rules. The Sandbox theme is recommended for those who would prefer to start from scratch.
CSS comments will be stripped from your stylesheet. */
/* This is a comment. Comments begin with /* and end with */
/*
Things we strip out include:
* HTML code
* @import rules
* expressions
* invalid and unsafe code
* URLs not using the http: protocol
Things we encourage include:
* @media blocks!
* sharing your CSS!
* testing in several browsers!
* helping others in the forum!
Please use the contact form if you believe there is something wrong with the way the CSS Editor filters your code.
*/
—————————————–
So…
Now I just have your code :
#nav {
display: none;
float: right;
font-size: 12px;
font-weight: bold;
line-height: 15px;
margin-top: 20px;
text-transform: uppercase;
}
Not a problem to have this only ?
Have nothing about border etc.
So I need to put the line I need (to change colors, header etc) step by step ?
LikeLike
Kam..
I think the upper side CSS code are commented so if you remove them it will not hamper your theme’s design……
but it would better you take backup of this file and then try by deleting the codes and then save it…….
LikeLike
Ok for the backups allaboutbasic, you’re right 😉
But I can’t use the original CSS style code (via the button on CSS option in wp.com)
and when i paste it in blank windows, some graphics dissapear :((
So now I just have the code you send me and it works fine ;))
Just have to keep it and adding some code lines (header, colors) ?
LikeLike
Actually Kam..
I didn’t purchase the Custom Css from wordpress.com so I cant use it and check 😦 .
and yes..you have to paste my code..and then you have to add your css code for modification.
LikeLike
Also try to make your header image width = 980px
LikeLike
Ok allaboutbasic,
It seem simple like this, the wp.com css windows offert the possibility to add lines for the theme, it work good and this way is more simple for me (not to check all the css code to change it but just add some stuff ^^).
And, what is the code I use to add for the header and some colors changing ?
(sorry for my english, not very good all the time ^^)
Thanks again for all your help !
LikeLike
Do you want to change the color of ” XPoz kam” (your header site title)?
also..send me the url of your header image.
LikeLike
Got an idea ^^
maybe a way to do things easily with the removing of the header (font and space),
after what i just have to arrange one on the menu to the right just like this :
what do you think about it ?
LikeLike
Sorry allaboutbasic, I don’t have skype 😦
seem wordpress.com change the rules this afternoon :-O…
no way to edit the css like i do before, now there’s an upgrade for graphic stuff,
and it’s not free (but I’ve pay for CSS editing -_-), damn 😦
LikeLike
Graphic stuff?? What type of stuff you are trying to add? is it mp3 or video?
LikeLike
No I just mean some images graphics (logo, icons etc.).
I am grateful to you for the help, my most urgent and main problem was this row of buttons at the top of the page, due to the lack of time, I would see later for the other changes, still thank you;-)
LikeLike
Ok Kam…
Yesterday you told me about the spacing in the Header side…
** Ok..remove the Logo (text) and paste this code (It will reduce the header site spacing…but u have to remove the logo first)
#header {
padding-bottom: 0;
padding-top: 0;
}
Freel free to let me know if you need any type of Help…
LikeLike
Hi allaboutbasic,
thanks for this help again ^_-
I note all et see this later for sure…
(i work, without lotta time, for exposure the 1st of next month)
Cheers
LikeLike
Welcome Kam…
Feel free to contact me if you need any type of help
Also It will be highly appreciable if you participate by donating for this blog upgradation.
Regards.
LikeLike
This is very helpful. Thank you. I want to replace the Site Title with a logo but when I use this:
#logo a {
background-image: url(“https://allaboutbasic.files.wordpress.com/2011/03/neutra.png”); //Use the address of your image in URL box
color: transparent;
display: block;
}
The site title is still there and my logo does not appear. I did replace the url with a link to a logo in the sites media library.
Any suggestions are appreciated.
LikeLike
Hi Coach
Would u mind to share me your site address to check?
Om
LikeLike
Hi David,
pls share me your site url to check
Om
LikeLike