WordPress.org

Ready to get started?Download WordPress

Forums

How I modified Snow Summit theme without knowing anything about CSS (5 posts)

  1. themidnightmama
    Member
    Posted 2 years ago #

    Hi there,

    I just wanted to write this post to help anyone out who wants to make changes to the Snow Summit theme. I really wanted a simple 3-colomn theme and liked the Snow Summit but wasn't completely happy with the design. I have no idea how to use CSS but worked out how to make changes through a little research and basically tweaking the code, one step at a time, and seeing what changes it would make. I just made sure I kept a copy of the orignal code pasted in word so I could just paste back in the orignal code, if things went wrong.

    Here are some things that I changed and maybe it could help anyone out who wants to change the design a bit too. You can see my blog with changes here.

    http://themidnightmama.com

    If you find any of the information I share with you useful then it would be great if you could leave a comment on my blog. Cheers.

    WordPress snow summit theme changes

    To remove the date/time at top go to THEME FUNCTIONS

    remove
    {
    ?>

    Today's date: <?php echo date('l M d Y');?>
    |
    Current time: <?php echo the_time();?>

    <?php
    }

    I also removed the entire bar at top of header by going to header .css. Can't remember what code it is...if you can't find it then let me know and I can just email you my entire css header code...that omits the header bar.

    To change size of static page titles go to NAV in the STYLE.CSS and go to this code:

    }
    #topnav,
    div.menu {
    font-size: 30px;

    Change the font-size to what ever you want. I can't remember the orignal size, but you can see that I have changed it to 30

    To change the search bar under the nav title go to TO STYLE.CSS and see the following:

    .hsearch {
    clear:both;
    text-align:center;
    width:930px;
    margin: 0 auto;
    padding:5px;
    background: #FFEFD5;

    I adjusted the colour of Search nav bar by changing background color code

    I adjusted the position of the Search button by making the text-align:right instead of center

    I removed the image grain effect by taking out following code:
    url(images/hsearch-wh.png) repeat-x;

    I removed the box shadow by taking out the following code which is in style.css after the #site description codes:

    #header-widget-area { float:right;padding:0 10px 15px 10px;}
    #branding img {
    clear: both;
    display: block;
    box-shadow: 0px 3px 3px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.1);
    background:#ffffff;
    }

    To take out the image grain from widget boxes/side bars remove code from infobox h3..( for some reason I dont have the code anymore but just try deleting different codes sometwhere under the infobox h3 till you find it..make sure to save your work and only do one step at a time or alternatively just copy in my code for this section below)

    To remove the light coloured square header box beneath grain effect remove this code from infobox h1:

    url(images/hbg.png) repeat-x

    I also changed the colour of the widget side boxes/bars and text size at this same section of the code, that is in the STYLE.CSS where it says 'infobox' - play with different ideas by changing the color code and the font-size. Here is the final code I have for this section:

    .infobox {
    background: #fffaff url(images/hbg.png) repeat-x;
    padding:5px;
    margin:10px 0 10px 0;
    color: #000000;
    }
    .infobox h3 {
    background: #f9f9f9;
    color: #000000;
    margin: 5px 0 0 0;
    font-size:16px;
    font-weight: normal;
    padding:10px;
    }

    .infobox h3 {
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    }
    To change entire width and give the posts section more width too, so you can fit bigger images in posts, go to:STYLE CSS:

    #wrapper {
    margin: 0 auto;
    width: 940px;

    I changed from 940 to 980.

    Then I went to:

    /* 3-column layouts */
    .three-column #container {
    max-width: 940px;
    }
    .three-column #content {
    width: 51.5%;
    }

    I changed the max -width from 940 to 980 and changed the width percantage from 51.5 to 54.5%

    I made a slightly smaller margin between the left sidebar and content posts by going to STYLE CSS here:

    /* Sidebar-Content-Sidebar layouts */
    .sidebar-content-sidebar #content-container {
    float: left;
    }
    .sidebar-content-sidebar #content {
    margin: 0 24.8%;

    I changed the margin from 24.8 to 21.8%

    Okay that is all for now. I hope it can be of some help to you. Just remember if you are tweaking it to always save your work and only do one step at a time so you can see how it changes.
    Good luck

  2. bcmarketing
    Member
    Posted 2 years ago #

    Do you know how to get rid of the attribution text and link at the very bottom? "Snow Summit by weddingthemes.marriagescene Proudly powered by WordPress."

    Thanks!

  3. dzionizz
    Member
    Posted 2 years ago #

    I need that remove too Snow Summit by weddingthemes.marriagescene Proudly powered by WordPress. and whana know anyone who have this theme contacts for help abit :/

  4. Phil_Force
    Member
    Posted 2 years ago #

    @bcmarketing and dzionizz: I'm pretty new to WordPress, but found a way to remove the content you are looking to remove. This text is specified in your footer.php. You'll need to remove the undesired text from there. Here is my current footer.php without the undesired text:

    [code moderated - use the pastebin for any code over the forum limit of 10 lines]

  5. Digital Raindrops
    Member
    Posted 2 years ago #

    Hi,
    Remove the footer credit!

    #colophon {
        display: none;
    }

    General Tip:
    The theme is based on twenty ten or twenty eleven, so try to use a child theme and make your changes there.

    For the child theme this would be the style.css, and you would copy the screenshot.png to the new child themes folder.

    /*
    Theme Name:     Snow Summit Child
    Theme URI:      http://wordpress.org/extend/themes/snow-summit
    Description:    Child theme for the Snow Summit theme
    Template:       snow-summit
    Version:        0.1.0
    */
    
    @import url("../snow-summit/style.css");
    
    #colophon {
        display: none;
    }

    If you do edit the theme styles then do not edit existing styles, create a section at the end of style.css and add changes, as the styles cascade these will take priority.

    /*
      This section are my Custom style Changes
      Do not edit the styles above just add changes here
    */
    
    #colophon {
        display: none;
    }

    HTH

    David

Topic Closed

This topic has been closed to new replies.

About this Topic