Theme: Choco by .css{mayo} CSS Style Sheet Edit and Modify: Header Site Title, Site Description, Blog Post Title’s and Post Content, Right Side bar and Navigation menu, Post meta’s Font type, font color, size and text alignment hide or don’t show Site Title,navigation menu,footer link and RSS link

theme choco css by mayo

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.

 

(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;
}

27 Responses to Theme: Choco by .css{mayo} CSS Style Sheet Edit and Modify: Header Site Title, Site Description, Blog Post Title’s and Post Content, Right Side bar and Navigation menu, Post meta’s Font type, font color, size and text alignment hide or don’t show Site Title,navigation menu,footer link and RSS link

  1. Any codes for Picture Hover effects?

    Like


    • 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>
      

      Like

  2. Kam says:

    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 ?

    Like

  3. Kam says:

    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;
    })

    Like

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

      Like

  4. Kam says:

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

    Like

    • 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;
      }

      Like

  5. Kam says:

    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 ?

    Like

    • 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…….

      Like

  6. Kam says:

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

    Like

  7. Kam says:

    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 !

    Like

  8. Kam says:

    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 ?

    Like

  9. Kam says:

    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 😦

    Like

  10. Kam says:

    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;-)

    Like

    • 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…

      Like

  11. Kam says:

    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

    Like

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

      Like

  12. Coach says:

    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.

    Like

  13. Hi David,
    pls share me your site url to check

    Om

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s