Forums

Increase Screen Resolution of Plain Yoghurt theme

Permalink
Hi there!

After having check a few posts I am not hundred per cent sure of what files, css and other aspects I would have to edit if I want to increase the plain yoghurt theme.

I would like to increase the width to 900px, so it will involve making some changes in main.css and left, full and right pages.

Before I start, is there any particular aspect I should take into account in order to make changes that would apply sitewide changes? Best practices...

Thanks in advance for any advice!

All the best,
ggutierrez79
 
Ekko replied on at Permalink Best Answer Reply 1 Attachment
Ekko
Changing line 13 of main.css in concrete/themes/default from 800 to 900 will actually affect the rest of the pages and areas automatically as they are set for width percent instead of defined widths, this will also affect single pages like profile.

One thing you will want to do though is change the dotted line background which is an image in the themes image folder called nav_horizontal_divider. You can either resize it or go to dashboard, themes, and than click your theme. Go to "add your css" and add this to it to hide it.

#page #header {visibility:hidden;}

and press okay, save etc.

Screenshot attached
ggutierrez79 replied on at Permalink Reply
ggutierrez79
Thanks a lot Ekko!

Would you have any suggestion on how set the header nav to full width? In this case would be 900px. To do this, firstly I should remove "mysite"(left corner)and I have checked several threads about getting rid of it, but does not seem to work out.

Have removed from header.php:
<h1 id="logo"><!--
         --><a href="<?php echo DIR_REL?>/"><?php 
            $block = Block::getByName('My_Site_Name');  
            if( $block && $block->bID ) $block->display();   
            else echo SITE;
         ?></a><!--
      --></h1>


and from main.css:
#page #header #logo{ color:#999; font-size:1px; font-family:Arial, Helvetica, sans-serif;line-height: auto; margin-bottom: 0px; padding: 0px; margin-top:8px; cursor:pointer;  left:0px ; z-index:1; width:auto; float:left; position: relative }
#page #header #logo a{ /* customize_header_logo */color:#999; /* customize_header_logo */ text-decoration:none;}
#page #header #logo p{ display:inline; line-height:inherit; font-size:inherit; padding:inherit; margin:inherit; color:inherit }


What should I do then to make the full width?

Many Thanks in advance!
Ekko replied on at Permalink Reply 5 Attachments
Ekko
You can actually "skin" over the area without getting into code.

To start go to dashboard and go to stacks, add a stack call it eraser or something you can remember. Now add a content block to that stack but dont write anything in it. Approve changes. Now click the content block in the stack and select custom template. In the custom template "block name" field you are going to write My_Site_Name underscores and capitalization are important. Save, make sure you approve changes and now you have essentially "skinned" the logo area with a template of nothing, making the area dissappear including its vertical spacing.

The navigation area in Plain Yogurt will remain and will resize to whatever you put in it.

This will also take "priorty" over the existing site name stack so you dont have to get rid of it, just ignore it.

Screen Shots of process attached.

You could also use visibility css like add visibility:hidden to the logo area and add width:900px to the navigation area in place of width:auto.
ggutierrez79 replied on at Permalink Reply
ggutierrez79
Hi Ekko,

Thanks so much for all these tips and for the screeshots! Truly good! However, the header nav has positioned below and now it is overlapping my header img. I have reseted values and double checked every single line, since I must have deleted or edited some part of the css. jobsforlibrarians.com. Any suggestion? I have spent 4 hours and a half and couldn't find out why this is happening.

I have gone back to the width 800px and I will start later again wit the resizing from scratch.

Thanks again 4 everysingle second you spend with this!
Ekko replied on at Permalink Reply
Ekko
The navigation actually hasnt moved down but the rest of the site has moved up because the Logo area is gone. To get around this add some spacing to your image. If it was added with a block, click it and select design, now click the spacing tab and add some pixels at top.

Alternatively download spacer and put it in as a block above your image block, its the same thing just in block form, which I personally prefer as than I can easily see where I have added extra space.

http://www.concrete5.org/marketplace/addons/spacer/...


You can also remove the eraser stack to see that the nav stays in the same position just to be sure that what I am saying is correct. I checked it and double checked it but seeing it for yourself is always better.
Ekko replied on at Permalink Reply
Ekko
Also as a side note if the bit of space at the top of the page is unwanted it can be shortened at main.css line 13 , just change the below to less pixels.

#page #headerSpacer {
height: 64px;