Jump to content
Sign in to follow this  
fran8969

Increasing the space between the top of the content area and the text header

Recommended Posts

fran8969

Hi, I'm after a bit of help in increasing the space between the top of the white content area of the site ( http://itsmydemo.co.uk/blog/ )and where the first text header starts. I have had to add in some custom code in order for the content area to appear white - div#pagelines_content {background-color: #ffffff;}.content-pad {padding: 0 0 0px 0 !important;} but if I increase the padding it appears in blue (which is what the content background is set to in order that the feature images fade into blue during transition) and not white as I need it to be... Can anyone help me with this please? Also, in adding this code to give the pagelines content the white background I notice that any comments boxes etc and also the blog nav still appears in blue. DO I need to add Custom CSS for each of these elements individually? If so, could you give me the code as I am a designer and not very technically minded!! thank you so much in advance!

Share this post


Link to post
Share on other sites
Danny

The issue you have is that you have this custom CSS.

.content-pad {
	padding: 0 0 0px 0 !important;
	}
So this is effecting all the padding for all content area's. I am not sure as to why you have done this but if you wish to have your header/navigation in the style you have now. Then you need to change the padding for the header/navigation only. You can try this below:
#pagelines_content { padding: 20px; }


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
fran8969

The problem is that I have the feature and header bar set to have no padding, and if I use the code you have given you can see that I now end up with an amount of blue surrounding the white whereas I want the white area to meet the width of the feature bar etc and to sit right up against the nav bar. The old code did just that, but I wanted to find a way to increase the spacing between the top of the pagelines_content area and the start of the first text header. See http://itsmydemo.co.uk/blog/ again. Is there any way to do this so that the text doesn't butt up against the nav bar but the white area does?

Share this post


Link to post
Share on other sites
Danny

Try this and see if this works for you.

.section-navbar .content-pad { padding: 0; }
	#content .content-pad { padding: 0px; }


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
fran8969

HI, no that hasn't worked. It put the content area back to blue and still no gap between the text and the the nav bar. The reason I have had to do this is because is the colour controls I had to set the content background colour to the blue in order that the images in the feature bar faded into the blue rather than white during the transitions, but of course that would mean that the entire content area would be blue also, hence why I added the Custom CSS... does that make sense? Sorry if I'm not being very clear - as I said, I'm new to all this programming stuff!

Share this post


Link to post
Share on other sites
fran8969

Also, could you have a look at this page: http://itsmydemo.co.uk/self-induced-stress/ You can see that the Post Nav and also the comments box is still blue on this page where I would like it to be white... Is there anything I can do to get the backgrounds of these to be white also? They are blue because the content background is set to blue in the Colour Control. This is where the problem is but I need that background of the features area to be blue, so perhaps there is another way of doing that? instead?

Share this post


Link to post
Share on other sites
Danny

Can you create a concept image please, showing how you would like your website to look. Once I know exactly what you want it to look, I can assist further.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Rob

In the first of the images, the solution is to clear the background of the page navigation:

.current_posts_info, .success, .content-pagination a .cp-num, .hentry table .alternate td, .playpause, .main-nav li:hover, .main-nav .current-page-ancestor a, .main-nav li.current-page-ancestor ul a, .main-nav li.current_page_item a, .main-nav li.current-menu-item a
	{background-color: transparent;}

Feel free to change 'transparent' in that code to any color value such as #C00000 Still working on the others. Do you have Firebug? If not http://www.getfirebug.com is the source.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob

The second is solved with this and 2 minutes of using Firebug.

textarea, input {
	    background-color: transparent;
	    border: 1px solid #014D76;
	}
	textarea {
	    background-color: transparent;}

The last issue is one of graphics. You need to make your slides partially transparent and use a background image behind them. Layered, if you will, so that when the slide transitions, it does so over the graphic behind it. Being partially transparent, the background shows through and the picture transitions cleanly. Unfortunately, I can't give you much more than that except that I would not make that background the one in the slider. You need a page or section background.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
fran8969

Wow - thank you - the solution to the 2nd image worked perfectly - thank you, and now the comments boxes have a white background which is perfect. The solution to the 1st image doesn't seem to have done anything - the backgrounds to the posts info etc still appear blue. I wonder if there is something else I have in the custom CSS that may be preventing this from working? I have pasted below all the Custom CSS which I am using... #footer{width:1128px;margin:0 auto;} #footer .content {background-color:#000000;} #branding .content-pad {padding: 0 0 0px 0 !important;} #navigation .content-pad {padding: 0 0 0px 0 !important;} #features .content-pad {padding: 0 0 0px 0 !important;} #features #feature_slider { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; border: 0; background: none; } #features #feature-area { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } div#pagelines_content {background-color: #ffffff;}.content-pad {padding: 0 0 0px 0 !important;} .current_posts_info, .success, .content-pagination a .cp-num, .hentry table .alternate td, .playpause, .main-nav li:hover, .main-nav .current-page-ancestor a, .main-nav li.current-page-ancestor ul a, .main-nav li.current_page_item a, .main-nav li.current-menu-item a {background-color: #FFFFFF;border: 1px solid #014D76;} textarea, input { background-color: #FFFFFF; border: 1px solid #014D76; } textarea { background-color: #FFFFFF;}

Share this post


Link to post
Share on other sites
Danny

Hi, Add this, it should resolve the issue with the blue post navigation.

.post-nav { background: white; }


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
fran8969

Thank you - that's awesome. You guys are amazing! :)

Share this post


Link to post
Share on other sites
catrina

Try adding this to Custom CSS to see if it changes the background color for just the name:

input#author {background-color: #fff !important;}


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×