Hacking Scholar,: theme manual not enough for my needs

I've got Scholar working with the latest WPMU and BuddyPress and have been able to customize the theme for color etc...but...

...I'd really like to have different fonts for things like the Header Title and Author. Which CSS should I be altering please?

Also, I don't really want to use the spotlight and would prefer to have the left hand sidebar on the right and of a different dimension. Which files do I need to hack?

You say there are theme manuals but they are terribly basic. Is there a quick guide to indicate how this theme has been assembled. When I look at Firebug I seem to see all manner of interdependencies but it is very confusing.

Many thanks

  • Tammie

    @dahowlett: There is no guide but you can change fonts using the default.css (it would use the sage colouring) and then under custom styles just change the fonts using the drop downs. If you want to do via css I'd suggest using the child theme and you need to change all of these classes to change all font references:


    input[type="button"], .button{
    font-size: 14px;
    font-weight: bold;
    font-family: Tahoma, Helvetica, Sans-serif;
    }

    textarea{
    font-size: 12px;
    font-weight: normal;
    font-family: Tahoma, Helvetica, Sans-serif;
    }

    input[type="submit"]{
    font-size: 14px;
    font-weight: normal;
    font-family: Tahoma, Helvetica, Sans-serif;
    }

    input[type="text"]{
    font-size: 12px;
    font-weight: normal;
    font-family: Tahoma, Helvetica, Sans-serif;
    }

    input[type="search"]{
    font-size: 12px;
    font-weight: normal;
    font-family: Tahoma, Helvetica, Sans-serif;
    }

    input[type="password"]{
    font-size: 12px;
    font-weight: normal;
    font-family: Tahoma, Helvetica, Sans-serif;
    }

    select{
    font-size: 12px;
    font-weight: normal;
    font-family: Tahoma, Helvetica, Sans-serif;
    }

    body{
    color: #111111;
    background-color: #666666;
    font-family: Tahoma, Helvetica, Sans-serif;
    }

    h1{
    }

    h2{
    }

    h3{
    }

    h4{
    }

    h5{
    }

    h6{
    }

    Beyond that just pick and choose using firebug which classes you want. Author names and so on are in meta classes:

    .meta-author{
    background: url('../images/male.png') no-repeat;
    background-position: 0px 2px;
    }

    .meta-category{
    background: url('../images/blogs.png') no-repeat;
    background-position: 0px 2px;
    }

    .meta-comments{
    background: url('../images/listen.png') no-repeat;
    background-position: 0px 2px;
    }

    .meta-date{
    background: url('../images/options.png') no-repeat;
    background-position: 0px 2px;
    }

    .meta-tag{
    background: url('../images/tag.png') no-repeat;
    background-position: 0px 2px;
    }

    To list every single class would be beyond any manual that's why we have the option to customise using theme options. We do however clearly mark out css files if you see there is one called typography which has all font styling and each style under styles/ has it's own for background images, colouring and font specific calls to that style.

  • Tammie

    @dahowlett: No problem at all. Well moving spotlight and resizing the content and sidebar would require you to edit home.php. If you are going the child / parent route you would want to create a home.php in the child with all the code of home.php in it then just remove the spotlight:

    Lines 55 - 70
    <div class="h3-background">
    <h3><?php _e( 'Spotlight', 'bp_scholar' ) ?></h3>
    </div>
    <?php query_posts('category_name='. $spotlight_category . '&showposts='. $spotlight_amount . ''); ?>
    <?php while (have_posts()) : the_post(); ?>

    <div class="content-box-inner">

    <div class="entry">
    <h4>" rel="bookmark" title="<?php _e( 'Permanent Link to', 'buddypress' ) ?> <?php the_title_attribute(); ?>"><?php the_title(); ?></h4>
    <div class="entry-image-side"> <span class="attach-post-image" style="height:60px;width:170px;display:block;background:url('<?php the_post_image_url($spotlight_image_display); ?>') center center repeat"> </span></div> <?php the_excerpt(); ?>
    " rel="bookmark" title="<?php _e('permalink to', 'bp_scholar');?><?php the_title_attribute(); ?>"><?php _e( 'Read more', 'bp_scholar' ) ?>
    <hr/>
    </div>
    </div>
    <?php endwhile; ?>

    Then you'd want to either add something to .front-sidebar or if you want to remove that entirely remove from lines 54 - 71 then change the width of the id #front-maincolumn (layout.css or call it in child.css)

    #front-maincolumn{
    float: left;
    margin-right: 10px;
    width: 520px;
    }

    Bare in mind I've not tested this so you may have to jig things about a bit when you come to it.

  • Tammie

    @dahowlett: You need to be very careful when editing the width of the slideshow. The actual script requires that the slideshow.php has a width call for the image and the script css has also a width call in _inc/css/slideshow.css. You MUST have any place you see a width like 730px the same for instance:

    slideshow.css:

    <br />
    #slider {<br />
        width: 730px; /* important to be same as image width */<br />
        height: 250px; /* important to be same as image height */<br />
        position: relative; /* important */<br />
    	overflow: hidden; /* important */<br />
    	background-color: #ffffff;<br />
    }<br />
    #sliderContent {<br />
        width: 730px; /* important to be same as image width or wider */<br />
        position: absolute;<br />
    	top: 0;<br />
    	margin-left: 0;<br />
    	background-color: #ffffff;<br />
    }

    then again in slideshow.css you MUST remember to set the image text which to give and take the padding: 20px (10px left / 10px right) + 710 = 730px:

    .sliderImage span {<br />
        position: absolute;<br />
    	font-size: 12px;<br />
        padding: 0px;<br />
        width: 710px;<br />
        background-color: #222222;<br />
        filter: alpha(opacity=90);<br />
        -moz-opacity: 0.9;<br />
    	-khtml-opacity: 0.9;<br />
        opacity: 0.9;<br />
        color: #AAAAAA;<br />
        display: none;<br />
    	padding: 10px 10px 0px 10px;<br />
    }<br />

    Then you have in slideshow.php the following:

    <li class="sliderImage"><div class="featured-image attach-post-image" style="height:250px;width:730px;display:block;background:url('<?php the_post_image_url($feature_image_display); ?>') center center no-repeat"></div>

    This must be changed too.

    As you can see it's a fairly tricky process but you could also do a global file search for 730px and / or slideshow. slideshow-wrapper is just a holder with a link style in styling.css

  • dahowlett

    Hi Tammie - I'm glad you've outlined above as these were all dimension instances I changed prior to my last message. In my example I reduced 730px to 640px and 710px to 620px. As a final change I altered slideshow.php width to 640px.

    I guess I'm at the point where I need to show you the site: http://www.bizcloudug.com/wpmu - If you hover over the slideshow area with Firebug you'll see the slideshow area itself is as expected but the wrapper is 'stuck' at 730px. As a result I can't get the sidebar to align with the top of the slideshow, floating right...

    Many thanks.

  • Tammie

    @dahowlett: No problem always happy to help someone trying to get their hands deeper into coding. Yes, child themes open up a world of possibilities both for good and headaches :slight_smile: You basically have a world if your oyster situation and as a result we can't write a manual for all purposes so we have these forums to assist. I think heads may explode if we had to add every possible variation people could do and a lot of this comes out from people using it as each site is unique.