Spacing between top of webpage and between header blocks
Permalink
Hi everyone
I am new to this and slowly making my way through building my site:www.www.michaeleyrephotography.com.au....
I am wondering if you can steer me in the right direction, I am wanting to reduce the spacing between the top of the webpage and the Header Nav (with the social media block), but also to slightly increase the space between the Header Nav and the Header (which has my logo within). Also, I am not sure why there is a line beneath the social media block?... but I will try and figure that out.
Any help appreciated fellow C5'ers :-)
Mike
I am new to this and slowly making my way through building my site:www.www.michaeleyrephotography.com.au....
I am wondering if you can steer me in the right direction, I am wanting to reduce the spacing between the top of the webpage and the Header Nav (with the social media block), but also to slightly increase the space between the Header Nav and the Header (which has my logo within). Also, I am not sure why there is a line beneath the social media block?... but I will try and figure that out.
Any help appreciated fellow C5'ers :-)
Mike
Great - thanks myTooq!
Hi Mike,
myTooq is correct in where to make the changes. Edits to your main.css will add and decrease the margins you are looking for, and remove the border below the social icons, change colors and more.
1) To view what changes will give results: view your page in Chrome or Firefox and use the editors tools (in chrome, right click over page and select "Inspect element"). For example, when viewing with editor tools in Chrome, the line you select on the left hand pane will highlight/shade the related area in your site. You can then view the righthand edit pane that will show the css rules applied and what line they are on. You can change those rules live to see how they appear before changing your site permantly.
PS. it helps to use a note pad handy to track edits :)
2) Apply edits by: Copy the theme you're using... root > concrete > Themes > Default and paste it into root > Themes..... this way your edits won't be overwritten if you update concrete later. Edit the lines (see step one) needing modification using an editor like notepad++ or gedit or the like. Save the edited CSS into your theme (the new location). Navigate to your site and view the edits. By making all your edits in your new copy, worse come to worse, it can be removed and the original theme will still be available and working.
Adrian
Arvixe Web Hosting / concrete5 Community Liaison |
Looking for quality concrete5 Web Hosting? Look no further than Arvixe Web Hosting!
www.www.arvixe.com/concrete5_hosting...
myTooq is correct in where to make the changes. Edits to your main.css will add and decrease the margins you are looking for, and remove the border below the social icons, change colors and more.
1) To view what changes will give results: view your page in Chrome or Firefox and use the editors tools (in chrome, right click over page and select "Inspect element"). For example, when viewing with editor tools in Chrome, the line you select on the left hand pane will highlight/shade the related area in your site. You can then view the righthand edit pane that will show the css rules applied and what line they are on. You can change those rules live to see how they appear before changing your site permantly.
PS. it helps to use a note pad handy to track edits :)
2) Apply edits by: Copy the theme you're using... root > concrete > Themes > Default and paste it into root > Themes..... this way your edits won't be overwritten if you update concrete later. Edit the lines (see step one) needing modification using an editor like notepad++ or gedit or the like. Save the edited CSS into your theme (the new location). Navigate to your site and view the edits. By making all your edits in your new copy, worse come to worse, it can be removed and the original theme will still be available and working.
Adrian
Arvixe Web Hosting / concrete5 Community Liaison |
Looking for quality concrete5 Web Hosting? Look no further than Arvixe Web Hosting!
www.www.arvixe.com/concrete5_hosting...
Excellent Adreco!... thank you so much for explaining the 'preview' using Firefox and info re: copy and viewing edits, the information is an absolute gem and makes like so much easier. I appreciate it very much.
Regards
Mike
Regards
Mike
#page #headerSpacer {height: 32px;}to:
#page #headerSpacer {height: 2px;}(The pixel amount can be adjusted as you see fit, 2px will keep it pretty close to the top with just a bit of space).