23 points
Community rank #2619
dahowlett
SophomoreJust Getting Started
MemberLikes (0)
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.
4842 pointsCommunity rank #13Supreme DeityMind-Blowingly HelpfulLifetime member
Theme Designer
(joined November 2009)
Likes (0)
@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:
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.
23 pointsCommunity rank #2619SophomoreJust Getting Started
Member
(joined March 2010)
Likes (0)
Thanks Tammy, much appreciated - that's a great start. I had made a lot of progress with the theme style options, - hopefully this will finish that part of the job. Now for a bit of poking about at my end ;) What about removing spotlight and resizing the remaining content and sidebar area please? Thanks again.
4842 pointsCommunity rank #13Supreme DeityMind-Blowingly HelpfulLifetime member
Theme Designer
(joined November 2009)
Likes (0)
@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:
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)
23 pointsCommunity rank #2619SophomoreJust Getting Started
Member
(joined March 2010)
Likes (0)
Thanks again Tammie - one last question. Where is the code that defines the width for div id = 'slideshow-wrapper' please? I've looked high and low for it and can't find anything I can make work. (looked in all the CSS files, slideshow.php etc...)
4842 pointsCommunity rank #13Supreme DeityMind-Blowingly HelpfulLifetime member
Theme Designer
(joined November 2009)
Likes (0)
@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:
<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
23 pointsCommunity rank #2619SophomoreJust Getting Started
Member
(joined March 2010)
Likes (0)
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...
4842 pointsCommunity rank #13Supreme DeityMind-Blowingly HelpfulLifetime member
Theme Designer
(joined November 2009)
Likes (0)
@dahowlett: You've still got your #content set to a wider width that is your issue. All the other unspecified width elements will fall into line once that is set to a smaller size.
23 pointsCommunity rank #2619SophomoreJust Getting Started
Member
(joined March 2010)
Likes (0)
@Tammie - I just knew it would something really simple I'd overlooked - many thanks for your help. Much appreciated...and a good learning experience about managing child themes... ;)
4842 pointsCommunity rank #13Supreme DeityMind-Blowingly HelpfulLifetime member
Theme Designer
(joined November 2009)
Likes (0)
@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 :) 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.
Responses (9)
Theme Designer (joined November 2009) Likes (0)
@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.
Member (joined March 2010) Likes (0)
Thanks Tammy, much appreciated - that's a great start. I had made a lot of progress with the theme style options, - hopefully this will finish that part of the job. Now for a bit of poking about at my end ;) What about removing spotlight and resizing the remaining content and sidebar area please? Thanks again.
Theme Designer (joined November 2009) Likes (0)
@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.
Member (joined March 2010) Likes (0)
Thanks again Tammie - one last question. Where is the code that defines the width for div id = 'slideshow-wrapper' please? I've looked high and low for it and can't find anything I can make work. (looked in all the CSS files, slideshow.php etc...)
Theme Designer (joined November 2009) Likes (0)
@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:
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:
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
Member (joined March 2010) Likes (0)
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.
Theme Designer (joined November 2009) Likes (0)
@dahowlett: You've still got your #content set to a wider width that is your issue. All the other unspecified width elements will fall into line once that is set to a smaller size.
Member (joined March 2010) Likes (0)
@Tammie - I just knew it would something really simple I'd overlooked - many thanks for your help. Much appreciated...and a good learning experience about managing child themes... ;)
Theme Designer (joined November 2009) Likes (0)
@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 :) 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.
Become a member