Delete this:


from your main.css file in your theme directory. and then add this:


into the #page #header #logo section just below that in the same file.

-Guy

So this is what I have...

/* Page Structure / Navigation */
#page{ width:800px; margin:auto; text-align:left }
#page #headerSpacer{ height:0px }
#page #header{ position:relative; }
#page #header #logo{ color:#999; font-size:32px;
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 }

I see the #page #header #logo, one with an a after it and one with a p...where do I put the height 0?

Thanks!
jodey

The one before both of those, with nothing after it.

Hi there
I have same problem with the Greek Yogurt theme i'm using often.
I need to decrease its vertical size, too much space wasted, without any content
But in main.css or typography.css, i dont see any height command
Pls help

Thank you
George

Two things control the white space at the top.

In line 24 in main.css, the 'margin: 55px..." can be reduced:



Also in line 14 of typography.css, the 'padding-top: 55px' can be reduced.

hey as you are about to see from my question I am very new....but how do I access my main.css file from the theme directory?

I am just using a standard theme, and I can't seem to change much about it or access the main css file. I see all over the place that I am told to copy the theme or something, but I don't know how to do that either, any suggestions?

...I also want to get rid of some extra white space at the top of my website.

Welcome! Grab a coffee, this is going to get ugly!

To edit the files, you have to gain FTP access to your server. Your host should have sent you an introductory email that tells you your FTP server name, your FTP username and perhaps your FTP password. you can use your host's File Manager or you can use an FTP program to edit your files.

I use a couple of free programs, Notepad++ (http://notepad-plus-plus.org/download/v6.3.3.html) and Filezilla (https://filezilla-project.org/download.php?type=client), to edit my site files through an FTP connection. Notepad++ has an FTP add-on that lets you edit files directly on the server. Here's how to set that up:https://sites.google.com/site/an324wiki/home/nppftp...

For ease of use, Filezilla needs to be set up to open PHP & CSS files automatically in your favorite editor through 'Settings->File Editing->File Associations'.

Once you have FTP access, you need to copy your theme folder from (for example) '[root]/concrete/themes/greek_yogurt' to '[root]/themes/my_greek_yogurt'. Inside this new folder, you will find a file called 'description.txt'. Edit this file and change the first line to be 'My Greek Yogurt' (same example). The rules for this are to replace underscores with spaces and capitalize the first letter of each word. I usually change the second line to indicate that this is a 'Copy of Greek Yogurt'.

Visit 'Dashboard->Themes' and you should see a new theme called 'My Greek Yogurt' (for example). 'Activate' this new theme to switch your site to use the copy.

Finally... you are able to edit the '[root]/themes/my_greek_yogurt/main.css' file.

When editing your site, make sure you turn off all the C5 caching by visiting 'Dashboard->System and Settings->Cache and Speed Settings'. Turn off the caching in your browser as well. You do this to make sure your browser grabs the main.css file you just edited rather than using the one in the cache.

As for the white space, once you have your new theme working, right-click at the top of your page and choose 'Inspect Element'. You can then click on the HTML elements (<div>,<img>, etc) and the CSS rules that apply to that element will show up on the right. You can experiment on the live page by changing the values in this right panel to see what rule needs to be changed to get the effect you want. This panel also tells you the file name and the line number for the css file that contains the rule. Probably changing the 'margin-top', 'padding' or 'height' will adjust the whitespace.

Several learning curves to get through here but keep at it!

I was scared to try all this at first, but it isn't that difficult once you get the hang of it. It's like teaching your grandmother to use facebook. At first she says it's impossible, but in a couple weeks she is on 24/7!

@mhawke, thank you for the detailed explanation. It was hard to find something this clear when I first started.