motercalo Changing the Skeleton theme slightly - www.yacs.fr

Skip to main content Help Control Panel

 

support «   Need Help «  

Changing the Skeleton theme slightly

avatarBoen, Jan -- on Oct. 2 2009

Can you point the way?
WorkflowSupport request
StatusProblem has been recorded
OwnerBoen, Jan
Progress0%

Issue description

I would like to change the proportions of the inset (there is a grey outsude area that I would like to make smaller) and left column (which I would like to make narrower) in the skeleton theme.

See the attached screen shot

Any idea which parts of the theme I would have to adjust.

Chang colors and fonts through the CSS files is no problem neither changing the various images.

 

 

Files

Changes to Skeleton theme.jpg - 58,334 bytes, 16 downloads
edited by Boen, Jan on Oct. 2 2009 · details

Comments

avatar
Alain Lesagefrom Montréal ou Chambly, Québec
1293 posts

on Oct. 3 2009

Sure. You have to change some CSS rules in your derived skin (please derive the skeleton skin before tweaking it to preserve your settings):

  • for the grey sides, decrease body padding from 3% to whatever you want (zero is acceptedand won't need a % sign)
  • for the size of the side panel, you will have to change two rules : increase both the width of main_panel from 72% and margin-right of the side_panel from 75% by a few points

It is really easy to find out what to change once you get used to checking the layout with the Firebug extension for Firefox. Check it out, it will be one of the best investment of your time in your new web design carreer, I swear!

-----
On a si peu d'idée de ce qui est possible...
avatar
Boen, Jan
122 posts

on Oct. 3 2009

Merci!!

avatar
Alexis Raimbaultfrom Mulhouse
1156 posts

on Oct. 3 2009

And also to fit the background images you will have to change few more things :

for #wrapper, decrease the position-x % of the background to fit the new size of side_panel

same with #wrapper_prefix and #wrapper_suffix



avatar
Boen, Jan
122 posts

on Oct. 3 2009

Firebug = great tip!!!

avatar
Boen, Jan
122 posts

on Oct. 4 2009

OK. So I got most changes done except the last one

 

In the template.php file it says the following:

    // the site name -- can be replaced, through CSS, by an image -- access key 1
    if($context['site_name'] && is_callable(array('i18n', 's')))
        echo '<p id="header_title"><a href="'.$context['url_to_root'].'" title="'.encode_field(i18n::s('Front page')).'" accesskey="1">'.$context['site_name'].'</a></p>'."\n";
 

Any idea what I need to do to get a logo called "logo.png" or "logo.jpg" to be displayed instead of the "site_name".

 

I've looked at the CSS file but find no obvious clues.

 

avatar
Bernard Paquesfrom nearby-an-airport
Associate, 7948 posts

inspired from Boen, Jan on Oct. 4 2009

Jan: you can mask the regular content and display your image in the background instead. Put something like the following in your CSS file (not tested):

/* mask regular text */
p#header_title a {
 display: none;
}

/* use the logo as background */
p#header_title {
 background: transparent url('logo.png') no-repeat;
 height: 123px; /* height of the logo */
 width: 123px; /* width of the logo */
}
avatar
Boen, Jan
122 posts

on Oct. 5 2009

OK.

The logo is in...

Alas I couldn't get the logo to replace the site name so reduced the font size to 0 to hide this.

What is now still lacking is the ability to click the logo to go the home page.

Suggestions?

avatar
Bernard Paquesfrom nearby-an-airport
Associate, 7948 posts

inspired from Boen, Jan on Oct. 5 2009

Jan: My suggestion was only aiming to replace some text by a background image. If you want to get a clickable image, why not derive a skin of your own? You could then change template.php to customize it to your needs, with code like the following: 
echo '<p id="header_title">'
 .'<a href="'.$context['url_to_root'].'" title="'.encode_field(i18n::s('Front page')).'" accesskey="1">'
 .'<img src="path/to/logo.png" /></a></p>'."\n";
Download yacs