Remove spacing & adding spacing WordPress
- SOLVED
I'm building a [[LINK href=http://joshsauberman.com/southbay/l"]]Landscaping site[[/LINK]] based on this [[LINK href="http://themeforest.net/item/cresendo-elegant-photography-wordpress-theme/full_screen_preview/1230985"]]Cresendo template[[/LINK]] and I'm having a little trouble with there being extra space below the rotating homepage gallery. Can anybody offer a simple suggestion on how to remove it?
If you compare my site to the template demo, you can see that space shouldn't be there.
Second, I need to know how I can expand the size of, and change the color, of the black navigation bar/header at the top.
I imaging most of this would be simple CSS.
Answers (3)
Arnav Joy answers:
to remove space go go to
/wp-content/themes/cresendo/style.css
line 263 and find following
#header-container.noslogan {
background-position: left bottom !important;
padding: 0 0 35px;
}
and replace with following
#header-container.noslogan {
background-position: left bottom !important;
padding: 0 0 0;
}
Arnav Joy comments:
for header bg
open /wp-content/themes/cresendo/styles/default.css
find two following lines
#top-container {
background: url("default/bg-top.gif") repeat-x scroll 0 0 transparent;
}
#top-container {
height: 70px;
}
now change the background image and increase the height
Arnav Joy comments:
you can also give color to header as follows
remove the line
background: url("default/bg-top.gif") repeat-x scroll 0 0 transparent;
and increase the height you want as follows :-
#top-container {
background-color: red;
height: 90px;
}
Josh Sauberman comments:
I made this change Arnav, but it's not the same as the [[LINK href="http://themeforest.net/item/cresendo-elegant-photography-wordpress-theme/full_screen_preview/1230985"]]theme[[/LINK]]. If you look at the theme, the slider drops below the blue. Any thoughts on this?
Arnav Joy comments:
find out following line
#slider-container2 (line 444)
replace the whole with
#slider-container2 {
height: 464px;
margin-top: 0;
position: relative;
top: 28px;
}
adjust the top top: 28px; with desired
and then find
.slider-separator
replace with
.slider-separator {
margin: 61px auto 35px !important;
width: 940px;
}
adjust the
margin: 61px auto 35px auto !important;
to desired
Josh Sauberman comments:
Thanks Arnav. I haven't tried it yet, but I image your suggestions will do the trick. The site isn't for me so I'll run it by the person I'm building it for and follow your advice if I need to make the changes.
Cheers!
Manoj Raj answers:
To accomplish the spacing exactly as in the template
1) The difference in spcaing occurs due to the "header-text" element in both
In the original theme, the header-text contains a paragraph(slogan) in addition to the main heading
In your theme, the header-text contains no paragraph and hence the class <em>noslogan</em>
One more thing in your theme -> you have used some images of dimension 460px instead of 464px (which is the height of the slider) and there are some inconsistencies if you notice....
add the following to your css to remove the spacing and background will fit as in the original theme
#header-container.noslogan {
background-position: left -52px !important;
padding: 0 0 0px 0;
}
2) To increase the height of the navigation and other stuffs, add the following code to your stylesheet
If you are going to add any other elements below the logo or the navigation, the following will be useful -> Increase the height
#top-container { background: none #000000 !important; height: 114px; border-bottom: 6px solid #e2e2e2; }
Otherwise, you just want to expand the size of the navigation container with no new elements...i suggest the following ->increase the padding so the elements will remain in the center
#top-container { background: none #000000 !important; height: 70px; padding: 25px 0px; border-bottom: 6px solid #e2e2e2; }
You can change the background color, border color and any other thing as you wish....
Pali Madra answers:
Look for the following code in wp-content/themes/cresendo/styles/default.css
.slider-separator{margin: 40px auto 40px auto !important; width:940px}
change that to change the height of the spacing. For example if you want to increase the space by 10 pixels the new code should be
.slider-separator{margin: 45px auto 45px auto !important; width:940px}
Hope this helps.