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 by Gibbo CSS

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

Theme: Beach by Gibbo CSS

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

6 Responses to 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.

  1. james says:

    Hello, thanks for the css help. The problem I am having with this beach theme is, i want to change the site name from the orange box with the site name in it to my own custom image instead. I’ve tried rewriting the css many times with no luck
    Thanks for your help,

    Like

  2. Jeff says:

    Thanks a lot for the theme and for the editing info above. I’ve used it here for my Urdu language blog: http://paradigmbilling.com/wordpress/

    My question is a little naive one: How do you access the code that we are supposed to modify? For instance, where exactly is this code located:

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

    Should I go to the Theme Editor?

    Once again, sorry for the naive question.

    Thanks in advance,

    Jeff

    Like

    • Hi Jeff….
      Just go to the “Appearance–>Editor” and from the right side select “Style.css” (by default it remains selected though)
      and paste the code at the bottom of that style.css

      **Let me know if you have any question

      Regards
      Om

      Like

  3. Jeff says:

    Thanks a lot Om, it worked like a charm!

    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

%d bloggers like this: