Theme: Beach by Gibbo CSS Upgrade and Style Sheet Edit:Hide or Modify Side Bar, Header Portion,Site Title,Site Description,Footer Comments,Tagline, Navigation Menu, Blog Post Content,Background Image also edit or change font,font color,font type and text align and more.

Theme beach is really nice as it gives your blog the touch of the nature of beach. Nice and cool looking Theme beach by Gibbo. Now its the time
for you to modify the CSS/Style sheet to give it your own touch.

As usual I have included some basic and important CSS Style sheet modification which will help you if you are new or novice in CSS.
Here I have tried to show you about the Font color,font type and font size,width, text alignment modification of Site Title, Site Description,blog post and left side bar.

Also you will be able to know how to hide navigation menu, font color change of navigation menu, footer section hide or remove, remove or hide comment box,previous
comment etc.

Important Note: I did this modification according to the Theme Beach of WordPress.com self hosted blog.

Need Help ?? – If you didn’t understand or till facing CSS related issues feel free to contact me. Just send me your problem using the
comment box below

(1) If you don’t want to show Header Portion (Site Title + Site Description + BackGround Image)

// To do this you have to change in #branding to modify in CSS as below.

#branding {
background: url(“images/landscape.gif”) repeat-x scroll 60% 100% #77BBDD;
display: none;
min-height: 75px;
position: relative;
width: 100%;
}

(2) If you want to change the header Background Image or Banner Image, Banner Height, Width Etc

#branding {
background: url(“images/landscape.gif”) repeat-x scroll 60% 100% #77BBDD; // Change the URL Here
display: block;
height: 240px;
min-height: 150px;
position: relative;
width: 100%;
}

(3)If you want to change Upper side BackGround Image of your blog

#main {
background: url(“images/sea-sand.gif”) repeat-x scroll 0 0 #115577; // Change the URL with your image location(300×300)
}

(4) If you want to Change Site Title’s BackGround Color,Font Type, Font Color, font size

#site-title a {
background-color: orange;
color: #FFFFFF;
display: inline-block;
font-family: cursive;
font-size: 21px;
max-width: 600px;
padding: 12px 20px;
text-decoration: none;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
z-index: 1000;
}

(5)If you want to change Site Description’s font color, font type,font size

#site-description {
color: red;
font-family: times New Roman;
font-size: 22px;
font-weight: bold;
max-width: 600px;
padding: 10px 20px;
}

(6) If you don’t want to show or hide site description

#site-description {
color: #000000;
display: none;
font-size: 22px;
font-weight: bold;
max-width: 600px;
padding: 10px 20px;
}

(7) If you don’t want to show or hide navigation Menu (“Home” “About Me” etc)

#main .access div {
background: url(“images/menu-bar-bg.png”) repeat-x scroll 0 0 transparent;
display: none;
float: left;
padding: 5px 20px 0;
width: 800px;
}

(8)If you want to change Navigation Menu’s font Color, font type and font size and Menu Background Color

#main .access a {
background: url(“images/white-trans-50.png”) repeat scroll 0 0 transparent;
color: blue;
display: block;
font-family: times New Roman;
font-size: 14px;
line-height: 1.5em;
margin: 0 4px 4px 0;
padding: 2px 10px;
text-decoration: none;
}

#main .access .current_page_item a {
background: none repeat scroll 0 0 #FFFFFF;
color: blue;
font-family: times New Roman;
font-size: 15px;
}

(9)If you don’t want to show or hide “entry meta” i.e – “Post Date” and “Post by” information

.entry-header .entry-meta {
display: none;
position: absolute;
top: 0;
}

(10)If you want to change blog post Title (Entry Title) font color, font type,font size and background Color

.entry-title a {
color: white;
font-family: cursive;
font-size: 25px;
text-decoration: none;
}

(11) If you want to change Blog Post Content’s font size,font type, font color and text alignment

.entry-content, .entry-summary {
font-family: tahoma;
font-size: 1.1em;
padding: 3em 0 0;
text-align: justify;
}

(12)If you dont want to show footer’s tag or hide

.entry-meta {
clear: both;
display: none;
}

(13) If you want to change Left SideBar widget’s font type,font color and font size

.widget-title {
background: url(“images/black-trans-25.png”) repeat scroll 0 0 transparent;
color: #EEEEDD;
font-family: times New Roman;
font-size: 21px;
font-weight: bold;
margin: 0 -10px 7px;
padding: 2px 10px;
}

(14) If you want to change Blog Post Content Background Color

.entry-content, .entry-summary {
background-color: gray;
font-family: tahoma;
font-size: 1.1em;
padding: 3em 0 0;
text-align: justify;
}

(15) If you want to change blog Post Title’s Background Color of Theme Beach (With Entry Meta + Blog Post Title)

.entry-header {
background-color: red;
display: block;
padding: 2em 0 0;
position: relative;
}

(16)If you don’t want to show theme name with Author at the bottom of your blog

#site-generator p {
display: none;
font-size: 11px;
margin: 0;
padding: 0 10px;
}

(17) If you want to change footer background color OR footer background image

#colophon {
background: url(“images/ocean-floor.gif”) repeat-x scroll center top #001122;
display: block;
margin-top: -50px;
padding: 100px 0 0;
}

(18) If you want to change Blog Post Content’s Width of Theme: Beach by Gibbo

hgroup[role=”banner”], #main .access, #primary, #site-generator {
display: block;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: 0;
width: 1000px;
}

#content {
float: right;
width: 767px;
}

(19) If you don’t want to show/hide left sidebar of Theme: Beach by Gibbo

#sidebar {
display: none;
float: left;
width: 220px;
}

(20)Image instead of Site Title or Blog Name of Theme: Beach by Gibbo

Note: Remove Site Title from Settings->General from your Dashboard Then do the followings

#site-title {
background-image: url(“http://s1.wp.com/wp-content/themes/pub/twentyten/images/headers/fern.jpg?m=1300134058g”); // Change address in URL
}

(21) If you don’t want to show Total Comments (Previous Comments + Leave a Reply) of Theme: Beach by Gibbo

#comments {
display: none;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
margin-top: 0;
}

(22) If you don’t want to show/hide “Leave a Reply” commenting box of Theme: Beach by Gibbo

#respond {
display: none;
overflow-x: hidden;
overflow-y: hidden;
}

(24) If you want to change Blog Post Title (Entry Title’s) Background Color of Theme: Beach by Gibbo

.entry-title {
background-color: red;
font-size: 22px;
font-weight: bold;
}

(25)If you want to change “Leave a Reply”‘s font type,font color and font size of Theme: Beach by Gibbo

#reply-title {
color: black;
font-family: cursive;
font-size: 24px;
font-weight: bold;
margin: 0 0 10px;
}

You may also like to check

1. WordPress.com Visitor Tracking :Know who is visiting your site
2. WordPress.com Flick Flash Gallery: Show your flickr photos to your readers
3. WordPress.com animated Photo gallery : Show your images stored in WordPress with WordPress animated photo gallery
4.WordPress.com Visitors Flag : Where from your users visiting you.
5.WordPress Free Blog Favicon Icon : Show Your Favorite images on the addressbar.
6.WordPress Unicode Font Support: Learn How to Write and Use Unicode Font in WordPress.com free blog.