Shape 5

Joomla Templates => Incline - Club => : chriddo December 20, 2014, 11:03:14 AM



: How to reduce margin from breadcrumbs to first heading?
: chriddo December 20, 2014, 11:03:14 AM
As seen in the attached image, there is too much empty space. How can I reduce this area?


: Re: How to reduce margin from breadcrumbs to first heading?
: mikek December 22, 2014, 07:43:29 AM
Hello,

You can add something like the following to custom.css:

#s5_bread_lang_holder {
margin-bottom:-50px;
}


: Re: How to reduce margin from breadcrumbs to first heading?
: chriddo December 22, 2014, 07:44:44 AM
Thank you Mike!


: Re: How to reduce margin from breadcrumbs to first heading?
: mikenicoll December 23, 2014, 09:05:32 PM
Let us know if you have any further questions


: Re: How to reduce margin from breadcrumbs to first heading?
: chriddo January 03, 2015, 07:23:58 AM
Sorry to bother you again. I checked now with this code that you gave me above ... but nothing happends I am afraid.

I still have the big "gaps" present.

Any ideas on how to solve this?


: Re: How to reduce margin from breadcrumbs to first heading?
: mikek January 03, 2015, 07:54:01 AM
Hello,

Try this instead:

#s5_bread_lang_holder {
margin-bottom:-50px !important;
}


: Re: How to reduce margin from breadcrumbs to first heading?
: chriddo January 03, 2015, 08:00:23 AM
No change I?m afraid. Any other ideas  ???


: Re: How to reduce margin from breadcrumbs to first heading?
: speleo January 05, 2015, 08:58:59 AM
Chrome Developer Tools is your friend.  Learn how to use it here
https://developer.chrome.com/devtools/docs/videos


: Re: How to reduce margin from breadcrumbs to first heading?
: mikenicoll January 10, 2015, 04:33:47 PM
I would also suggest looking at Firebug if you are using Firefox. It is a very useful tool for identifying specific areas on a website and seeing where the inherit CSS is coming from.


: Re: How to reduce margin from breadcrumbs to first heading?
: jeffj February 19, 2015, 12:22:33 PM
chriddo, did you ever find out how to resolve this problem?  I have the same problem, and entering this code in the custom.css file did not work for me either?

:
#s5_bread_lang_holder {
margin-bottom:-50px !important;
}

http://www.go2japan.org/a2/


: Re: How to reduce margin from breadcrumbs to first heading?
: mikek February 20, 2015, 05:11:58 PM
Hello,

That's actually a different area than the original post. Try adding the following to custom.css:

#s5_header_spacer {
display:none;
}


: Re: How to reduce margin from breadcrumbs to first heading?
: jeffj February 20, 2015, 05:42:46 PM
Hello,

That's actually a different area than the original post. Try adding the following to custom.css:

#s5_header_spacer {
display:none;
}

Actually, the original post (see chriddo's original screenshot) is the same thing I want to do, namely to reduce the margin from the breadcrumb to the top of the first article.

One screenshot I am attaching is NO-CODE. (As chriddo said, "There is too much empty space. How can I reduce this area?").

The other one is WITH-CODE that you suggested, which entirely removes the breadcrumbs.

I do want breadcrumbs to display. I just don't want so much white space around it. Hope this makes sense.

- jeff


: Re: How to reduce margin from breadcrumbs to first heading?
: mikenicoll February 20, 2015, 05:55:17 PM
Hello,

There are really 2 areas here defining that space.

:
template.css - line 340

#s5_header_spacer {
    display: block;
    height: 94px;
    width: 100%;
}


template.css - line 515

#s5_center_area1 {
    padding-top: 120px;
}

You can go into those files to modify the padding's and height of the spacer block as needed. You can also alternatively add some large negative margins such as:

:
#s5_bread_lang_holder {
    margin-bottom: -100px !important;
    margin-top: -60px !important;
}


: Re: How to reduce margin from breadcrumbs to first heading?
: jeffj February 20, 2015, 06:07:46 PM
Ok, Mike, this is really helpful and exactly what I needed. Thank you for giving me those two lines in the template.css file.  I have adjusted them to my liking.

One related question about breadcrumbs... I don't know how to make the separators (e.g., > or | or // ) appear in my breadcrumbs. I've entered ">" but they don't appear.

- jeff


: Re: How to reduce margin from breadcrumbs to first heading?
: mikenicoll February 20, 2015, 06:10:54 PM
Hello,

The separators should be built into an input field directly into the breadcrumb module options provided with Joomla. Generally we just leave it blank or use // in the input fields.


: Re: How to reduce margin from breadcrumbs to first heading?
: jeffj February 20, 2015, 06:58:36 PM
Mike,

Yes, I have entered ">" into that breadcrumb module. I also tried "|" and "//" as well. Nothing works. The separator area is always blank. This worked fine on the previous S5 template I used for this site. I just thought there might be a bootstrap issue for this.

- jeff


: Re: How to reduce margin from breadcrumbs to first heading?
: mikenicoll February 20, 2015, 07:05:59 PM
Hello,

Maybe try checking what the font values are set as. I have seen issues occur when font values are set as "em" values instead of "px" values in bootstrap.


: Re: How to reduce margin from breadcrumbs to first heading?
: jeffj February 20, 2015, 07:21:56 PM
Hello,

Maybe try checking what the font values are set as. I have seen issues occur when font values are set as "em" values instead of "px" values in bootstrap.

Sorry for my ignorance, but where would I find the values in bootstrap?


: Re: How to reduce margin from breadcrumbs to first heading?
: mikenicoll February 20, 2015, 07:28:34 PM
Can you post a URL where you have set the back end values for the breadcrumb input to // please.


: Re: How to reduce margin from breadcrumbs to first heading?
: jeffj February 20, 2015, 07:36:31 PM
I haven't entered anything for bootstrap, other than the Vertex setting in the template admin area. I didn't edit any CSS for bootstrap. Everything has been pretty much default.

The only place I edited the breadcrumb separator text is in the Breadcrumb module in the module mgr. And there's no place for px or em.


: Re: How to reduce margin from breadcrumbs to first heading?
: jeffj February 20, 2015, 07:50:48 PM
Here's the bootstrap section in Vertex...


: Re: How to reduce margin from breadcrumbs to first heading?
: mikenicoll February 21, 2015, 07:54:42 PM
Hello,

Please post a URL as requested.


: Re: How to reduce margin from breadcrumbs to first heading?
: jeffj February 21, 2015, 09:22:44 PM
http://go2japan.org/a2/blog


: Re: How to reduce margin from breadcrumbs to first heading?
: mikenicoll February 21, 2015, 10:24:35 PM
Hello,

Remove this from the Template.CSS file.

:
#s5_breadcrumb_wrap .divider {
     display: none;
}


: Re: How to reduce margin from breadcrumbs to first heading?
: jeffj February 21, 2015, 10:35:46 PM
In what line does it appear? I ran a search and that line of code did not appear.


: Re: How to reduce margin from breadcrumbs to first heading?
: mikenicoll February 21, 2015, 11:11:01 PM
470


: Re: How to reduce margin from breadcrumbs to first heading?
: jeffj February 21, 2015, 11:13:10 PM
Perfect! Thanks Mike!


: Re: How to reduce margin from breadcrumbs to first heading?
: mikenicoll February 21, 2015, 11:38:35 PM
No problem :)